Skip to content

Commit 23e9973

Browse files
yaira2yaira2
authored
Feature: Improved animations in the Columns layout (#10973)
1 parent e19890e commit 23e9973

File tree

2 files changed

+43
-69
lines changed

2 files changed

+43
-69
lines changed

‎src/Files.App/Views/LayoutModes/ColumnViewBase.xaml‎

Lines changed: 31 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,10 @@
22
x:Class="Files.App.Views.LayoutModes.ColumnViewBase"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5-
xmlns:animations="using:CommunityToolkit.WinUI.UI.Animations"
6-
xmlns:behaviors="using:CommunityToolkit.WinUI.UI.Behaviors"
7-
xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
85
xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
96
xmlns:converters1="using:Files.App.Converters"
107
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
118
xmlns:helpers="using:Files.App.Helpers"
12-
xmlns:i="using:Microsoft.Xaml.Interactivity"
13-
xmlns:icore="using:Microsoft.Xaml.Interactions.Core"
149
xmlns:local="using:Files.App"
1510
xmlns:local2="using:Files.App.Filesystem"
1611
xmlns:local3="using:Files.App.Filesystem.Cloud"
@@ -37,11 +32,7 @@
3732
NotEmptyValue="Visible" />
3833

3934
<converters1:BoolToSelectionMode x:Key="BoolToSelectionModeConverter" />
40-
<Style TargetType="controls:BladeItem">
41-
<Setter Property="Background" Value="Transparent" />
42-
<Setter Property="TitleBarVisibility" Value="Collapsed" />
43-
<Setter Property="BorderThickness" Value="0,0,1,0" />
44-
</Style>
35+
4536
<Style TargetType="ListViewHeaderItem">
4637
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
4738
<Setter Property="FontSize" Value="{ThemeResource GridViewHeaderItemThemeFontSize}" />
@@ -190,7 +181,7 @@
190181
x:Name="FilesRootGrid"
191182
Height="30"
192183
Margin="0"
193-
Padding="20,0,12,0"
184+
Padding="12,0,12,0"
194185
HorizontalAlignment="Stretch"
195186
VerticalAlignment="Stretch"
196187
CornerRadius="{StaticResource ControlCornerRadius}"
@@ -201,28 +192,9 @@
201192
<ColumnDefinition Width="24" />
202193
<ColumnDefinition Width="*" />
203194
<ColumnDefinition Width="Auto" />
204-
<ColumnDefinition Width="20" />
205195
</Grid.ColumnDefinitions>
206-
<animations:Explicit.Animations>
207-
<animations:AnimationSet x:Name="FadeAnimation">
208-
<animations:OpacityAnimation
209-
Delay="0"
210-
EasingMode="EaseIn"
211-
EasingType="Linear"
212-
From="0"
213-
To="1"
214-
Duration="0:0:.05" />
215-
<animations:TranslationAnimation
216-
From="0, 5, 0"
217-
To="0"
218-
Duration="0:0:.1" />
219-
</animations:AnimationSet>
220-
</animations:Explicit.Animations>
221-
<i:Interaction.Behaviors>
222-
<icore:EventTriggerBehavior EventName="Loaded">
223-
<behaviors:StartAnimationAction Animation="{Binding ElementName=FadeAnimation}" />
224-
</icore:EventTriggerBehavior>
225-
</i:Interaction.Behaviors>
196+
197+
<!-- Thumbnail -->
226198
<Grid
227199
Grid.Column="0"
228200
Width="24"
@@ -291,19 +263,19 @@
291263
Glyph="&#xF10A;" />
292264
</Border>
293265
</Grid>
294-
<Grid
266+
267+
<!-- Item Name -->
268+
<TextBlock
269+
x:Name="ItemName"
295270
Grid.Column="1"
296271
Margin="5,0,5,0"
297-
HorizontalAlignment="Left">
298-
<TextBlock
299-
x:Name="ItemName"
300-
Grid.Column="1"
301-
HorizontalAlignment="Stretch"
302-
VerticalAlignment="Center"
303-
Text="{x:Bind Name, Mode=OneWay}"
304-
TextTrimming="CharacterEllipsis"
305-
TextWrapping="NoWrap" />
306-
</Grid>
272+
HorizontalAlignment="Left"
273+
VerticalAlignment="Center"
274+
Text="{x:Bind Name, Mode=OneWay}"
275+
TextTrimming="CharacterEllipsis"
276+
TextWrapping="NoWrap" />
277+
278+
<!-- Rename Text Box -->
307279
<TextBox
308280
x:Name="ListViewTextBoxItemName"
309281
Grid.Column="1"
@@ -314,8 +286,10 @@
314286
TextAlignment="Left"
315287
TextWrapping="Wrap"
316288
Visibility="Collapsed" />
289+
317290
<Grid Grid.Column="2">
318-
<StackPanel Orientation="Horizontal">
291+
<StackPanel Orientation="Horizontal" Spacing="4">
292+
<!-- Cloud Status -->
319293
<FontIcon
320294
x:Name="CloudDriveSyncStatusGlyph"
321295
HorizontalAlignment="Center"
@@ -324,6 +298,8 @@
324298
FontSize="12"
325299
Glyph="{x:Bind ((local3:CloudDriveSyncStatusUI)SyncStatusUI).Glyph, Mode=OneWay}"
326300
Visibility="{x:Bind ((local3:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}" />
301+
302+
<!-- Tag Ellipse -->
327303
<Ellipse
328304
Width="12"
329305
Height="12"
@@ -332,17 +308,18 @@
332308
Fill="{x:Bind FileTagsUI[0].ColorModel, Mode=OneWay, Converter={StaticResource ColorModelToColorConverter}}"
333309
ToolTipService.ToolTip="{x:Bind FileTagsUI[0].TagName, Mode=OneWay}"
334310
Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}" />
311+
312+
<!-- Open Folder Icon -->
313+
<FontIcon
314+
x:Name="OpenFolderChevron"
315+
HorizontalAlignment="Right"
316+
VerticalAlignment="Center"
317+
x:Load="{x:Bind IsFolder}"
318+
FontSize="12"
319+
Foreground="{ThemeResource TextFillColorSecondary}"
320+
Glyph="&#xE76C;" />
335321
</StackPanel>
336322
</Grid>
337-
<FontIcon
338-
x:Name="OpenFolderChevron"
339-
Grid.Column="3"
340-
HorizontalAlignment="Right"
341-
VerticalAlignment="Center"
342-
x:Load="{x:Bind IsFolder}"
343-
FontSize="12"
344-
Foreground="{ThemeResource TextFillColorSecondary}"
345-
Glyph="&#xE76C;" />
346323
</Grid>
347324
</DataTemplate>
348325
</ListView.ItemTemplate>
@@ -458,6 +435,7 @@
458435
</ListView>
459436
</SemanticZoom.ZoomedOutView>
460437
</SemanticZoom>
438+
461439
<Canvas>
462440
<Rectangle
463441
Name="SelectionRectangle"

