NavigationView InfoBadge integration #5769

StephenLPeters · 2021-08-25T17:52:37Z

Add Info Badge integration into Navigation View:

…dgeSupport

…o user/stpete/NVIInfoBadgeSupport

…code behind.

StephenLPeters · 2021-08-26T00:30:12Z

/azp run

azure-pipelines · 2021-08-26T00:30:24Z

Azure Pipelines successfully started running 1 pipeline(s).

…22 icon column width instead of 8 to account for the changes made in the PR, update Content margin to account for changed icon column width.

StephenLPeters · 2021-08-26T19:22:48Z

/azp run

azure-pipelines · 2021-08-26T19:22:59Z

Azure Pipelines successfully started running 1 pipeline(s).

StephenLPeters · 2021-08-26T22:03:09Z

/azp run

azure-pipelines · 2021-08-26T22:03:20Z

Azure Pipelines successfully started running 1 pipeline(s).

StephenLPeters · 2021-08-27T00:32:03Z

/azp run

azure-pipelines · 2021-08-27T00:32:15Z

Azure Pipelines successfully started running 1 pipeline(s).

karkarl · 2021-08-27T01:03:24Z

dev/NavigationView/NavigationViewItemPresenter.cpp

@@ -135,7 +140,7 @@ void NavigationViewItemPresenter::UpdateCompactPaneLength(double compactPaneLeng
        const auto gridLength = compactPaneLength;

        templateSettings->IconWidth(gridLength);
-        templateSettings->SmallerIconWidth(gridLength - 8);
+        templateSettings->SmallerIconWidth(gridLength - 22);


what's this change for?

karkarl · 2021-08-27T01:04:12Z

dev/NavigationView/NavigationView_rs1_themeresources.xaml

@@ -294,7 +294,7 @@
    <Thickness x:Key="NavigationViewCompactItemSeparatorMargin">0,3,0,4</Thickness>
    <Thickness x:Key="TopNavigationViewItemSeparatorMargin">3,0,4,0</Thickness>
    <Thickness x:Key="TopNavigationViewOverflowButtonMargin">0</Thickness>
-    <Thickness x:Key="NavigationViewItemContentPresenterMargin">4,-1,20,-1</Thickness>
+    <Thickness x:Key="NavigationViewItemContentPresenterMargin">18,-1,20,-1</Thickness>


same question as the template settings smallerIconWidth comment.

karkarl · 2021-08-27T01:05:47Z

dev/NavigationView/NavigationView_rs1_themeresources.xaml

                                </Grid.ColumnDefinitions>

                                <Border x:Name="IconColumn" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SmallerIconWidth}">
                                    <Viewbox x:Name="IconBox"
                                        Height="{ThemeResource NavigationViewItemOnLeftIconBoxHeight}"
-                                        HorizontalAlignment="Center"
+                                        HorizontalAlignment="Right"


Would this change break if we set the iconColumnWidth wider?

Yes your right... This and the other two changes you called out are to get around a rendering issue(feature?) where if the icon column is larger than the available size the parent grid would impose a clip. This happens because of a margin I had to introduce to get the info badge to not overlap the scroll bar..... This isn't usually an issue because there are 14 pixels of extra space to the right of the icons which we can remove for the scrollbar and just align the icon to the right and reduce its size.

But since this doens't work when you change the sizes... I'll find a different way to do this

karkarl · 2021-08-27T01:06:47Z

dev/NavigationView/NavigationView_rs1_themeresources.xaml

@@ -797,6 +815,13 @@
                                        </local:AnimatedIcon.RenderTransform>
                                    </local:AnimatedIcon>
                                </Grid>
+
+                                <ContentPresenter


This should be moved up, since its grid.Column is 2

We want the badge to render above all the other UI components so it should be declared last, usually it wont matter because the grid columns don't overlap but you can make them with some of the exposed resources.

karkarl · 2021-08-27T01:08:17Z

dev/NavigationView/NavigationView_rs1_themeresources.xaml

@@ -1393,6 +1449,9 @@
                                        </local:AnimatedIcon.RenderTransform>
                                    </local:AnimatedIcon>
                                </Grid>
+
+                                <ContentPresenter x:Name="InfoBadgePresenter" Grid.Column="2" VerticalAlignment="Center" Content="{TemplateBinding InfoBadge}"/>


This should also be moved before expand Collapse chevron.

We want the badge to render above all the other UI components so it should be declared last.

…the margin during the expanded state

StephenLPeters · 2021-08-27T05:02:29Z

/azp run

azure-pipelines · 2021-08-27T05:02:41Z

Azure Pipelines successfully started running 1 pipeline(s).

StephenLPeters · 2021-08-27T05:43:42Z

/azp run

azure-pipelines · 2021-08-27T05:43:54Z

Azure Pipelines successfully started running 1 pipeline(s).

StephenLPeters · 2021-08-27T07:24:03Z

/azp run

azure-pipelines · 2021-08-27T07:24:41Z

Azure Pipelines successfully started running 1 pipeline(s).

ojhad · 2021-08-27T07:50:56Z

dev/NavigationView/NavigationViewItemPresenter.h

@@ -33,6 +33,8 @@ class NavigationViewItemPresenter:

    void UpdateClosedCompactVisualState(bool isTopLevelItem, bool isClosedCompact);

+    void UnparentInfoBadge();


can remove, no implementation

karkarl · 2021-08-27T17:53:38Z

dev/NavigationView/NavigationView_rs1_themeresources.xaml

@@ -294,17 +294,17 @@
    <Thickness x:Key="NavigationViewCompactItemSeparatorMargin">0,3,0,4</Thickness>
    <Thickness x:Key="TopNavigationViewItemSeparatorMargin">3,0,4,0</Thickness>
    <Thickness x:Key="TopNavigationViewOverflowButtonMargin">0</Thickness>
