Skip to content

Commit 14ec65d

Browse files
0x5bfa0x5bfa
committed
Improved XAML of all sample pages
1 parent 494b79f commit 14ec65d

File tree

6 files changed

+154
-297
lines changed

6 files changed

+154
-297
lines changed

‎tests/Files.App.UITests/App.xaml‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,51 @@
44
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
55
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
66
xmlns:local="using:Files.App.UITests">
7+
78
<Application.Resources>
89
<ResourceDictionary>
910
<ResourceDictionary.MergedDictionaries>
11+
1012
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
1113

1214
<ResourceDictionary Source="ms-appx:///Files.App.Controls/Themes/Generic.xaml" />
15+
16+
<ResourceDictionary>
17+
18+
<Thickness x:Key="NavigationViewHeaderMargin">36,40,0,0</Thickness>
19+
20+
<Style x:Key="StackPanelControlTestingStyle" TargetType="StackPanel">
21+
<Setter Property="Padding" Value="16,16,16,24" />
22+
<Setter Property="Background" Value="{ThemeResource LayerFillColorDefaultBrush}" />
23+
<Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
24+
<Setter Property="BorderThickness" Value="1,0,0,0" />
25+
<Setter Property="CornerRadius" Value="0,8,8,0" />
26+
<Setter Property="Spacing" Value="24" />
27+
</Style>
28+
29+
<Style x:Key="GridExampleControlStyle" TargetType="Grid">
30+
<Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
31+
<Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
32+
<Setter Property="BorderThickness" Value="1" />
33+
<Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
34+
</Style>
35+
36+
<Style
37+
x:Key="TextExampleCaptionStyle"
38+
BasedOn="{StaticResource CaptionTextBlockStyle}"
39+
TargetType="TextBlock">
40+
<Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
41+
<Setter Property="Margin" Value="24,24,24,0" />
42+
<Setter Property="FontWeight" Value="Normal" />
43+
<Setter Property="HorizontalAlignment" Value="Center" />
44+
<Setter Property="VerticalAlignment" Value="Center" />
45+
<Setter Property="MaxLines" Value="1" />
46+
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
47+
<Setter Property="TextWrapping" Value="NoWrap" />
48+
</Style>
49+
50+
</ResourceDictionary>
51+
1352
</ResourceDictionary.MergedDictionaries>
1453
<ResourceDictionary.ThemeDictionaries>
1554
<ResourceDictionary x:Key="Default">
@@ -30,4 +69,5 @@
3069
</ResourceDictionary.ThemeDictionaries>
3170
</ResourceDictionary>
3271
</Application.Resources>
72+
3373
</Application>

‎tests/Files.App.UITests/MainWindow.xaml.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@ private void NavigationView_SelectionChanged(NavigationView sender, NavigationVi
5151
nameof(OmnibarPage) => typeof(OmnibarPage),
5252
_ => throw new InvalidOperationException("There's no applicable page associated with the given key."),
5353
});
54+
55+
MainNavigationView.Header = tag.Substring(0, tag.Length - 4);
5456
}
5557

5658
private void AppThemeChangeToggleButton_Click(object sender, RoutedEventArgs e)

‎tests/Files.App.UITests/Views/OmnibarPage.xaml‎

Lines changed: 106 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -10,172 +10,121 @@
1010
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
1111
mc:Ignorable="d">
1212

