Skip to content

Modern design for Properties Dialog #18826

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

Draft
mdtauk wants to merge 38 commits into
base: main
Choose a base branch
from
+2,743 −13
Draft

Modern design for Properties Dialog #18826

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
57a01bc
Initial work on modernised Propertied Dialog design
mdtauk Aug 17, 2026
0d66b26
Begun work on Re-styling Expander and its components
mdtauk Aug 18, 2026
a6bfcec
Finished styles for the PropertiesExpander Header ToggleButtons
mdtauk Aug 18, 2026
47954fe
Initial work on the Expander control using the Headers
mdtauk Aug 19, 2026
508819f
Finished work on the Expander Control
mdtauk Aug 19, 2026
bb686bf
Added PropertiesHeader small UserControl
mdtauk Aug 19, 2026
1fd8cf0
Working on examples of Information display - before making them User …
mdtauk Aug 19, 2026
e6b8bbf
Added the first of our PropertiesItem controls, for Text
mdtauk Aug 20, 2026
18a51bf
Update the folder
0x5bfa Aug 20, 2026
2430978
Corrected Namespaces following changes made by @0x5bfa
mdtauk Aug 20, 2026
288f3ca
Refactored PropertiesItem UserControl into a Templated Control
mdtauk Aug 20, 2026
829bda8
Finished Ratings variant of the PropertiesViewItem control
mdtauk Aug 20, 2026
e291674
Added an Info variant of the PropertiesViewItem - for text items with…
mdtauk Aug 20, 2026
5f51cc0
Added Disabled states to the controls
mdtauk Aug 21, 2026
ccc9cfd
Update PropertiesView.ThemeResources.xaml
0x5bfa Aug 21, 2026
f3d2eb0
Implement PropertiesView
0x5bfa Aug 21, 2026
b5ed3ca
update
0x5bfa Aug 21, 2026
ec52599
Implement PropertiesViewForm
0x5bfa Aug 21, 2026
4550550
Update sample page names
0x5bfa Aug 21, 2026
870de2c
Toggle variant of the PropertiesViewItem control done
mdtauk Aug 21, 2026
0a6b19d
Add WindowedDialog
0x5bfa Aug 21, 2026
9c01313
Rename PropertiesViewForm to PropertiesView
0x5bfa Aug 21, 2026
56e501b
Added PropertiesViewItemSeparator
mdtauk Aug 21, 2026
acebf73
Fix titlebar
0x5bfa Aug 21, 2026
ae6e0d7
Created the PropertiesViewItemCheck control
mdtauk Aug 21, 2026
64d0cc4
Add PropertiesViewExpander
0x5bfa Aug 21, 2026
a72bfd6
Add PropertiesViewCard
0x5bfa Aug 21, 2026
c00d6d4
Replace properties view items with cards
0x5bfa Aug 21, 2026
fb9be4b
Restore properties view separators
0x5bfa Aug 21, 2026
b0cbd82
I have attempted to reduce the PropertiesViewCard XAML a bit, but I c…
mdtauk Aug 22, 2026
69cba61
Breakpoint visual states are now working, so next I can actually appl…
mdtauk Aug 22, 2026
4104f6e
Making some progress on Styling - Still more to do
mdtauk Aug 23, 2026
44e0f32
Some more work done on Styling - there will be more tweaks to make th…
mdtauk Aug 23, 2026
1308fa7
Slight tidy ups
mdtauk Aug 23, 2026
6ca7e25
Merge remote-tracking branch 'upstream/main' into mdta-new-properties…
mdtauk Aug 24, 2026
488a608
Solved the Issue with Content not stretching when right aligned...
mdtauk Aug 25, 2026
b469e23
Adjusted the styles for the PropertiesViewInfo control
mdtauk Aug 27, 2026
f64ef65
Merge branch 'files-community:main' into mdta-new-properties-dialog
mdtauk Aug 28, 2026
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
8 changes: 7 additions & 1 deletion src/Files.App.Controls/Files.App.Controls.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- Copyright (c) Files Community. Licensed under the MIT License. -->
<!-- Copyright (c) Files Community. Licensed under the MIT License. -->
<Project Sdk="Microsoft.NET.Sdk">