-    <Thickness x:Key="NavigationViewItemContentPresenterMargin">4,-1,20,-1</Thickness>
+    <Thickness x:Key="NavigationViewItemContentPresenterMargin">4,-1,8,-1</Thickness>


Have you verified that everything looks correct visually even in other states?

Discussed offline. Surfaced existing visual bugs that will be filed separately.

StephenLPeters · 2021-08-27T18:21:50Z

/azp run

azure-pipelines · 2021-08-27T18:22:02Z

Azure Pipelines successfully started running 1 pipeline(s).

StephenLPeters added 16 commits April 23, 2021 11:38

save state

df5302b

Remove the is open property.

88a8b01

merge in main

f389e02

Revert fully rounded rect converter.

96b3f9f

revert formatting change

1b0071c

Fix build break

ee9774c

Fix build break

80230ef

Add more tests,.

6e1e068

Change negative value behavior and fix down level crash

ec88154

Add custom styles to Infobadge

2fb61dc

Merge branch 'user/stpete/InfoBadgeStyles' into user/stpete/NVIInfoBa…

dd7c327

…dgeSupport

Merge in Main

e6e8b17

Fix an issue with the margin not being apply to value infobadges.

762724e

Merge remote-tracking branch 'origin/user/stpete/InfoBadgeStyles' int…

3a53a77

…o user/stpete/NVIInfoBadgeSupport

save state

18370e8

Save State

8810aca

ghost added the needs-triage Issue needs to be triaged by the area owners label Aug 25, 2021

StephenLPeters added 4 commits August 25, 2021 12:53

Test removing info badge from presenter..

58cc365

Switch from borders to content presenters and remove the unparenting …

d47ac43

…code behind.

Merge in main

de85df1

Change attention collor to non hign contrast color.

5dc79f7

Fix tests, make info badge not a tab stop, change tests to expect a -…

174bc37

…22 icon column width instead of 8 to account for the changes made in the PR, update Content margin to account for changed icon column width.

Merge in Main

712bdc6

StephenLPeters marked this pull request as ready for review August 26, 2021 21:38

StephenLPeters requested review from karkarl and ojhad August 27, 2021 00:31

karkarl reviewed Aug 27, 2021

View reviewed changes

Move offset to the chevron instead of the icon column and only apply …

75f8ac8

…the margin during the expanded state

Fix extra wide right margin on NVI content.

0532fbc

revert name changes, update verification files.

df13e2e

ojhad reviewed Aug 27, 2021

View reviewed changes

karkarl reviewed Aug 27, 2021

View reviewed changes

remove unimplemented function definition.

9c16c5f

karkarl approved these changes Aug 27, 2021

View reviewed changes

StephenLPeters merged commit fd22d7f into main Aug 27, 2021

StephenLPeters deleted the user/stpete/NVIInfoBadgeSupport branch August 27, 2021 19:46

ranjeshj added area-InfoBadge area-NavigationView NavView control team-Controls Issue for the Controls team and removed needs-triage Issue needs to be triaged by the area owners labels Sep 14, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NavigationView InfoBadge integration #5769

NavigationView InfoBadge integration #5769

StephenLPeters commented Aug 25, 2021 •

edited

Loading

StephenLPeters commented Aug 26, 2021

azure-pipelines bot commented Aug 26, 2021

StephenLPeters commented Aug 26, 2021

azure-pipelines bot commented Aug 26, 2021

StephenLPeters commented Aug 26, 2021

azure-pipelines bot commented Aug 26, 2021

StephenLPeters commented Aug 27, 2021

azure-pipelines bot commented Aug 27, 2021

karkarl Aug 27, 2021

karkarl Aug 27, 2021

karkarl Aug 27, 2021

StephenLPeters Aug 27, 2021

karkarl Aug 27, 2021

StephenLPeters Aug 27, 2021

karkarl Aug 27, 2021

StephenLPeters Aug 27, 2021

StephenLPeters commented Aug 27, 2021

azure-pipelines bot commented Aug 27, 2021

StephenLPeters commented Aug 27, 2021

azure-pipelines bot commented Aug 27, 2021

StephenLPeters commented Aug 27, 2021

azure-pipelines bot commented Aug 27, 2021

ojhad Aug 27, 2021

karkarl Aug 27, 2021

karkarl Aug 27, 2021

StephenLPeters commented Aug 27, 2021

azure-pipelines bot commented Aug 27, 2021

		@@ -33,6 +33,8 @@ class NavigationViewItemPresenter:

		void UpdateClosedCompactVisualState(bool isTopLevelItem, bool isClosedCompact);

		void UnparentInfoBadge();

NavigationView InfoBadge integration #5769

NavigationView InfoBadge integration #5769

Conversation

StephenLPeters commented Aug 25, 2021 • edited Loading

StephenLPeters commented Aug 26, 2021

azure-pipelines bot commented Aug 26, 2021

StephenLPeters commented Aug 26, 2021

azure-pipelines bot commented Aug 26, 2021

StephenLPeters commented Aug 26, 2021

azure-pipelines bot commented Aug 26, 2021

StephenLPeters commented Aug 27, 2021

azure-pipelines bot commented Aug 27, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

StephenLPeters commented Aug 27, 2021

azure-pipelines bot commented Aug 27, 2021

StephenLPeters commented Aug 27, 2021

azure-pipelines bot commented Aug 27, 2021

StephenLPeters commented Aug 27, 2021

azure-pipelines bot commented Aug 27, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

StephenLPeters commented Aug 27, 2021

azure-pipelines bot commented Aug 27, 2021

StephenLPeters commented Aug 25, 2021 •

edited

Loading