Skip to content

Commit 1c38004

Browse files
yaira2yaira2
authored
Feature: Improved animations on the home page (#10927)
1 parent 12e0cb9 commit 1c38004

File tree

2 files changed

+196
-56
lines changed

2 files changed

+196
-56
lines changed

‎src/Files.App/UserControls/Widgets/WidgetsListControl.xaml

Lines changed: 168 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,154 @@
1010
d:DesignHeight="300"
1111
d:DesignWidth="400"
1212
mc:Ignorable="d">
13+
<UserControl.Resources>
14+
<!-- Custom widget style that disables the animations -->
15+
<Style x:Key="Local.WidgetExpanderStyle" TargetType="controls:Expander">
16+
<Setter Property="IsTabStop" Value="False" />
17+
<Setter Property="Background" Value="{ThemeResource ExpanderContentBackground}" />
18+
<Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
19+
<Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
20+
<Setter Property="MinHeight" Value="{StaticResource ExpanderMinHeight}" />
21+
<Setter Property="BorderThickness" Value="{ThemeResource ExpanderContentDownBorderThickness}" />
22+
<Setter Property="BorderBrush" Value="{ThemeResource ExpanderContentBorderBrush}" />
23+
<Setter Property="Padding" Value="{StaticResource ExpanderContentPadding}" />
24+
<Setter Property="HorizontalAlignment" Value="Left" />
25+
<Setter Property="VerticalAlignment" Value="Center" />
26+
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
27+
<Setter Property="Template">
28+
<Setter.Value>
29+
<ControlTemplate TargetType="controls:Expander">
30+
<Grid MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}">
31+
<Grid.RowDefinitions>
32+
<RowDefinition x:Name="Row0" Height="Auto" />
33+
<RowDefinition x:Name="Row1" Height="*" />
34+
</Grid.RowDefinitions>
35+
<ToggleButton
36+
x:Name="ExpanderHeader"
37+
MinHeight="{TemplateBinding MinHeight}"
38+
Padding="{StaticResource ExpanderHeaderPadding}"
39+
HorizontalAlignment="Stretch"
40+
HorizontalContentAlignment="{StaticResource ExpanderHeaderHorizontalContentAlignment}"
41+
VerticalContentAlignment="{StaticResource ExpanderHeaderVerticalContentAlignment}"
42+
AutomationProperties.AutomationId="ExpanderToggleButton"
43+
Background="{ThemeResource ExpanderHeaderBackground}"
44+
BackgroundSizing="{TemplateBinding BackgroundSizing}"
45+
BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
46+
BorderThickness="{ThemeResource ExpanderHeaderBorderThickness}"
47+
Content="{TemplateBinding Header}"
48+
ContentTemplate="{TemplateBinding HeaderTemplate}"
49+
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
50+
CornerRadius="{TemplateBinding CornerRadius}"
51+
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
52+
IsEnabled="{TemplateBinding IsEnabled}"
53+
Style="{StaticResource ExpanderHeaderDownStyle}" />
54+
<!-- The clip is a composition clip applied in code -->
55+
<Border x:Name="ExpanderContentClip" Grid.Row="1">
56+
<Border
57+
x:Name="ExpanderContent"
58+
MinHeight="{TemplateBinding MinHeight}"
59+
Padding="{TemplateBinding Padding}"
60+
HorizontalAlignment="Stretch"
61+
VerticalAlignment="Stretch"
62+
Background="{TemplateBinding Background}"
63+
BackgroundSizing="{TemplateBinding BackgroundSizing}"
64+
BorderBrush="{TemplateBinding BorderBrush}"
65+
BorderThickness="{StaticResource ExpanderContentDownBorderThickness}"
66+
CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomCornerRadiusFilterConverter}}"
67+
Visibility="Collapsed">
68+
<ContentPresenter
69+
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
70+
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
71+
Content="{TemplateBinding Content}"
72+
ContentTemplate="{TemplateBinding ContentTemplate}"
73+
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
74+
<Border.RenderTransform>
75+
<CompositeTransform />
76+
</Border.RenderTransform>
77+
</Border>
78+
</Border>
79+
<VisualStateManager.VisualStateGroups>
80+
<VisualStateGroup x:Name="ExpandStates">
81+
<VisualState x:Name="ExpandUp">
82+
<VisualState.Setters>
83+
<Setter Target="ExpanderHeader.CornerRadius" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
84+
</VisualState.Setters>
85+
<VisualState.Storyboard>
86+
<Storyboard>
87+
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
88+
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
89+
</ObjectAnimationUsingKeyFrames>
90+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
91+
<DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
92+
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
93+
</DoubleAnimationUsingKeyFrames>
94+
</Storyboard>
95+
</VisualState.Storyboard>
96+
</VisualState>
97+
<VisualState x:Name="CollapseDown">
98+
<VisualState.Storyboard>
99+
<Storyboard>
100+
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
101+
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
102+
</ObjectAnimationUsingKeyFrames>
103+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
104+
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
105+
<SplineDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
106+
</DoubleAnimationUsingKeyFrames>
107+
</Storyboard>
108+
</VisualState.Storyboard>
109+
</VisualState>
110+
<VisualState x:Name="ExpandDown">
111+
<VisualState.Setters>
112+
<Setter Target="ExpanderHeader.CornerRadius" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
113+
</VisualState.Setters>
114+
<VisualState.Storyboard>
115+
<Storyboard>
116+
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
117+
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
118+
</ObjectAnimationUsingKeyFrames>
119+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
120+
<DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeContentHeight}" />
121+
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
122+
</DoubleAnimationUsingKeyFrames>
123+
</Storyboard>
124+
</VisualState.Storyboard>
125+
</VisualState>
126+
<VisualState x:Name="CollapseUp">
127+
<VisualState.Storyboard>
128+
<Storyboard>
129+
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
130+
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
131+
</ObjectAnimationUsingKeyFrames>
132+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
133+
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
134+
<SplineDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeContentHeight}" />
135+
</DoubleAnimationUsingKeyFrames>
136+
</Storyboard>
137+
</VisualState.Storyboard>
138+
</VisualState>
139+
</VisualStateGroup>
140+
<VisualStateGroup x:Name="ExpandDirectionStates">
141+
<VisualState x:Name="Down" />
142+
<VisualState x:Name="Up">
143+
<VisualState.Setters>
144+
<Setter Target="ExpanderHeader.Style" Value="{StaticResource ExpanderHeaderUpStyle}" />
145+
<Setter Target="ExpanderContent.BorderThickness" Value="{StaticResource ExpanderContentUpBorderThickness}" />
146+
<Setter Target="ExpanderContent.CornerRadius" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
147+
<Setter Target="ExpanderHeader.(Grid.Row)" Value="1" />
148+
<Setter Target="ExpanderContentClip.(Grid.Row)" Value="0" />
149+
<Setter Target="Row0.Height" Value="*" />
150+
<Setter Target="Row1.Height" Value="Auto" />
151+
</VisualState.Setters>
152+
</VisualState>
153+
</VisualStateGroup>
154+
</VisualStateManager.VisualStateGroups>
155+
</Grid>
156+
</ControlTemplate>
157+
</Setter.Value>
158+
</Setter>
159+
</Style>
160+
</UserControl.Resources>
13161