<PropertyGroup>
Expand All @@ -16,6 +16,7 @@

<ItemGroup>
<PackageReference Include="CommunityToolkit.WinUI.Extensions" />
<PackageReference Include="CommunityToolkit.WinUI.Triggers" />
<PackageReference Include="CommunityToolkit.Labs.WinUI.DependencyPropertyGenerator" />
<PackageReference Include="Microsoft.WindowsAppSDK" />
<PackageReference Include="Microsoft.Windows.SDK.BuildTools" />
Expand All @@ -32,4 +33,9 @@
<ProjectReference Include="..\Files.Core.SourceGenerator\Files.Core.SourceGenerator.csproj" OutputItemType="Analyzer" ReferenceOutputAssembly="false" />
</ItemGroup>

<ItemGroup>
<Compile Remove="PropertiesView\old\**\*.cs" />
<Page Remove="PropertiesView\old\**\*.xaml" />
</ItemGroup>

</Project>
218 changes: 218 additions & 0 deletions src/Files.App.Controls/PropertiesView/PropertiesView.ThemeResources.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,218 @@
<!-- Copyright (c) Files Community. SPDX-License-Identifier: MPL-2.0 -->
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
xmlns:controls="using:Microsoft.UI.Xaml.Controls"
xmlns:fcontrols="using:Files.App.Controls">

<ResourceDictionary.ThemeDictionaries>

<ResourceDictionary x:Key="Light">
<!--#region Light PropertiesExpander-->
<Thickness x:Key="PropertiesExpanderHeaderPadding">8,8,8,7</Thickness>
<Thickness x:Key="PropertiesExpanderHeaderBorderThickness">0</Thickness>

<StaticResource x:Key="PropertiesExpanderHeaderBackground" ResourceKey="SubtleFillColorTransparentBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPointerOverBackground" ResourceKey="SubtleFillColorSecondaryBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPressedBackground" ResourceKey="SubtleFillColorTertiaryBrush" />

<StaticResource x:Key="PropertiesExpanderHeaderForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPointerOverForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPressedForeground" ResourceKey="TextFillColorSecondaryBrush" />

<StaticResource x:Key="PropertiesExpanderHeaderBorderBrush" ResourceKey="SubtleFillColorTransparentBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPointerOverBorderBrush" ResourceKey="SubtleFillColorTransparentBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPressedBorderBrush" ResourceKey="SubtleFillColorTransparentBrush" />

<StaticResource x:Key="PropertiesExpanderChevronForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="PropertiesExpanderChevronPointerOverForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="PropertiesExpanderChevronPressedForeground" ResourceKey="TextFillColorSecondaryBrush" />

<StaticResource x:Key="PropertiesExpanderHeaderDisabledForeground" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderDisabledBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />

<StaticResource x:Key="PropertiesExpanderContentBackground" ResourceKey="SubtleFillColorTransparentBrush" />
<StaticResource x:Key="PropertiesExpanderContentBorderBrush" ResourceKey="DividerStrokeColorDefaultBrush" />

<StaticResource x:Key="PropertiesExpanderSeparatorFillColor" ResourceKey="DividerStrokeColorDefaultBrush" />
<!--#endregion-->

<StaticResource x:Key="PropertiesItemSeparatorForeground" ResourceKey="DividerStrokeColorDefaultBrush" />

<Thickness x:Key="PropertiesValueTextBoxMargin">-12,0,0,0</Thickness>

<!--#region Light PropertiesViewInfo-->
<StaticResource x:Key="PropertiesViewInfoForeground" ResourceKey="AccentFillColorDefaultBrush" />
<StaticResource x:Key="PropertiesViewInfoPointerOverForeground" ResourceKey="AccentTextFillColorSecondaryBrush" />
<StaticResource x:Key="PropertiesViewInfoPressedForeground" ResourceKey="AccentTextFillColorSecondaryBrush" />
<StaticResource x:Key="PropertiesViewInfoDisabledForeground" ResourceKey="AccentTextFillColorDisabledBrush" />