13-
<Page.Resources>
14-
<ResourceDictionary>
15-
16-
<Style x:Key="StackPanelControlTestingStyle" TargetType="StackPanel">
17-
<Setter Property="Padding" Value="16,16,16,24" />
18-
<Setter Property="Background" Value="{ThemeResource LayerFillColorDefaultBrush}" />
19-
<Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
20-
<Setter Property="BorderThickness" Value="1,0,0,0" />
21-
<Setter Property="CornerRadius" Value="0,8,8,0" />
22-
<Setter Property="Spacing" Value="24" />
23-
</Style>
24-
25-
<Style x:Key="GridExampleControlStyle" TargetType="Grid">
26-
<Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
27-
<Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
28-
<Setter Property="BorderThickness" Value="1" />
29-
<Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
30-
</Style>
31-
32-
<Style
33-
x:Key="TextExampleCaptionStyle"
34-
BasedOn="{StaticResource CaptionTextBlockStyle}"
35-
TargetType="TextBlock">
36-
<Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
37-
<Setter Property="Margin" Value="24,24,24,0" />
38-
<Setter Property="FontWeight" Value="Normal" />
39-
<Setter Property="HorizontalAlignment" Value="Center" />
40-
<Setter Property="VerticalAlignment" Value="Center" />
41-
<Setter Property="MaxLines" Value="1" />
42-
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
43-
<Setter Property="TextWrapping" Value="NoWrap" />
44-
</Style>
45-
46-
</ResourceDictionary>
47-
</Page.Resources>
48-
49-
<Grid Padding="36" RowSpacing="24">
50-
<Grid.RowDefinitions>
51-
<RowDefinition Height="Auto" />
52-
<RowDefinition Height="*" />
53-
</Grid.RowDefinitions>
13+
<StackPanel Padding="36" Spacing="24">
5414

5515
<StackPanel Spacing="8">
56-
<TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="Omnibar" />
57-
<TextBlock
58-
Foreground="{ThemeResource TextFillColorTertiaryBrush}"
59-
Style="{StaticResource CaptionTextBlockStyle}"
60-
Text="Files.App.Controls" />
61-
</StackPanel>
62-
63-
<StackPanel Grid.Row="1" Spacing="24">
64-
65-
<StackPanel Spacing="8">
6616

