Skip to content
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.

Sign up for GitHub

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

Add New NavView VisualStateGroup #4659

Merged
merged 15 commits into from
Apr 5, 2021
Merged

Add New NavView VisualStateGroup #4659

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
08c2102
add OverlayStateGroup and logic
karkarl Mar 23, 2021
21a0f51
lift SplitView and add cornerradius
karkarl Mar 26, 2021
cadf4ad
update border to have cornerRadius on overlay
karkarl Mar 26, 2021
63ad9c9
move shadow storyboards into new visualStateGroup
karkarl Mar 26, 2021
6fe13fd
update verification files
karkarl Mar 29, 2021
6a0f74c
fix failing tests
karkarl Mar 31, 2021
866a673
changes from comments
karkarl Mar 31, 2021
b83cbc2
changes from comments
karkarl Mar 31, 2021
47f4a3a
fix formatting
karkarl Mar 31, 2021
3e2d182
fix failing tests
karkarl Apr 1, 2021
be083c5
remove shadowCaster storyboard references
karkarl Apr 2, 2021
e2d0871
add back eventlistener for easeOutStoryboard
karkarl Apr 2, 2021
f1cc6b8
remove unused tracker_ref
karkarl Apr 2, 2021
118ef29
cover all display modes with PaneOverlayGroup
karkarl Apr 5, 2021
62369f0
update visualState names
karkarl Apr 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions dev/CommonStyles/CommonStyles.vcxitems
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,11 @@
<Version>RS1</Version>
<Type>ThemeResources</Type>
</Page>
<Page Include="$(MSBuildThisFileDirectory)SplitView_themeresources.xaml">
<ControlsResourcesVersion>Version2</ControlsResourcesVersion>
<Version>RS1</Version>
<Type>ThemeResources</Type>
</Page>
<Page Include="$(MSBuildThisFileDirectory)ToggleSwitch_themeresources.xaml">
<ControlsResourcesVersion>Version2</ControlsResourcesVersion>
<Version>RS1</Version>
Expand Down
704 changes: 704 additions & 0 deletions dev/CommonStyles/SplitView_themeresources.xaml
View file
Open in desktop

Large diffs are not rendered by default.

46 changes: 19 additions & 27 deletions dev/NavigationView/NavigationView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1698,6 +1698,11 @@ void NavigationView::OnSplitViewPaneClosing(const winrt::DependencyObject& /*sen
winrt::VisualStateManager::GoToState(*this, L"ListSizeCompact", true /*useTransitions*/);
UpdatePaneToggleSize();
}

if (splitView.DisplayMode() == winrt::SplitViewDisplayMode::CompactOverlay || splitView.DisplayMode() == winrt::SplitViewDisplayMode::Overlay)
{
winrt::VisualStateManager::GoToState(*this, L"PaneNotOverlay", true /*useTransitions*/);
}
Copy link
Contributor

Choose a reason for hiding this comment

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

It's very comfusion here.
From your code, Likely PaneNotOverlay and PaneOverlay only happens when DisplayMode is CompactOverlay or Overlay.
So we should have 3 visual states other than 2:

  1. DisplayMode is not CompactOverlay or Overlay
  2. DisplayMode is ?Overlay, and Pane is closed
  3. DisplayMode is ?Overlay, and Pane is opened

Don't use PaneNotOverlay/Overlay, it's easy to mess up with the term: CompactOverlay or Overlay in splitview setting.

It's better to have the LeftNav in the name, for example: Pane???OnLeftNavigationView

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added you to the email thread discussing the naming

}
}
}
Expand All @@ -1714,6 +1719,14 @@ void NavigationView::OnSplitViewPaneOpening(const winrt::DependencyObject& /*sen
{
// See UpdateIsClosedCompact 'RS3+ animation timing enhancement' for explanation:
winrt::VisualStateManager::GoToState(*this, L"ListSizeFull", true /*useTransitions*/);

if (const auto splitView = m_rootSplitView.get())
{
if (splitView.DisplayMode() == winrt::SplitViewDisplayMode::CompactOverlay || splitView.DisplayMode() == winrt::SplitViewDisplayMode::Overlay)
{
winrt::VisualStateManager::GoToState(*this, L"PaneOverlay", true /*useTransitions*/);
}
}
}