<StaticResource x:Key="PropertiesViewInfoBackground" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="PropertiesViewInfoPointerOverBackground" ResourceKey="ControlFillColorSecondaryBrush" />
<StaticResource x:Key="PropertiesViewInfoPressedBackground" ResourceKey="ControlFillColorSecondaryBrush" />
<StaticResource x:Key="PropertiesViewInfoDisabledBackground" ResourceKey="ControlFillColorTransparentBrush" />

<StaticResource x:Key="PropertiesViewInfoBorderBrush" ResourceKey="ControlStrokeColorDefaultBrush" />
<StaticResource x:Key="PropertiesViewInfoPointerOverBorderBrush" ResourceKey="ControlStrokeColorSecondaryBrush" />
<StaticResource x:Key="PropertiesViewInfoPressedBorderBrush" ResourceKey="ControlStrokeColorSecondaryBrush" />
<StaticResource x:Key="PropertiesViewInfoDisabledBorderBrush" ResourceKey="ControlFillColorTransparentBrush" />
<!--#endregion-->
</ResourceDictionary>


<ResourceDictionary x:Key="Dark">
<!--#region Dark PropertiesExpander-->
<Thickness x:Key="PropertiesExpanderHeaderPadding">8,8,8,7</Thickness>
<Thickness x:Key="PropertiesExpanderHeaderBorderThickness">0</Thickness>

<StaticResource x:Key="PropertiesExpanderHeaderBackground" ResourceKey="SubtleFillColorTransparentBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPointerOverBackground" ResourceKey="SubtleFillColorSecondaryBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPressedBackground" ResourceKey="SubtleFillColorTertiaryBrush" />

<StaticResource x:Key="PropertiesExpanderHeaderForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPointerOverForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPressedForeground" ResourceKey="TextFillColorSecondaryBrush" />

<StaticResource x:Key="PropertiesExpanderHeaderBorderBrush" ResourceKey="SubtleFillColorTransparentBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPointerOverBorderBrush" ResourceKey="SubtleFillColorTransparentBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPressedBorderBrush" ResourceKey="SubtleFillColorTransparentBrush" />

<StaticResource x:Key="PropertiesExpanderChevronForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="PropertiesExpanderChevronPointerOverForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="PropertiesExpanderChevronPressedForeground" ResourceKey="TextFillColorSecondaryBrush" />

<StaticResource x:Key="PropertiesExpanderHeaderDisabledForeground" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderDisabledBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />

<StaticResource x:Key="PropertiesExpanderContentBackground" ResourceKey="SubtleFillColorTransparentBrush" />
<StaticResource x:Key="PropertiesExpanderContentBorderBrush" ResourceKey="DividerStrokeColorDefaultBrush" />

<StaticResource x:Key="PropertiesExpanderSeparatorFillColor" ResourceKey="DividerStrokeColorDefaultBrush" />
<!--#endregion-->

<StaticResource x:Key="PropertiesItemSeparatorForeground" ResourceKey="DividerStrokeColorDefaultBrush" />

<Thickness x:Key="PropertiesValueTextBoxMargin">-12,0,0,0</Thickness>

<!--#region Dark PropertiesViewInfo-->
<StaticResource x:Key="PropertiesViewInfoForeground" ResourceKey="AccentFillColorDefaultBrush" />
<StaticResource x:Key="PropertiesViewInfoPointerOverForeground" ResourceKey="AccentTextFillColorSecondaryBrush" />
<StaticResource x:Key="PropertiesViewInfoPressedForeground" ResourceKey="AccentTextFillColorSecondaryBrush" />
<StaticResource x:Key="PropertiesViewInfoDisabledForeground" ResourceKey="AccentTextFillColorDisabledBrush" />

<StaticResource x:Key="PropertiesViewInfoBackground" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="PropertiesViewInfoPointerOverBackground" ResourceKey="ControlFillColorSecondaryBrush" />
<StaticResource x:Key="PropertiesViewInfoPressedBackground" ResourceKey="ControlFillColorSecondaryBrush" />
<StaticResource x:Key="PropertiesViewInfoDisabledBackground" ResourceKey="ControlFillColorTransparentBrush" />