67-
<TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="Default usage" />
68-
69-
<Grid Style="{StaticResource GridExampleControlStyle}">
70-
<Grid.ColumnDefinitions>
71-
<ColumnDefinition Width="*" />
72-
<ColumnDefinition Width="320" />
73-
</Grid.ColumnDefinitions>
74-
75-
<StackPanel Padding="24">
76-
<controls:Omnibar HorizontalAlignment="Stretch" VerticalAlignment="Center">
77-
78-
<controls:OmnibarMode
79-
IsDefault="True"
80-
Text="Path..."
81-
TextPlaceholder="Enter text..."
82-
ToolTip="Path">
83-
<controls:OmnibarMode.IconOnActive>
84-
<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Path}" />
85-
</controls:OmnibarMode.IconOnActive>
86-
<controls:OmnibarMode.IconOnInactive>
87-
<controls:ThemedIcon IconType="Outline" Style="{StaticResource App.ThemedIcons.Omnibar.Path}" />
88-
</controls:OmnibarMode.IconOnInactive>
89-
<controls:OmnibarMode.ContentOnInactive>
90-
<Grid Padding="16,0" ColumnSpacing="16">
17+
<TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="Default usage" />
18+
19+
<Grid Style="{StaticResource GridExampleControlStyle}">
20+
<Grid.ColumnDefinitions>
21+
<ColumnDefinition Width="*" />
22+
<ColumnDefinition Width="320" />
23+
</Grid.ColumnDefinitions>
24+
25+
<StackPanel Padding="24">
26+
<controls:Omnibar HorizontalAlignment="Stretch" VerticalAlignment="Center">
27+
28+
<controls:OmnibarMode
29+
IsDefault="True"
30+
Text="Path..."
31+
TextPlaceholder="Enter text..."
32+
ToolTip="Path">
33+
<controls:OmnibarMode.IconOnActive>
34+
<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Path}" />
35+
</controls:OmnibarMode.IconOnActive>
36+
<controls:OmnibarMode.IconOnInactive>
37+
<controls:ThemedIcon IconType="Outline" Style="{StaticResource App.ThemedIcons.Omnibar.Path}" />
38+
</controls:OmnibarMode.IconOnInactive>
39+
<controls:OmnibarMode.ContentOnInactive>
40+
<Grid Padding="16,0" ColumnSpacing="16">
41+
<Grid.ColumnDefinitions>
42+
<ColumnDefinition Width="Auto" />
43+
<ColumnDefinition Width="*" />
44+
<ColumnDefinition Width="Auto" />
45+
</Grid.ColumnDefinitions>
46+
<Image
47+
Grid.Column="0"
48+
Width="16"
49+
Height="16"
50+
Source="/Data/DummyIcon1.png" />
51+
<TextBlock
52+
Grid.Column="1"
53+
VerticalAlignment="Center"
54+
Text="Breadcrumb goes here" />
55+
<FontIcon
56+
Grid.Column="2"
57+
FontSize="14"
58+
Glyph="&#xe70d;" />
59+
</Grid>
60+
</controls:OmnibarMode.ContentOnInactive>
61+
</controls:OmnibarMode>
62+
63+
<controls:OmnibarMode
64+
SuggestionItemsSource="{x:Bind DummyItems1, Mode=OneWay}"
65+
TextPlaceholder="Enter a palette command..."
66+
ToolTip="Palette">
67+
<controls:OmnibarMode.IconOnActive>
68+
<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Commands}" />
69+
</controls:OmnibarMode.IconOnActive>
70+
<controls:OmnibarMode.IconOnInactive>
71+
<controls:ThemedIcon IconType="Outline" Style="{StaticResource App.ThemedIcons.Omnibar.Commands}" />
72+
</controls:OmnibarMode.IconOnInactive>
73+
<controls:OmnibarMode.SuggestionItemTemplate>
74+
<DataTemplate x:DataType="data:DummyItem1">
75+
<Grid Height="48" ColumnSpacing="12">
9176
<Grid.ColumnDefinitions>
9277
<ColumnDefinition Width="Auto" />
9378
<ColumnDefinition Width="*" />
9479
<ColumnDefinition Width="Auto" />
9580
</Grid.ColumnDefinitions>
96-
<Image
97-
Grid.Column="0"
98-
Width="16"
99-
Height="16"
100-
Source="/Data/DummyIcon1.png" />
101-
<TextBlock
102-
Grid.Column="1"
103-
VerticalAlignment="Center"
104-
Text="Breadcrumb goes here" />
105-
<FontIcon
106-
Grid.Column="2"
107-
FontSize="14"
108-
Glyph="&#xe70d;" />
81+
<StackPanel VerticalAlignment="Center">
82+
<controls:ThemedIcon IconSize="20" Style="{StaticResource App.ThemedIcons.Actions.Copying}" />
83+
</StackPanel>
84+
<StackPanel Grid.Column="1" VerticalAlignment="Center">
85+
<TextBlock
86+
Style="{StaticResource BodyStrongTextBlockStyle}"
87+
Text="{x:Bind Title}"
88+
TextTrimming="CharacterEllipsis"
89+
TextWrapping="NoWrap" />
90+
<TextBlock
91+
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
92+
Style="{StaticResource CaptionTextBlockStyle}"
93+
Text="{x:Bind Description}"
94+
TextTrimming="CharacterEllipsis"
95+
TextWrapping="NoWrap" />
96+
</StackPanel>
97+
<StackPanel Grid.Column="2" VerticalAlignment="Center">
98+
<TextBlock
99+
Text="{x:Bind HotKeys}"
100+
TextTrimming="CharacterEllipsis"
101+
TextWrapping="NoWrap" />
102+
</StackPanel>
109103
</Grid>
110-
</controls:OmnibarMode.ContentOnInactive>
111-
</controls:OmnibarMode>
112-
113-
<controls:OmnibarMode
114-
SuggestionItemsSource="{x:Bind DummyItems1, Mode=OneWay}"
115-
TextPlaceholder="Enter a palette command..."
116-
ToolTip="Palette">
117-
<controls:OmnibarMode.IconOnActive>
118-
<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Commands}" />
119-
</controls:OmnibarMode.IconOnActive>
120-
<controls:OmnibarMode.IconOnInactive>
121-
<controls:ThemedIcon IconType="Outline" Style="{StaticResource App.ThemedIcons.Omnibar.Commands}" />
122-
</controls:OmnibarMode.IconOnInactive>
123-
<controls:OmnibarMode.SuggestionItemTemplate>
124-
<DataTemplate x:DataType="data:DummyItem1">
125-
<Grid Height="48" ColumnSpacing="12">
126-
<Grid.ColumnDefinitions>
127-
<ColumnDefinition Width="Auto" />
128-
<ColumnDefinition Width="*" />
129-
<ColumnDefinition Width="Auto" />
130-
</Grid.ColumnDefinitions>
131-
<StackPanel VerticalAlignment="Center">
132-
<controls:ThemedIcon IconSize="20" Style="{StaticResource App.ThemedIcons.Actions.Copying}" />
133-
</StackPanel>
134-
<StackPanel Grid.Column="1" VerticalAlignment="Center">
135-
<TextBlock
136-
Style="{StaticResource BodyStrongTextBlockStyle}"
137-
Text="{x:Bind Title}"
138-
TextTrimming="CharacterEllipsis"
139-
TextWrapping="NoWrap" />
140-
<TextBlock
141-
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
142-
Style="{StaticResource CaptionTextBlockStyle}"
143-
Text="{x:Bind Description}"
144-
TextTrimming="CharacterEllipsis"
145-
TextWrapping="NoWrap" />
146-
</StackPanel>
147-
<StackPanel Grid.Column="2" VerticalAlignment="Center">
148-
<TextBlock
149-
Text="{x:Bind HotKeys}"
150-
TextTrimming="CharacterEllipsis"
151-
TextWrapping="NoWrap" />
152-
</StackPanel>
153-
</Grid>
154-
</DataTemplate>
155-
</controls:OmnibarMode.SuggestionItemTemplate>
156-
</controls:OmnibarMode>
157-
158-
<controls:OmnibarMode TextPlaceholder="Enter a search query..." ToolTip="Search">
159-
<controls:OmnibarMode.IconOnActive>
160-
<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Search}" />
161-
</controls:OmnibarMode.IconOnActive>
162-
<controls:OmnibarMode.IconOnInactive>
163-
<controls:ThemedIcon IconType="Outline" Style="{StaticResource App.ThemedIcons.Omnibar.Search}" />
164-
</controls:OmnibarMode.IconOnInactive>
165-
</controls:OmnibarMode>
166-
167-
</controls:Omnibar>
168-
</StackPanel>
169-
170-
<!-- Example Controls -->
171-
<StackPanel
172-
Grid.Column="1"
173-
Orientation="Vertical"
174-
Style="{StaticResource StackPanelControlTestingStyle}" />
175-
176-
</Grid>
177-
</StackPanel>
104+
</DataTemplate>
105+
</controls:OmnibarMode.SuggestionItemTemplate>
106+
</controls:OmnibarMode>
107+
108+
<controls:OmnibarMode TextPlaceholder="Enter a search query..." ToolTip="Search">
109+
<controls:OmnibarMode.IconOnActive>
110+
<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Search}" />
111+
</controls:OmnibarMode.IconOnActive>
112+
<controls:OmnibarMode.IconOnInactive>
113+
<controls:ThemedIcon IconType="Outline" Style="{StaticResource App.ThemedIcons.Omnibar.Search}" />
114+
</controls:OmnibarMode.IconOnInactive>
115+
</controls:OmnibarMode>
116+
117+
</controls:Omnibar>
118+
</StackPanel>
119+
120+
<!-- Example Controls -->
121+
<StackPanel
122+
Grid.Column="1"
123+
Orientation="Vertical"
124+
Style="{StaticResource StackPanelControlTestingStyle}" />
125+
126+
</Grid>
178127
</StackPanel>
179128

180-
</Grid>
129+
</StackPanel>
181130
</Page>

0 commit comments

Comments
 (0)