‎src/Files.App/Views/LayoutModes/ColumnViewBrowser.xaml‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,20 @@
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
55
xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
6-
xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
7-
xmlns:converters1="using:Files.App.Converters"
86
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
97
xmlns:i="using:Microsoft.Xaml.Interactivity"
108
xmlns:icore="using:Microsoft.Xaml.Interactions.Core"
119
xmlns:local="using:Files.App"
12-
xmlns:local2="using:Files.App.Views"
1310
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
1411
x:Name="PageRoot"
1512
mc:Ignorable="d">
13+
1614
<i:Interaction.Behaviors>
1715
<icore:EventTriggerBehavior EventName="PointerPressed">
1816
<icore:InvokeCommandAction Command="{x:Bind CommandsViewModel.ItemPointerPressedCommand}" />
1917
</icore:EventTriggerBehavior>
2018
</i:Interaction.Behaviors>
19+
2120
<local:BaseLayout.Resources>
2221
<Style TargetType="controls:BladeItem">
2322
<Setter Property="Background" Value="Transparent" />
@@ -27,18 +26,15 @@
2726
<Setter Property="Width" Value="300" />
2827
</Style>
2928
</local:BaseLayout.Resources>
30-
<Grid x:Name="RootGrid" ContextFlyout="{x:Bind BaseContextMenuFlyout}">
31-
<controls:BladeView x:Name="ColumnHost">
32-
<controls:BladeView.Transitions>
33-
<TransitionCollection />
34-
</controls:BladeView.Transitions>
35-
<controls:BladeView.ItemContainerTransitions>
36-
<TransitionCollection />
37-
</controls:BladeView.ItemContainerTransitions>
3829

39-
<controls:BladeItem>
40-
<Frame x:Name="MainPageFrame" />
41-
</controls:BladeItem>
42-
</controls:BladeView>
43-
</Grid>
30+
<controls:BladeView x:Name="ColumnHost" ContextFlyout="{x:Bind BaseContextMenuFlyout}">
31+
<controls:BladeView.ItemContainerTransitions>
32+
<TransitionCollection />
33+
</controls:BladeView.ItemContainerTransitions>
34+
35+
<controls:BladeItem>
36+
<Frame x:Name="MainPageFrame" />
37+
</controls:BladeItem>
38+
</controls:BladeView>
39+
4440
</local:BaseLayout>

0 commit comments

Comments
 (0)