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 all 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.

29 changes: 13 additions & 16 deletions dev/NavigationView/NavigationView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,10 +94,7 @@ static constexpr float c_paneElevationTranslationZ = 32;
static constexpr int c_mainMenuBlockIndex = 0;
static constexpr int c_footerMenuBlockIndex = 1;

// Shadows specific items
static constexpr auto c_shadowCaster = L"ShadowCaster"sv;
static constexpr auto c_shadowCasterEaseInStoryboard = L"ShadowCasterEaseInStoryboard"sv;
static constexpr auto c_shadowCasterSmallPaneEaseInStoryboard = L"ShadowCasterSmallPaneEaseInStoryboard"sv;
static constexpr auto c_shadowCasterEaseOutStoryboard = L"ShadowCasterEaseOutStoryboard"sv;

constexpr int s_itemNotFound{ -1 };
Expand Down Expand Up @@ -686,8 +683,6 @@ void NavigationView::OnApplyTemplate()
if (SharedHelpers::Is21H1OrHigher())
{
m_shadowCaster.set(GetTemplateChildT<winrt::Grid>(c_shadowCaster, controlProtected));
m_shadowCasterEaseInStoryboard.set(GetTemplateChildT<winrt::Storyboard>(c_shadowCasterEaseInStoryboard, controlProtected));
ranjeshj marked this conversation as resolved.
Show resolved Hide resolved
m_shadowCasterSmallPaneEaseInStoryboard.set(GetTemplateChildT<winrt::Storyboard>(c_shadowCasterSmallPaneEaseInStoryboard, controlProtected));
m_shadowCasterEaseOutStoryboard.set(GetTemplateChildT<winrt::Storyboard>(c_shadowCasterEaseOutStoryboard, controlProtected));
}
else
Expand Down Expand Up @@ -1698,6 +1693,8 @@ void NavigationView::OnSplitViewPaneClosing(const winrt::DependencyObject& /*sen
winrt::VisualStateManager::GoToState(*this, L"ListSizeCompact", true /*useTransitions*/);
UpdatePaneToggleSize();
}

winrt::VisualStateManager::GoToState(*this, L"PaneNotOverlaying", true /*useTransitions*/);
}
}
}
Expand All @@ -1714,6 +1711,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"PaneOverlaying", true /*useTransitions*/);
}
}
}

m_paneOpeningEventSource(*this, nullptr);
Expand Down Expand Up @@ -4745,14 +4750,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 @@ -4771,9 +4768,9 @@ void NavigationView::UnsetDropShadow()

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

Expand Down
2 changes: 0 additions & 2 deletions dev/NavigationView/NavigationView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,8 +360,6 @@ class NavigationView :
tracker_ref<winrt::Grid> m_topNavGrid{ this };
tracker_ref<winrt::Border> m_topNavContentOverlayAreaGrid{ this };
tracker_ref<winrt::Grid> m_shadowCaster{ this };
tracker_ref<winrt::Storyboard> m_shadowCasterEaseInStoryboard{ this };
tracker_ref<winrt::Storyboard> m_shadowCasterSmallPaneEaseInStoryboard{ this };
tracker_ref<winrt::Storyboard> m_shadowCasterEaseOutStoryboard{ this };

// Indicator animations
Expand Down
84 changes: 51 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="PaneNotOverlaying" To="PaneOverlaying">
<Storyboard>
<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="PaneOverlaying" To="PaneNotOverlaying">
<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="PaneOverlaying" />
Copy link
Contributor

Choose a reason for hiding this comment

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

Please do a testing that if the default NavigationVIew is set to minimal or compact in Xaml, will PaneNotOverlaying
code still called?
Because your default state is PaneOverlaying, and I want to make sure PaneNotOverlaying working in some default settings.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes it does. I confirmed it with different test pages where minimal and compact is the default.

<VisualState x:Name="PaneNotOverlaying">
<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,6 @@
x:Name="ShadowCaster"
Grid.RowSpan="2"
Width="{TemplateBinding OpenPaneLength}"
Opacity="0"
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
Loading