14162
<Border>
15163
<Grid>
@@ -26,40 +174,35 @@
26174
<ListViewItemPresenter
27175
x:Name="Root"
28176
HorizontalContentAlignment="Stretch"
29-
VerticalContentAlignment="Stretch"
30-
RevealBackground="{ThemeResource GridViewItemRevealBackground}"
31-
RevealBorderBrush="{ThemeResource GridViewItemRevealBorderBrush}"
32-
RevealBorderThickness="0" />
177+
VerticalContentAlignment="Stretch" />
33178
</ControlTemplate>
34179
</Setter.Value>
35180
</Setter>
36181
</Style>
37182
</ListView.ItemContainerStyle>
38183
<ListView.ItemTemplate>
39184
<DataTemplate x:DataType="vm:WidgetsListControlItemViewModel">
40-
<Grid AutomationProperties.Name="{x:Bind WidgetAutomationProperties, Mode=OneWay}">
41-
<controls:Expander
42-
Padding="16,0,16,0"
185+
<controls:Expander
186+
Padding="16,0,16,0"
187+
HorizontalAlignment="Stretch"
188+
HorizontalContentAlignment="Stretch"
189+
AutomationProperties.Name="{x:Bind WidgetAutomationProperties, Mode=OneWay}"
190+
Header="{x:Bind WidgetItemModel.WidgetHeader, Mode=OneWay}"
191+
IsExpanded="{x:Bind IsExpanded, Mode=TwoWay}"
192+
Style="{StaticResource Local.WidgetExpanderStyle}">
193+
<controls:Expander.Resources>
194+
<SolidColorBrush x:Key="ExpanderHeaderBackground" Color="Transparent" />
195+
<SolidColorBrush x:Key="ExpanderHeaderBorderBrush" Color="Transparent" />
196+
<SolidColorBrush x:Key="ExpanderHeaderBorderPointerOverBrush" Color="Transparent" />
197+
<SolidColorBrush x:Key="ExpanderHeaderBorderPressedBrush" Color="Transparent" />
198+
<SolidColorBrush x:Key="ExpanderContentBackground" Color="Transparent" />
199+
<SolidColorBrush x:Key="ExpanderContentBorderBrush" Color="Transparent" />
200+
</controls:Expander.Resources>
201+
<ContentControl
43202
HorizontalAlignment="Stretch"
44203
HorizontalContentAlignment="Stretch"
45-
Header="{x:Bind WidgetItemModel.WidgetHeader, Mode=OneWay}"
46-
IsExpanded="{x:Bind IsExpanded, Mode=TwoWay}">
47-
<controls:Expander.Resources>
48-
<SolidColorBrush x:Key="ExpanderHeaderBackground" Color="Transparent" />
49-
<SolidColorBrush x:Key="ExpanderHeaderBorderBrush" Color="Transparent" />
50-
<SolidColorBrush x:Key="ExpanderHeaderBorderPointerOverBrush" Color="Transparent" />
51-
<SolidColorBrush x:Key="ExpanderHeaderBorderPressedBrush" Color="Transparent" />
52-
<SolidColorBrush x:Key="ExpanderContentBackground" Color="Transparent" />
53-
<SolidColorBrush x:Key="ExpanderContentBorderBrush" Color="Transparent" />
54-
<x:Double x:Key="ExpanderMinHeight">0</x:Double>
55-
<Thickness x:Key="ExpanderContentPadding">0</Thickness>
56-
</controls:Expander.Resources>
57-
<ContentControl
58-
HorizontalAlignment="Stretch"
59-
HorizontalContentAlignment="Stretch"
60-
Content="{x:Bind WidgetControl, Mode=OneWay}" />
61-
</controls:Expander>
62-
</Grid>
204+
Content="{x:Bind WidgetControl, Mode=OneWay}" />
205+
</controls:Expander>
63206
</DataTemplate>
64207
</ListView.ItemTemplate>
65208
</ListView>

