Skip to content

TabView gap between active tab and active content fix #6644

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 28, 2022

Conversation

ojhad
Copy link
Contributor

@ojhad ojhad commented Jan 27, 2022

Description

Gap between active tab and active tab content when device scale factor is not 100%
image

The SelectedBackgroundPath path is not being drawn all the way down in non-100% scale factors. Layout rounding API does not seem to fix this. I added an extra pixel to TabGeometry which is being used to draw the background. That fixed the drawing at non-100% scale factors while still looking correct at 100% scale.

Motivation and Context

fixes internal bugs 37332027

Screenshots

Pre-Fix on top of Post-Fix

100% scale
image
image
image
image

125% scale
image
image
image
image

150% scale
image
image
image
image

175% scale
image
image
image
image

200% scale
image
image
image
image

@ghost ghost added the needs-triage Issue needs to be triaged by the area owners label Jan 27, 2022
@ojhad
Copy link
Contributor Author

ojhad commented Jan 27, 2022

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@ojhad
Copy link
Contributor Author

ojhad commented Feb 1, 2022

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@ojhad ojhad changed the title TabView bottom border gap fix TabView gap fixes Feb 2, 2022
@ojhad
Copy link
Contributor Author

ojhad commented Feb 16, 2022

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@ojhad ojhad requested a review from RBrid February 17, 2022 21:38
@ojhad ojhad changed the title TabView gap fixes TabView gap between active tab and active content fix Feb 22, 2022
@ojhad ojhad force-pushed the user/ojhad/tabviewcontourfix branch from 961f8d2 to 750a93e Compare February 24, 2022 01:32
@ojhad
Copy link
Contributor Author

ojhad commented Feb 24, 2022

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@ojhad ojhad requested a review from StephenLPeters February 25, 2022 21:02
@ojhad
Copy link
Contributor Author

ojhad commented Feb 28, 2022

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

SetFirstTabSelectedBackgroundPathFill(tabBrush);

var contentBrush = new SolidColorBrush();
contentBrush.Color = Colors.Green;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should these colors be translucent?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or maybe have a button to set translucency to 50%

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added buttons to set each of these to transparent. Does that cover this use case or was there another use case you are thinking of?

@StephenLPeters StephenLPeters added area-TabView team-Controls Issue for the Controls team and removed needs-triage Issue needs to be triaged by the area owners labels Feb 28, 2022
@ojhad ojhad merged commit 9db5d4b into main Feb 28, 2022
@ojhad ojhad deleted the user/ojhad/tabviewcontourfix branch February 28, 2022 23:27
RBrid added a commit that referenced this pull request Apr 5, 2022
RBrid added a commit that referenced this pull request Apr 6, 2022
kmahone pushed a commit that referenced this pull request Apr 6, 2022
RBrid added a commit that referenced this pull request Apr 12, 2022
* Reverting product change made for 'TabView gap between active tab and active content fix #6644'

* TabView expansions fix
kmahone pushed a commit that referenced this pull request May 4, 2022
* Reverting product change made for 'TabView gap between active tab and active content fix #6644'

* TabView expansions fix
@ghost
Copy link

ghost commented Jun 2, 2022

🎉This issue was addressed in #6954, which has now been successfully released as Microsoft.UI.Xaml v2.8.0-prerelease.220601001.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-TabView team-Controls Issue for the Controls team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants