Skip to content

Feature: Improved animations on the home page #10927

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

Merged
merged 3 commits into from
Jan 5, 2023
Merged

Feature: Improved animations on the home page #10927

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
514a3df
Disabled home page animation
yaira2 Jan 5, 2023
ba0717b
Update WidgetsListControl.xaml
yaira2 Jan 5, 2023
6864289
Update WidgetsListControl.xaml
yaira2 Jan 5, 2023
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
193 changes: 168 additions & 25 deletions src/Files.App/UserControls/Widgets/WidgetsListControl.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,154 @@
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">
<UserControl.Resources>
<!-- Custom widget style that disables the animations -->
<Style x:Key="Local.WidgetExpanderStyle" TargetType="controls:Expander">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Background" Value="{ThemeResource ExpanderContentBackground}" />
<Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
<Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
<Setter Property="MinHeight" Value="{StaticResource ExpanderMinHeight}" />
<Setter Property="BorderThickness" Value="{ThemeResource ExpanderContentDownBorderThickness}" />
<Setter Property="BorderBrush" Value="{ThemeResource ExpanderContentBorderBrush}" />
<Setter Property="Padding" Value="{StaticResource ExpanderContentPadding}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:Expander">
<Grid MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}">
<Grid.RowDefinitions>
<RowDefinition x:Name="Row0" Height="Auto" />
<RowDefinition x:Name="Row1" Height="*" />
</Grid.RowDefinitions>
<ToggleButton
x:Name="ExpanderHeader"
MinHeight="{TemplateBinding MinHeight}"
Padding="{StaticResource ExpanderHeaderPadding}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="{StaticResource ExpanderHeaderHorizontalContentAlignment}"
VerticalContentAlignment="{StaticResource ExpanderHeaderVerticalContentAlignment}"
AutomationProperties.AutomationId="ExpanderToggleButton"
Background="{ThemeResource ExpanderHeaderBackground}"
BackgroundSizing="{TemplateBinding BackgroundSizing}"
BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
BorderThickness="{ThemeResource ExpanderHeaderBorderThickness}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
CornerRadius="{TemplateBinding CornerRadius}"
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
IsEnabled="{TemplateBinding IsEnabled}"
Style="{StaticResource ExpanderHeaderDownStyle}" />
<!-- The clip is a composition clip applied in code -->
<Border x:Name="ExpanderContentClip" Grid.Row="1">
<Border
x:Name="ExpanderContent"
MinHeight="{TemplateBinding MinHeight}"
Padding="{TemplateBinding Padding}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding Background}"
BackgroundSizing="{TemplateBinding BackgroundSizing}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{StaticResource ExpanderContentDownBorderThickness}"
CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomCornerRadiusFilterConverter}}"
Visibility="Collapsed">
<ContentPresenter
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
<Border.RenderTransform>
<CompositeTransform />
</Border.RenderTransform>
</Border>
</Border>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpandStates">
<VisualState x:Name="ExpandUp">
<VisualState.Setters>
<Setter Target="ExpanderHeader.CornerRadius" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
</VisualState.Setters>
<VisualState.Storyboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
<DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState.Storyboard>
</VisualState>
<VisualState x:Name="CollapseDown">
<VisualState.Storyboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
<SplineDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ContentHeight}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState.Storyboard>
</VisualState>
<VisualState x:Name="ExpandDown">
<VisualState.Setters>
<Setter Target="ExpanderHeader.CornerRadius" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
</VisualState.Setters>
<VisualState.Storyboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
<DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeContentHeight}" />
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState.Storyboard>
</VisualState>
<VisualState x:Name="CollapseUp">
<VisualState.Storyboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderContent" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
<SplineDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeContentHeight}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState.Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandDirectionStates">
<VisualState x:Name="Down" />
<VisualState x:Name="Up">
<VisualState.Setters>
<Setter Target="ExpanderHeader.Style" Value="{StaticResource ExpanderHeaderUpStyle}" />
<Setter Target="ExpanderContent.BorderThickness" Value="{StaticResource ExpanderContentUpBorderThickness}" />
<Setter Target="ExpanderContent.CornerRadius" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
<Setter Target="ExpanderHeader.(Grid.Row)" Value="1" />
<Setter Target="ExpanderContentClip.(Grid.Row)" Value="0" />
<Setter Target="Row0.Height" Value="*" />
<Setter Target="Row1.Height" Value="Auto" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>

<Border>
<Grid>
Expand All @@ -26,40 +174,35 @@
<ListViewItemPresenter
x:Name="Root"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
RevealBackground="{ThemeResource GridViewItemRevealBackground}"
RevealBorderBrush="{ThemeResource GridViewItemRevealBorderBrush}"
RevealBorderThickness="0" />
VerticalContentAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="vm:WidgetsListControlItemViewModel">
<Grid AutomationProperties.Name="{x:Bind WidgetAutomationProperties, Mode=OneWay}">
<controls:Expander
Padding="16,0,16,0"
<controls:Expander
Padding="16,0,16,0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
AutomationProperties.Name="{x:Bind WidgetAutomationProperties, Mode=OneWay}"
Header="{x:Bind WidgetItemModel.WidgetHeader, Mode=OneWay}"
IsExpanded="{x:Bind IsExpanded, Mode=TwoWay}"
Style="{StaticResource Local.WidgetExpanderStyle}">
<controls:Expander.Resources>
<SolidColorBrush x:Key="ExpanderHeaderBackground" Color="Transparent" />
<SolidColorBrush x:Key="ExpanderHeaderBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="ExpanderHeaderBorderPointerOverBrush" Color="Transparent" />
<SolidColorBrush x:Key="ExpanderHeaderBorderPressedBrush" Color="Transparent" />
<SolidColorBrush x:Key="ExpanderContentBackground" Color="Transparent" />
<SolidColorBrush x:Key="ExpanderContentBorderBrush" Color="Transparent" />
</controls:Expander.Resources>
<ContentControl
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Header="{x:Bind WidgetItemModel.WidgetHeader, Mode=OneWay}"
IsExpanded="{x:Bind IsExpanded, Mode=TwoWay}">
<controls:Expander.Resources>
<SolidColorBrush x:Key="ExpanderHeaderBackground" Color="Transparent" />
<SolidColorBrush x:Key="ExpanderHeaderBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="ExpanderHeaderBorderPointerOverBrush" Color="Transparent" />
<SolidColorBrush x:Key="ExpanderHeaderBorderPressedBrush" Color="Transparent" />
<SolidColorBrush x:Key="ExpanderContentBackground" Color="Transparent" />
<SolidColorBrush x:Key="ExpanderContentBorderBrush" Color="Transparent" />
<x:Double x:Key="ExpanderMinHeight">0</x:Double>
<Thickness x:Key="ExpanderContentPadding">0</Thickness>
</controls:Expander.Resources>
<ContentControl
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Content="{x:Bind WidgetControl, Mode=OneWay}" />
</controls:Expander>
</Grid>
Content="{x:Bind WidgetControl, Mode=OneWay}" />
</controls:Expander>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Expand Down
59 changes: 28 additions & 31 deletions src/Files.App/Views/ModernShellPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,10 +157,10 @@ public ModernShellPage()
DisplayFilesystemConsentDialog();

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

if (flowDirectionSetting == "RTL")
Expand Down Expand Up @@ -190,11 +190,11 @@ public ModernShellPage()
this.PointerPressed += CoreWindow_PointerPressed;

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

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

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

/*
* Ensure that the path bar gets updated for user interaction
* whenever the path changes. We will get the individual directories from
* the updated, most-current path and add them to the UI.
*/
* Ensure that the path bar gets updated for user interaction
* whenever the path changes. We will get the individual directories from
* the updated, most-current path and add them to the UI.
*/
public void UpdatePathUIToWorkingDirectory(string newWorkingDir, string singleItemOverride = null)
{
if (string.IsNullOrWhiteSpace(singleItemOverride))
Expand Down Expand Up @@ -526,7 +526,7 @@ private void OnNavigationParamsChanged()
{
NavPathParam = NavParams?.NavPath,
AssociatedTabInstance = this
}, new EntranceNavigationTransitionInfo());
}, new SuppressNavigationTransitionInfo());
}
else
{
Expand Down Expand Up @@ -893,12 +893,11 @@ public void Up_Click()
if (isPathRooted)
{
ItemDisplayFrame.Navigate(typeof(WidgetsPage),
new NavigationArguments()
{
NavPathParam = "Home".GetLocalizedResource(),
AssociatedTabInstance = this
},
new SuppressNavigationTransitionInfo());
new NavigationArguments()
{
NavPathParam = "Home".GetLocalizedResource(),
AssociatedTabInstance = this
}, new SuppressNavigationTransitionInfo());
}
else
{
Expand All @@ -914,12 +913,11 @@ public void Up_Click()

SelectSidebarItemFromPath();
ItemDisplayFrame.Navigate(InstanceViewModel.FolderSettings.GetLayoutType(parentDirectoryOfPath),
new NavigationArguments()
{
NavPathParam = parentDirectoryOfPath,
AssociatedTabInstance = this
},
new SuppressNavigationTransitionInfo());
new NavigationArguments()
{
NavPathParam = parentDirectoryOfPath,
AssociatedTabInstance = this
}, new SuppressNavigationTransitionInfo());
}
}

Expand Down Expand Up @@ -1044,8 +1042,7 @@ public void NavigateHome()
{
NavPathParam = "Home".GetLocalizedResource(),
AssociatedTabInstance = this
},
new EntranceNavigationTransitionInfo());
}, new SuppressNavigationTransitionInfo());
}

public void NavigateWithArguments(Type sourcePageType, NavigationArguments navArgs)
Expand Down