‎src/Files.App/Views/ModernShellPage.xaml.cs

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -157,10 +157,10 @@ public ModernShellPage()
157157
DisplayFilesystemConsentDialog();
158158

159159
/*TODO ResourceContext.GetForCurrentView and ResourceContext.GetForViewIndependentUse do not exist in Windows App SDK
160-
Use your ResourceManager instance to create a ResourceContext as below.If you already have a ResourceManager instance,
161-
replace the new instance created below with correct instance.
162-
Read: https://docs.microsoft.com/en-us/windows/apps/windows-app-sdk/migrate-to-windows-app-sdk/guides/mrtcore
163-
*/
160+
Use your ResourceManager instance to create a ResourceContext as below.If you already have a ResourceManager instance,
161+
replace the new instance created below with correct instance.
162+
Read: https://docs.microsoft.com/en-us/windows/apps/windows-app-sdk/migrate-to-windows-app-sdk/guides/mrtcore
163+
*/
164164
var flowDirectionSetting = new Microsoft.Windows.ApplicationModel.Resources.ResourceManager().CreateResourceContext().QualifierValues["LayoutDirection"];
165165

166166
if (flowDirectionSetting == "RTL")
@@ -190,11 +190,11 @@ public ModernShellPage()
190190
this.PointerPressed += CoreWindow_PointerPressed;
191191