<StaticResource x:Key="PropertiesViewInfoBorderBrush" ResourceKey="ControlStrokeColorDefaultBrush" />
<StaticResource x:Key="PropertiesViewInfoPointerOverBorderBrush" ResourceKey="ControlStrokeColorSecondaryBrush" />
<StaticResource x:Key="PropertiesViewInfoPressedBorderBrush" ResourceKey="ControlStrokeColorSecondaryBrush" />
<StaticResource x:Key="PropertiesViewInfoDisabledBorderBrush" ResourceKey="ControlFillColorTransparentBrush" />
<!--#endregion-->

</ResourceDictionary>


<ResourceDictionary x:Key="HighContrast">
<!--#region HighContrastPropertiesExpander-->
<Thickness x:Key="PropertiesExpanderHeaderPadding">6,6,6,5</Thickness>
<Thickness x:Key="PropertiesExpanderHeaderBorderThickness">2</Thickness>

<StaticResource x:Key="PropertiesExpanderHeaderBackground" ResourceKey="SystemColorButtonFaceColorBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPointerOverBackground" ResourceKey="SystemControlTransparentBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPressedBackground" ResourceKey="SystemControlTransparentBrush" />

<StaticResource x:Key="PropertiesExpanderHeaderForeground" ResourceKey="SystemColorButtonTextColorBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPointerOverForeground" ResourceKey="SystemColorHighlightColorBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPressedForeground" ResourceKey="SystemColorHighlightColorBrush" />

<StaticResource x:Key="PropertiesExpanderHeaderBorderBrush" ResourceKey="SystemColorButtonTextColorBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPointerOverBorderBrush" ResourceKey="SystemColorHighlightColorBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderPressedBorderBrush" ResourceKey="SystemColorHighlightColorBrush" />

<StaticResource x:Key="PropertiesExpanderChevronForeground" ResourceKey="SystemColorButtonTextColorBrush" />
<StaticResource x:Key="PropertiesExpanderChevronPointerOverForeground" ResourceKey="SystemColorHighlightColorBrush" />
<StaticResource x:Key="PropertiesExpanderChevronPressedForeground" ResourceKey="SystemColorHighlightColorBrush" />

<StaticResource x:Key="PropertiesExpanderHeaderDisabledForeground" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="PropertiesExpanderHeaderDisabledBorderBrush" ResourceKey="TextFillColorDisabledBrush" />

<StaticResource x:Key="PropertiesExpanderContentBackground" ResourceKey="SystemColorWindowColorBrush" />
<StaticResource x:Key="PropertiesExpanderContentBorderBrush" ResourceKey="SystemColorWindowTextColorBrush" />

<StaticResource x:Key="PropertiesExpanderSeparatorFillColor" ResourceKey="SystemColorWindowTextColorBrush" />
<!--#endregion-->

<StaticResource x:Key="PropertiesItemSeparatorForeground" ResourceKey="SystemColorWindowTextColorBrush" />

<Thickness x:Key="PropertiesValueTextBoxMargin">0,0,0,0</Thickness>

<!--#region HighContrast PropertiesViewInfo-->
<StaticResource x:Key="PropertiesViewInfoForeground" ResourceKey="SystemColorHighlightColor" />
<StaticResource x:Key="PropertiesViewInfoPointerOverForeground" ResourceKey="SystemColorHighlightTextColor" />
<StaticResource x:Key="PropertiesViewInfoPressedForeground" ResourceKey="SystemColorButtonFaceColor" />
<StaticResource x:Key="PropertiesViewInfoDisabledForeground" ResourceKey="SystemColorGrayTextColor" />

<StaticResource x:Key="PropertiesViewInfoBackground" ResourceKey="SystemControlTransparentBrush" />
<StaticResource x:Key="PropertiesViewInfoPointerOverBackground" ResourceKey="SystemColorHighlightColor" />
<StaticResource x:Key="PropertiesViewInfoPressedBackground" ResourceKey="SystemColorButtonTextColor" />
<StaticResource x:Key="PropertiesViewInfoDisabledBackground" ResourceKey="SystemControlTransparentBrush" />