m_paneOpeningEventSource(*this, nullptr);
Expand Down Expand Up @@ -4745,14 +4758,6 @@ void NavigationView::SetDropShadow()
{
if (const auto shadowCaster = m_shadowCaster.get())
{
const auto rootSplitView = m_rootSplitView.get();
const auto rootSplitViewActualWidth = rootSplitView.ActualWidth();

if (const auto shadowCasterEaseInStoryboard = m_shadowCasterEaseInStoryboard.get())
{
shadowCasterEaseInStoryboard.Begin();
}

if (winrt::IUIElement10 shadowCaster_uiElement10 = shadowCaster)
{
shadowCaster_uiElement10.Shadow(winrt::ThemeShadow{});
Expand All @@ -4763,27 +4768,14 @@ void NavigationView::SetDropShadow()

void NavigationView::UnsetDropShadow()
{
const auto shadowCaster = m_shadowCaster.get();

if (const auto shadowCasterEaseOutStoryboard = m_shadowCasterEaseOutStoryboard.get())
{
shadowCasterEaseOutStoryboard.Begin();

m_shadowCasterEaseOutStoryboardRevoker =
shadowCasterEaseOutStoryboard.Completed(winrt::auto_revoke,
{
[this, shadowCaster](auto const&, auto const&) { ShadowCasterEaseOutStoryboard_Completed(shadowCaster); }
});
}
}

void NavigationView::ShadowCasterEaseOutStoryboard_Completed(const winrt::Grid& shadowCaster)
{
if (winrt::IUIElement10 shadowCaster_uiElement10 = shadowCaster)
if (const auto shadowCaster = m_shadowCaster.get())
{
if (shadowCaster_uiElement10.Shadow())
if (winrt::IUIElement10 shadowCaster_uiElement10 = shadowCaster)
{
shadowCaster_uiElement10.Shadow(nullptr);
if (shadowCaster_uiElement10.Shadow())
{
shadowCaster_uiElement10.Shadow(nullptr);
}
}
}
}
Expand Down
1 change: 0 additions & 1 deletion dev/NavigationView/NavigationView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,6 @@ class NavigationView :

void SetDropShadow();
void UnsetDropShadow();
void ShadowCasterEaseOutStoryboard_Completed(const winrt::Grid& shadowCaster);

com_ptr<NavigationViewItemsFactory> m_navigationViewItemsFactory{ nullptr };

Expand Down
85 changes: 52 additions & 33 deletions dev/NavigationView/NavigationView.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,36 +18,9 @@
<Setter.Value>
<ControlTemplate TargetType="local:NavigationView">
<Grid x:Name="RootGrid">
<Grid.Resources>
<Storyboard x:Name="ShadowCasterEaseInStoryboard">
ranjeshj marked this conversation as resolved.
Show resolved Hide resolved
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ShadowCasterTransform" Storyboard.TargetProperty="TranslateX">
<DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding ElementName=RootSplitView, Path=TemplateSettings.NegativeOpenPaneLengthMinusCompactLength}" />
<SplineDoubleKeyFrame KeyTime="0:0:0.35" KeySpline="0.1,0.9 0.2,1.0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ShadowCaster" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="0:0:0.35" Value="1" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ShadowCaster" Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="ShadowCasterEaseOutStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ShadowCasterTransform" Storyboard.TargetProperty="TranslateX">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.12" KeySpline="0.1,0.9 0.2,1.0" Value="{Binding ElementName=RootSplitView, Path=TemplateSettings.NegativeOpenPaneLengthMinusCompactLength}" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ShadowCaster" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="0:0:0.12" Value="0" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ShadowCaster" Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DisplayModeGroup">
<VisualState x:Name="Compact" />
<VisualState x:Name="Compact"/>

<VisualState x:Name="Expanded">
<VisualState.Setters>
Expand Down Expand Up @@ -118,6 +91,49 @@
</VisualState>
</VisualStateGroup>

<VisualStateGroup x:Name="PaneOverlayGroup">
<VisualStateGroup.Transitions>
<VisualTransition From="PaneNotOverlay" To="PaneOverlay">
<Storyboard x:Name="ShadowCasterEaseInStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ShadowCasterTransform" Storyboard.TargetProperty="TranslateX">
<DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding ElementName=RootSplitView, Path=TemplateSettings.NegativeOpenPaneLengthMinusCompactLength}" />
<SplineDoubleKeyFrame KeyTime="0:0:0.35" KeySpline="0.1,0.9 0.2,1.0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ShadowCaster" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="0:0:0.35" Value="1" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ShadowCaster" Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="PaneOverlay" To="PaneNotOverlay">
<Storyboard x:Name="ShadowCasterEaseOutStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ShadowCasterTransform" Storyboard.TargetProperty="TranslateX">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.12" KeySpline="0.1,0.9 0.2,1.0" Value="{Binding ElementName=RootSplitView, Path=TemplateSettings.NegativeOpenPaneLengthMinusCompactLength}" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ShadowCaster" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="0:0:0.12" Value="0" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ShadowCaster" Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="PaneOverlay" />
<VisualState x:Name="PaneNotOverlay">
<VisualState.Setters>
<Setter Target="RootSplitView.CornerRadius" Value="0" />
<Setter Target="RootSplitView.BorderThickness" Value="0" />
<Setter Target="PaneContentGrid.BorderThickness" Value="0,0,1,0" />
<Setter Target="ShadowCaster.Opacity" Value="0" />
<Setter Target="RootSplitView.PaneBackground" Value="{ThemeResource NavigationViewExpandedPaneBackground}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>

<VisualStateGroup x:Name="TitleBarVisibilityGroup">
<VisualState x:Name="TitleBarVisible" />
<VisualState x:Name="TitleBarCollapsed">
Expand Down Expand Up @@ -417,21 +433,24 @@
<SplitView
x:Name="RootSplitView"
Background="{TemplateBinding Background}"
BorderBrush="{ThemeResource NavigationViewItemSeparatorForeground}"
BorderThickness="0"
CompactPaneLength="{TemplateBinding CompactPaneLength}"
DisplayMode="Inline"
IsPaneOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsPaneOpen, Mode=TwoWay}"
IsTabStop="False"
OpenPaneLength="{TemplateBinding OpenPaneLength}"
PaneBackground="{ThemeResource NavigationViewDefaultPaneBackground}"
Grid.Row="1">
Grid.Row="1"
contract7Present:CornerRadius="{ThemeResource OverlayCornerRadius}">

