A tab button can now be set to not take the full space within the tab bar, also exposed the button's Background property in TabButton.

[emayevski]

The problem: imagine you have a tab bar with a TabItem, a TabButton, and a TabItem. The width is 900 px. Each of the entries gets the width of 300 px (by default). The icons and texts of tabitems are centered within the provided 300 px (at positions cca 150 and 750 respectively). Now, if the TabButton is 60 px wide and is centered around point 450, you have a huge empty space from point 150 to point 420 - the distance between 0 and 150 is way lower than the distance between 150 and 420. The centered icon and text at point ~150 appear visually shifted to the left, and those at point ~750 appear shifted to the right. Now, if we give the button the width of 60 px, the left tab item would get the width of 420 px and the left icon and text would be centered around point 210, and thus appear centered between the left edge and the button. The same would apply to the tab item.

A similar problem, albeit less visible, would occur with four tab items and a tab button.

The solution: included in this revision. It is optional and the default is the same as before in order not to break other users' design.

A tab button can now be set to not take the full space (width for horizontal tab bars and height for vertical tab bars) of the bar item but be constrained to its necessary size. This lets other tab items be sized appropriately, taking all visible empty space and centering their icon or text appropriately. The behavior is controlled by the added ExpandToTabSize property of TabButton (the default value is true to keep the previous behavior).

Additionally, I have exposed the internal button's Background property in TabButton in order to be able to customize the brush (I needed a gradient tab button).