Skip to content

Feature: Vertical NavigationView in the properties window #11427

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 50 commits into from
Feb 24, 2023
Merged

Feature: Vertical NavigationView in the properties window #11427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
50 commits
Select commit Hold shift + click to select a range
6793f42
Redesign Property page
0x5bfa Feb 23, 2023
83af5eb
Merge branch 'main' into 5bfa/redesign-propertypages
0x5bfa Feb 23, 2023
b8a71e3
Fix margins
0x5bfa Feb 23, 2023
5e73f45
Merge branch '5bfa/redesign-propertypages' of https://github.com/onei…
0x5bfa Feb 23, 2023
74d654d
Align some controls again
0x5bfa Feb 23, 2023
6f2c890
Add ScrollViewer to some pages and rename some aliases to be more acc…
0x5bfa Feb 23, 2023
d23be01
Some fix
0x5bfa Feb 23, 2023
1aab059
Some fix 2
0x5bfa Feb 23, 2023
1ff1cbd
Change property window default size
0x5bfa Feb 23, 2023
5e9bc51
Remove apply and get back Cancel
0x5bfa Feb 23, 2023
f257bad
Fix margins
0x5bfa Feb 23, 2023
1c19c1d
Merge branch 'main' into 5bfa/redesign-propertypages
yaira2 Feb 23, 2023
f24ac11
Moved PathIcons to app.xaml
yaira2 Feb 23, 2023
6070d11
Some fix 3
0x5bfa Feb 23, 2023
12e0095
Merge branch '5bfa/redesign-propertypages' of https://github.com/onei…
0x5bfa Feb 23, 2023
ba7a6dd
Some fix 4
0x5bfa Feb 23, 2023
3fb300b
Use an enum instead of string tag
0x5bfa Feb 23, 2023
6e98f87
Some fix 5
0x5bfa Feb 23, 2023
23a87ab
Some fix 6
0x5bfa Feb 23, 2023
c4b6809
Merge branch 'main' into 5bfa/redesign-propertypages
0x5bfa Feb 23, 2023
511a413
Merge branch '5bfa/redesign-propertypages' of https://github.com/onei…
0x5bfa Feb 23, 2023
f04e99c
Some fix 7
0x5bfa Feb 23, 2023
31c46b2
Update PathIcons.xaml
yaira2 Feb 23, 2023
f4d87cb
Update PathIcons.xaml
yaira2 Feb 23, 2023
fc065fd
Filled path
yaira2 Feb 23, 2023
9543297
Update Properties.xaml.cs
yaira2 Feb 23, 2023
f7234de
Merge branch 'main' into 5bfa/redesign-propertypages
0x5bfa Feb 23, 2023
bf08ed3
Merge branch 'main' into 5bfa/redesign-propertypages
0x5bfa Feb 23, 2023
5d8db94
Update icons
yaira2 Feb 23, 2023
e7d5382
Icons
yaira2 Feb 23, 2023
59e90ce
Update PathIcons.xaml
yaira2 Feb 23, 2023
1ec9d74
Merge branch 'main' into 5bfa/redesign-propertypages
0x5bfa Feb 24, 2023
10d4e0e
Some fix 8
0x5bfa Feb 24, 2023
f07b133
Merge branch '5bfa/redesign-propertypages' of https://github.com/onei…
0x5bfa Feb 24, 2023
c537135
Add ResourceDictionary
0x5bfa Feb 24, 2023
d37144f
Update xaml
0x5bfa Feb 24, 2023
0dc6597
Some fix 9
0x5bfa Feb 24, 2023
37c795e
Merge branch 'main' into 5bfa/redesign-propertypages
0x5bfa Feb 24, 2023
d00d25d
Some fix 10
0x5bfa Feb 24, 2023
9846b8c
Merge branch '5bfa/redesign-propertypages' of https://github.com/onei…
0x5bfa Feb 24, 2023
e614883
Merge branch 'main' into 5bfa/redesign-propertypages
0x5bfa Feb 24, 2023
d2a067c
Some fix 11
0x5bfa Feb 24, 2023
3b4558f
Merge branch '5bfa/redesign-propertypages' of https://github.com/onei…
0x5bfa Feb 24, 2023
47f4d5c
Try to avoid using negative margins
0x5bfa Feb 24, 2023
9165671
Update Properties.xaml
yaira2 Feb 24, 2023
4a825ca
Remove unnecessary controls
0x5bfa Feb 24, 2023
3dc1db8
Update Properties.xaml
yaira2 Feb 24, 2023
303d1ee
Revert "Update Properties.xaml"
yaira2 Feb 24, 2023
25644fc
Fix build errors
0x5bfa Feb 24, 2023
8796364
Update Properties.xaml
yaira2 Feb 24, 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
1 change: 1 addition & 0 deletions src/Files.App/App.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@