<SplitView.Pane>
<Grid
x:Name="PaneContentGrid"
HorizontalAlignment="Left"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.LeftPaneVisibility}"
BorderBrush="{ThemeResource NavigationViewItemSeparatorForeground}"
BorderThickness="0,0,1,0">
BorderThickness="0,0,1,0"
HorizontalAlignment="Left"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.LeftPaneVisibility}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="0"/> <!-- above button margin + back button space -->
Expand Down Expand Up @@ -595,7 +614,7 @@
x:Name="ShadowCaster"
Grid.RowSpan="2"
Width="{TemplateBinding OpenPaneLength}"
Opacity="0"
Opacity="1"
ranjeshj marked this conversation as resolved.
Show resolved Hide resolved
HorizontalAlignment="Left">
<Grid.RenderTransform>
<CompositeTransform x:Name="ShadowCasterTransform" />
Expand Down
2 changes: 1 addition & 1 deletion dev/NavigationView/NavigationView_InteractionTests/PaneBehaviorTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -916,7 +916,7 @@ public void EnsureDynamicSizeForPaneHeaderFooterAndCustomContent()
// NavigationViewCompactPaneLength is 40 or 48 in different release. This test case doesn't need an exactly number of width, so just choose 48 as the boundary
// PaneHeader share the same row with ToggleButton, so it's width is not the same with other buttons
var widthCompactBoundary = 48;
var widthOpenPaneLength = 319; // 320 - 1px for the right border
var widthOpenPaneLength = 319; // 320 - 1px for the right border

