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. #140
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…izontal 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 behavios is controlled by the added ExpandToTabSize property of TabButton (the default value is true to keep the previous behavior).
…y to create gradient button backgrounds.
emayevski
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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).