<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<ResourceDictionary Source="/ResourceDictionaries/PathIcons.xaml" />
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
Expand Down
4 changes: 2 additions & 2 deletions src/Files.App/Helpers/FilePropertiesHelpers.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ public static async Task OpenPropertiesWindowAsync(object item, IShellPage assoc
IsMaximizable = false,
MinWidth = 460,
MinHeight = 550,
Width = 550,
Width = 600,
Height = 550,
Content = frame,
Backdrop = new WinUIEx.MicaSystemBackdrop(),
Expand All @@ -85,7 +85,7 @@ public static async Task OpenPropertiesWindowAsync(object item, IShellPage assoc
appWindow.SetIcon(LogoPath);

if (frame.Content is Properties properties)
properties.appWindow = appWindow;
properties.AppWindow = appWindow;

appWindow.Show();

Expand Down
178 changes: 178 additions & 0 deletions src/Files.App/ResourceDictionaries/NavigationViewStoreStyle.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:primitives="using:Microsoft.UI.Xaml.Controls.Primitives">

<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Dark">
<StaticResource x:Key="NavigationViewItemBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush" />
<StaticResource x:Key="NavigationViewItemBackgroundPressed" ResourceKey="SubtleFillColorTertiaryBrush" />
<StaticResource x:Key="NavigationViewItemBackgroundSelected" ResourceKey="ControlFillColorDefaultBrush" />
<StaticResource x:Key="NavigationViewItemBackgroundSelectedPointerOver" ResourceKey="ControlFillColorDefaultBrush" />
<StaticResource x:Key="NavigationViewItemBackgroundSelectedPressed" ResourceKey="ControlFillColorDefaultBrush" />

<StaticResource x:Key="NavigationViewItemForeground" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="NavigationViewItemForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="NavigationViewItemForegroundPressed" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="NavigationViewItemForegroundSelected" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="NavigationViewItemForegroundSelectedPointerOver" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="NavigationViewItemForegroundSelectedPressed" ResourceKey="TextFillColorSecondaryBrush" />
</ResourceDictionary>

<ResourceDictionary x:Key="Light">
<StaticResource x:Key="NavigationViewItemBackgroundPointerOver" ResourceKey="ControlFillColorSecondaryBrush" />
<StaticResource x:Key="NavigationViewItemBackgroundPressed" ResourceKey="ControlFillColorTertiaryBrush" />
<StaticResource x:Key="NavigationViewItemBackgroundSelected" ResourceKey="ControlFillColorDefaultBrush" />
<StaticResource x:Key="NavigationViewItemBackgroundSelectedPointerOver" ResourceKey="ControlFillColorDefaultBrush" />
<StaticResource x:Key="NavigationViewItemBackgroundSelectedPressed" ResourceKey="ControlFillColorDefaultBrush" />

<StaticResource x:Key="NavigationViewItemForeground" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="NavigationViewItemForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="NavigationViewItemForegroundPressed" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="NavigationViewItemForegroundSelected" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="NavigationViewItemForegroundSelectedPointerOver" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="NavigationViewItemForegroundSelectedPressed" ResourceKey="TextFillColorSecondaryBrush" />
</ResourceDictionary>

<ResourceDictionary x:Key="HighContrast">
<StaticResource x:Key="NavigationViewItemBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowBrush" />
<StaticResource x:Key="NavigationViewItemBackgroundPressed" ResourceKey="SystemControlHighlightListMediumBrush" />
<StaticResource x:Key="NavigationViewItemBackgroundSelected" ResourceKey="SystemControlHighlightListLowBrush" />
<StaticResource x:Key="NavigationViewItemBackgroundSelectedPointerOver" ResourceKey="SystemControlHighlightListLowBrush" />
<StaticResource x:Key="NavigationViewItemBackgroundSelectedPressed" ResourceKey="SystemControlHighlightListMediumBrush" />

<StaticResource x:Key="NavigationViewItemForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
<StaticResource x:Key="NavigationViewItemForegroundPointerOver" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<StaticResource x:Key="NavigationViewItemForegroundPressed" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<StaticResource x:Key="NavigationViewItemForegroundSelected" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<StaticResource x:Key="NavigationViewItemForegroundSelectedPointerOver" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<StaticResource x:Key="NavigationViewItemForegroundSelectedPressed" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

<x:Double x:Key="NavigationViewSelectionIndicatorWidth">4</x:Double>
<x:Double x:Key="NavigationViewSelectionIndicatorHeight">26</x:Double>
<x:Double x:Key="NavigationViewSelectionIndicatorRadius">2</x:Double>
<Thickness x:Key="NavigationViewItemContentPresenterMargin">0,0,0,0</Thickness>

<Style x:Key="MUX_NavigationViewItemPresenterStyleWhenOnLeftPane" TargetType="primitives:NavigationViewItemPresenter">
<Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
<Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrush}" />
<Setter Property="BorderThickness" Value="{StaticResource NavigationViewItemBorderThickness}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="primitives:NavigationViewItemPresenter">
<Grid
x:Name="LayoutRoot"
MinHeight="{ThemeResource NavigationViewItemOnLeftMinHeight}"
Margin="{ThemeResource NavigationViewItemButtonMargin}"
Background="{TemplateBinding Background}"
Control.IsTemplateFocusTarget="True"
CornerRadius="{ThemeResource ControlCornerRadius}">
<Grid.BackgroundTransition>
<BrushTransition Duration="0:0:0.083" />
</Grid.BackgroundTransition>

<!-- Selection indicator -->
<Rectangle
x:Name="SelectionIndicator"
Width="{ThemeResource NavigationViewSelectionIndicatorWidth}"
Height="{ThemeResource NavigationViewSelectionIndicatorHeight}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}"
Opacity="0.0"
RadiusX="{ThemeResource NavigationViewSelectionIndicatorRadius}"
RadiusY="{ThemeResource NavigationViewSelectionIndicatorRadius}" />

<!-- Content grid -->
<ContentPresenter
x:Name="ContentPresenter"
Grid.Column="1"
MinHeight="{ThemeResource NavigationViewItemOnLeftMinHeight}"
Margin="{ThemeResource NavigationViewItemContentPresenterMargin}"
Padding="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Foreground="{TemplateBinding Foreground}" />

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PointerStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewItemBackgroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewItemForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewItemBackgroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewItemForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewItemBackgroundSelected}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewItemForegroundSelected}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewItemBackgroundSelectedPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewItemForegroundSelectedPointerOver}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PressedSelected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewItemBackgroundSelectedPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewItemForegroundSelectedPressed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>

<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Opacity" Value="{ThemeResource ListViewItemDisabledThemeOpacity}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

</ResourceDictionary>
Loading