Button paneHeaderButton = new Button(FindElement.ById("PaneHeader"));
Log.Comment("PaneHeader size actual width is " + paneHeaderButton.BoundingRectangle.Width);
Expand Down
3 changes: 2 additions & 1 deletion dev/NavigationView/TestUI/Common/NavigationViewPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,7 +325,8 @@ Nullam egestas, orci sed molestie aliquet, diam ex euismod risus, ac dapibus qua
<Button x:Name="PaneFooterButton" AutomationProperties.Name="PaneFooterButton" Content="PaneFooter Button" Margin="8"/>
<muxcontrols:NavigationViewItem x:Name="PaneFooterNavigationViewItem"
AutomationProperties.Name="PaneFooterNavigationViewItem"
Content="NVI" />
Content="NVI"
Icon="Accept"/>
</StackPanel>
</muxcontrols:NavigationView.PaneFooter>
</muxcontrols:NavigationView>
Expand Down
4 changes: 2 additions & 2 deletions test/MUXControlsTestApp/verification/NavigationViewAuto-4.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -651,7 +651,7 @@
Padding=0,0,0,0
Foreground=#E4000000
BorderThickness=0,0,0,0
BorderBrush=[NULL]
BorderBrush=#0F000000
Background=[NULL]
Name=RootSplitView
Margin=0,0,0,0
Expand All @@ -678,7 +678,7 @@
Padding=0,0,0,0
CornerRadius=0,0,0,0
BorderThickness=0,0,0,0
BorderBrush=[NULL]
BorderBrush=#0F000000
Background=#00FFFFFF
Width=120
Name=PaneRoot
Expand Down
4 changes: 2 additions & 2 deletions test/MUXControlsTestApp/verification/NavigationViewAuto-5.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -651,7 +651,7 @@
Padding=0,0,0,0
Foreground=#E4000000
BorderThickness=0,0,0,0
BorderBrush=[NULL]
BorderBrush=#0F000000
Background=[NULL]
Name=RootSplitView
Margin=0,0,0,0
Expand All @@ -678,7 +678,7 @@
Padding=0,0,0,0
CornerRadius=0,0,0,0
BorderThickness=0,0,0,0
BorderBrush=[NULL]
BorderBrush=#0F000000
Background=#00FFFFFF
Width=120
Name=PaneRoot
Expand Down
4 changes: 2 additions & 2 deletions test/MUXControlsTestApp/verification/NavigationViewAuto-6.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -651,7 +651,7 @@
Padding=0,0,0,0
Foreground=#E4000000
BorderThickness=0,0,0,0
BorderBrush=[NULL]
BorderBrush=#0F000000
Background=[NULL]
Name=RootSplitView
Margin=0,0,0,0
Expand All @@ -678,7 +678,7 @@
Padding=0,0,0,0
CornerRadius=0,0,0,0
BorderThickness=0,0,0,0
BorderBrush=[NULL]
BorderBrush=#0F000000
Background=#00FFFFFF
Width=120
Name=PaneRoot
Expand Down
8 changes: 4 additions & 4 deletions test/MUXControlsTestApp/verification/NavigationViewAuto-7.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -567,9 +567,9 @@
Padding=0,0,0,0
Foreground=#E4000000
BorderThickness=0,0,0,0
BorderBrush=[NULL]
BorderBrush=#0F000000
Background=[NULL]
CornerRadius=0,0,0,0
CornerRadius=8,8,8,8
Name=RootSplitView
Margin=0,0,0,0
FocusVisualSecondaryThickness=1,1,1,1
Expand All @@ -593,9 +593,9 @@
RenderSize=800,600
[Windows.UI.Xaml.Controls.Grid]
Padding=0,0,0,0
CornerRadius=0,0,0,0
CornerRadius=8,8,8,8
BorderThickness=0,0,0,0
BorderBrush=[NULL]
BorderBrush=#0F000000
Background=#00FFFFFF
Width=120
Name=PaneRoot
Expand Down
8 changes: 4 additions & 4 deletions test/MUXControlsTestApp/verification/NavigationViewAuto-8.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -567,9 +567,9 @@
Padding=0,0,0,0
Foreground=#E4000000
BorderThickness=0,0,0,0
BorderBrush=[NULL]
BorderBrush=#0F000000
Background=[NULL]
CornerRadius=0,0,0,0
CornerRadius=8,8,8,8
Name=RootSplitView
Margin=0,0,0,0
FocusVisualSecondaryThickness=1,1,1,1
Expand All @@ -593,9 +593,9 @@
RenderSize=800,600
[Windows.UI.Xaml.Controls.Grid]
Padding=0,0,0,0
CornerRadius=0,0,0,0
CornerRadius=8,8,8,8
BorderThickness=0,0,0,0
BorderBrush=[NULL]
BorderBrush=#0F000000
Background=#00FFFFFF
Width=120
Name=PaneRoot
Expand Down
4 changes: 2 additions & 2 deletions test/MUXControlsTestApp/verification/NavigationViewLeftCompact-4.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -571,7 +571,7 @@
Padding=0,0,0,0
Foreground=#E4000000
BorderThickness=0,0,0,0
BorderBrush=[NULL]
BorderBrush=#0F000000
Background=[NULL]
Name=RootSplitView
Margin=0,0,0,0
Expand All @@ -598,7 +598,7 @@
Padding=0,0,0,0
CornerRadius=0,0,0,0
BorderThickness=0,0,0,0
BorderBrush=[NULL]
BorderBrush=#0F000000
Background=Microsoft.UI.Xaml.Media.AcrylicBrush
Width=120
Name=PaneRoot
Expand Down
6 changes: 3 additions & 3 deletions test/MUXControlsTestApp/verification/NavigationViewLeftCompact-5.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -571,7 +571,7 @@
Padding=0,0,0,0
Foreground=#E4000000
BorderThickness=0,0,0,0
BorderBrush=[NULL]
BorderBrush=#0F000000
Background=[NULL]
Name=RootSplitView
Margin=0,0,0,0
Expand All @@ -598,8 +598,8 @@
Padding=0,0,0,0
CornerRadius=0,0,0,0
BorderThickness=0,0,0,0
BorderBrush=[NULL]
Background=Microsoft.UI.Xaml.Media.AcrylicBrush
BorderBrush=#0F000000
Background=#00FFFFFF
Width=120
Name=PaneRoot
Margin=0,0,0,0
Expand Down
Loading