192192
/*
193-
TODO UA307 Default back button in the title bar does not exist in WinUI3 apps.
194-
The tool has generated a custom back button in the MainWindow.xaml.cs file.
195-
Feel free to edit its position, behavior and use the custom back button instead.
196-
Read: https://docs.microsoft.com/en-us/windows/apps/windows-app-sdk/migrate-to-windows-app-sdk/case-study-1#restoring-back-button-functionality
197-
*/
193+
TODO UA307 Default back button in the title bar does not exist in WinUI3 apps.
194+
The tool has generated a custom back button in the MainWindow.xaml.cs file.
195+
Feel free to edit its position, behavior and use the custom back button instead.
196+
Read: https://docs.microsoft.com/en-us/windows/apps/windows-app-sdk/migrate-to-windows-app-sdk/case-study-1#restoring-back-button-functionality
197+
*/
198198
//SystemNavigationManager.GetForCurrentView().BackRequested += ModernShellPage_BackRequested;
199199

200200
App.DrivesManager.PropertyChanged += DrivesManager_PropertyChanged;
@@ -203,9 +203,9 @@ The tool has generated a custom back button in the MainWindow.xaml.cs file.
203203
}
204204

205205
/**
206-
* Some keys are overriden by control built-in defaults (e.g. 'Space').
207-
* They must be handled here since they're not propagated to KeyboardAccelerator.
208-
*/
206+
* Some keys are overriden by control built-in defaults (e.g. 'Space').
207+
* They must be handled here since they're not propagated to KeyboardAccelerator.
208+
*/
209209
private async void ModernShellPage_PreviewKeyDown(object sender, KeyRoutedEventArgs args)
210210
{
211211
var ctrl = Microsoft.UI.Input.InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.Control).HasFlag(CoreVirtualKeyStates.Down);
@@ -290,10 +290,10 @@ private void FolderSettings_LayoutPreferencesUpdateRequired(object sender, Layou
290290
}
291291

292292
/*
293-
* Ensure that the path bar gets updated for user interaction
294-
* whenever the path changes. We will get the individual directories from
295-
* the updated, most-current path and add them to the UI.
296-
*/
293+
* Ensure that the path bar gets updated for user interaction
294+
* whenever the path changes. We will get the individual directories from
295+
* the updated, most-current path and add them to the UI.
296+
*/
297297
public void UpdatePathUIToWorkingDirectory(string newWorkingDir, string singleItemOverride = null)
298298
{
299299
if (string.IsNullOrWhiteSpace(singleItemOverride))
@@ -526,7 +526,7 @@ private void OnNavigationParamsChanged()
526526
{
527527
NavPathParam = NavParams?.NavPath,
528528
AssociatedTabInstance = this
529-
}, new EntranceNavigationTransitionInfo());
529+
}, new SuppressNavigationTransitionInfo());
530530
}
531531
else
532532
{
@@ -893,12 +893,11 @@ public void Up_Click()
893893
if (isPathRooted)
894894
{
895895
ItemDisplayFrame.Navigate(typeof(WidgetsPage),
896-
new NavigationArguments()
897-
{
898-
NavPathParam = "Home".GetLocalizedResource(),
899-
AssociatedTabInstance = this
900-
},
901-
new SuppressNavigationTransitionInfo());
896+
new NavigationArguments()
897+
{
898+
NavPathParam = "Home".GetLocalizedResource(),
899+
AssociatedTabInstance = this
900+
}, new SuppressNavigationTransitionInfo());
902901
}
903902
else
904903
{
@@ -914,12 +913,11 @@ public void Up_Click()
914913

915914
SelectSidebarItemFromPath();
916915
ItemDisplayFrame.Navigate(InstanceViewModel.FolderSettings.GetLayoutType(parentDirectoryOfPath),
917-
new NavigationArguments()
918-
{
919-
NavPathParam = parentDirectoryOfPath,
920-
AssociatedTabInstance = this
921-
},
922-
new SuppressNavigationTransitionInfo());
916+
new NavigationArguments()
917+
{
918+
NavPathParam = parentDirectoryOfPath,
919+
AssociatedTabInstance = this
920+
}, new SuppressNavigationTransitionInfo());
923921
}
924922
}
925923

@@ -1044,8 +1042,7 @@ public void NavigateHome()
10441042
{
10451043
NavPathParam = "Home".GetLocalizedResource(),
10461044
AssociatedTabInstance = this
1047-
},
1048-
new EntranceNavigationTransitionInfo());
1045+
}, new SuppressNavigationTransitionInfo());
10491046
}
10501047

10511048
public void NavigateWithArguments(Type sourcePageType, NavigationArguments navArgs)

0 commit comments

Comments
 (0)