<StaticResource x:Key="PropertiesViewInfoBorderBrush" ResourceKey="SystemControlTransparentBrush" />
<StaticResource x:Key="PropertiesViewInfoPointerOverBorderBrush" ResourceKey="SystemControlTransparentBrush" />
<StaticResource x:Key="PropertiesViewInfoPressedBorderBrush" ResourceKey="SystemControlTransparentBrush" />
<StaticResource x:Key="PropertiesViewInfoDisabledBorderBrush" ResourceKey="SystemControlTransparentBrush" />
<!--#endregion-->

</ResourceDictionary>

</ResourceDictionary.ThemeDictionaries>

<!--#region PropertiesExpander-->
<x:Double x:Key="PropertiesExpanderMinHeight">48</x:Double>

<Thickness x:Key="PropertiesExpanderHeaderInnerPadding">8,0,24,0</Thickness>
<Thickness x:Key="PropertiesExpanderChevronMargin">0,0,8,0</Thickness>
<x:Double x:Key="PropertiesExpanderChevronSpaceWidth">24</x:Double>
<x:Double x:Key="PropertiesExpanderChevronSpaceHeight">32</x:Double>
<x:Double x:Key="PropertiesExpanderChevronGlyphSize">12</x:Double>

<x:String x:Key="PropertiesExpanderChevronUpGlyph">&#xE70E;</x:String>
<x:String x:Key="PropertiesExpanderChevronDownGlyph">&#xE70D;</x:String>

<HorizontalAlignment x:Key="PropertiesExpanderHeaderHorizontalContentAlignment">Stretch</HorizontalAlignment>
<VerticalAlignment x:Key="PropertiesExpanderHeaderVerticalContentAlignment">Center</VerticalAlignment>

<Thickness x:Key="PropertiesExpanderContentPadding">24, 0</Thickness>
<Thickness x:Key="PropertiesExpanderContentDownBorderThickness">0</Thickness>
<Thickness x:Key="PropertiesExpanderContentUpBorderThickness">0</Thickness>

<x:Double x:Key="PropertiesExpanderSeparatorHeight">1</x:Double>
<!--#endregion-->


<!--#region PropertiesViewItem-->
<Thickness x:Key="PropertiesItemSeparatorHorizontalMargin">0,-4,0,-4</Thickness>
<Thickness x:Key="PropertiesItemSeparatorVerticalMargin">-4,0,-4,0</Thickness>

<x:Double x:Key="PropertiesItemSeparatorStrokeThickness">1</x:Double>
<CornerRadius x:Key="PropertiessItemSeparatorCornerRadius">1</CornerRadius>

<Thickness x:Key="PropertiesItemCheckBoxVerticalMargin">8</Thickness>
<Thickness x:Key="PropertiesItemCheckBoxHorizontalMargin">0,0,12,0</Thickness>

<Thickness x:Key="PropertiesViewItemCheckPadding">0</Thickness>
<!--#endregion-->


<!--#region PropertiesViewInfo-->
<x:Double x:Key="PropertiesViewInfoSize">32</x:Double>
<x:Double x:Key="PropertiesViewInfoIconSize">16</x:Double>
<CornerRadius x:Key="PropertiesViewInfoCornerRadius">16</CornerRadius>
<!-- Half the size to make a circle -->
<Thickness x:Key="PropertiesViewInfoBorderThickness">1</Thickness>
<!--#endregion-->

</ResourceDictionary>
21 changes: 21 additions & 0 deletions src/Files.App.Controls/PropertiesView/PropertiesView.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// Copyright (c) Files Community
// SPDX-License-Identifier: MPL-2.0

using CommunityToolkit.WinUI;

namespace Files.App.Controls
{
public partial class PropertiesView : ItemsControl
{
[GeneratedDependencyProperty]
public partial FrameworkElement? Header { get; set; }

[GeneratedDependencyProperty]
public partial FrameworkElement? Footer { get; set; }

public PropertiesView()
{
DefaultStyleKey = typeof(PropertiesView);
}
}
}
Loading
Loading