Skip to content

Commit 8a35997

Browse files
0x5bfa0x5bfa
committed
Added SamplePanel control
1 parent 14ec65d commit 8a35997

File tree

5 files changed

+198
-101
lines changed

5 files changed

+198
-101
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313

1414
<ResourceDictionary Source="ms-appx:///Files.App.Controls/Themes/Generic.xaml" />
1515

16+
<ResourceDictionary Source="ms-appx:///Controls/SamplePanel.xaml" />
17+
1618
<ResourceDictionary>
1719

1820
<Thickness x:Key="NavigationViewHeaderMargin">36,40,0,0</Thickness>

‎tests/Files.App.UITests/Controls/SamplePanel.Properties.cs‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// Copyright (c) Files Community
2+
// Licensed under the MIT License.
3+
4+
using CommunityToolkit.WinUI;
5+
using Microsoft.UI.Xaml;
6+
using Microsoft.UI.Xaml.Controls;
7+
8+
namespace Files.App.UITests.Controls
9+
{
10+
public sealed partial class SamplePanel
11+
{
12+
[GeneratedDependencyProperty]
13+
public partial string? Header { get; set; }
14+
15+
[GeneratedDependencyProperty]
16+
public partial UIElement? MainContent { get; set; }
17+
18+
[GeneratedDependencyProperty]
19+
public partial UIElement? SideContent { get; set; }
20+
}
21+
}

‎tests/Files.App.UITests/Controls/SamplePanel.cs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// Copyright (c) Files Community
2+
// Licensed under the MIT License.
3+
4+
using Files.App.UITests.Data;
5+
using Microsoft.UI.Xaml;
6+
using Microsoft.UI.Xaml.Controls;
7+
8+
namespace Files.App.UITests.Controls
9+
{
10+
public sealed partial class SamplePanel : Control
11+
{
12+
public SamplePanel()
13+
{
14+
DefaultStyleKey = typeof(SamplePanel);
15+
}
16+
}
17+
}

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!-- Copyright (c) Files Community. Licensed under the MIT License. -->
2+
<ResourceDictionary
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:local="using:Files.App.UITests.Controls">
6+
7+
<x:Double x:Key="SamplePanelSideContentWidth">320</x:Double>
8+
<Thickness x:Key="SamplePanelPadding">24</Thickness>
9+
10+
<Style BasedOn="{StaticResource DefaultSamplePanelStyle}" TargetType="local:SamplePanel" />
11+
12+
<Style x:Key="DefaultSamplePanelStyle" TargetType="local:SamplePanel">
13+
<Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
14+
<Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
15+
<Setter Property="BorderThickness" Value="1" />
16+
<Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
17+
<Setter Property="Padding" Value="{ThemeResource SamplePanelPadding}" />
18+
<Setter Property="HorizontalAlignment" Value="Stretch" />
19+
<Setter Property="VerticalAlignment" Value="Center" />
20+
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
21+
<Setter Property="IsTabStop" Value="True" />
22+
<Setter Property="UseSystemFocusVisuals" Value="True" />
23+
<Setter Property="IsFocusEngagementEnabled" Value="True" />
24+
<Setter Property="Template">
25+
<Setter.Value>
26+
<ControlTemplate TargetType="local:SamplePanel">
27+
<Grid x:Name="PART_RootGrid" RowSpacing="8">
28+
<Grid.RowDefinitions>
29+
<RowDefinition Height="Auto" />
30+
<RowDefinition Height="Auto" />
31+
</Grid.RowDefinitions>
32+
33+
<TextBlock
34+
Grid.Row="0"
35+
Style="{StaticResource BodyStrongTextBlockStyle}"
36+
Text="{Binding Header, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
37+
38+
<Grid
39+
x:Name="PART_RootPanel"
40+
Grid.Row="1"
41+
Background="{TemplateBinding Background}"
42+
BorderBrush="{TemplateBinding BorderBrush}"
43+
BorderThickness="{TemplateBinding BorderThickness}"
44+
CornerRadius="{TemplateBinding CornerRadius}">
45+
<Grid.ColumnDefinitions>
46+
<ColumnDefinition Width="*" />
47+
<ColumnDefinition Width="Auto" />
48+
</Grid.ColumnDefinitions>
49+
50+
<ContentPresenter
51+
Grid.Column="0"
52+
Padding="{TemplateBinding Padding}"
53+
Content="{Binding MainContent, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
54+
55+
<ContentPresenter
56+
Grid.Column="1"
57+
Width="{StaticResource SamplePanelSideContentWidth}"
58+
Padding="{TemplateBinding Padding}"
59+
Background="{ThemeResource LayerFillColorDefaultBrush}"
60+
BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
61+
BorderThickness="1,0,0,0"
62+
Content="{Binding SideContent, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
63+
</Grid>
64+
65+
</Grid>
66+
</ControlTemplate>
67+
</Setter.Value>
68+
</Setter>
69+
</Style>
70+
71+
</ResourceDictionary>

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

Lines changed: 87 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
55
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
66
xmlns:controls="using:Files.App.Controls"
7+
xmlns:controls2="using:Files.App.UITests.Controls"
78
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
89
xmlns:data="using:Files.App.UITests.Data"
910
xmlns:local="using:Files.App.UITests.Views"
@@ -12,119 +13,104 @@
1213

1314
<StackPanel Padding="36" Spacing="24">
1415

15-
<StackPanel Spacing="8">
16+
<controls2:SamplePanel Header="Default usage">
17+
<controls2:SamplePanel.MainContent>
1618

17-
<TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="Default usage" />
19+
<controls:Omnibar HorizontalAlignment="Stretch" VerticalAlignment="Center">
1820

19-
<Grid Style="{StaticResource GridExampleControlStyle}">
20-
<Grid.ColumnDefinitions>
21-
<ColumnDefinition Width="*" />
22-
<ColumnDefinition Width="320" />
23-
</Grid.ColumnDefinitions>
21+
<controls:OmnibarMode
22+
IsDefault="True"
23+
Text="Path..."
24+
TextPlaceholder="Enter text..."
25+
ToolTip="Path">
26+
<controls:OmnibarMode.IconOnActive>
27+
<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Path}" />
28+
</controls:OmnibarMode.IconOnActive>
29+
<controls:OmnibarMode.IconOnInactive>
30+
<controls:ThemedIcon IconType="Outline" Style="{StaticResource App.ThemedIcons.Omnibar.Path}" />
31+
</controls:OmnibarMode.IconOnInactive>
32+
<controls:OmnibarMode.ContentOnInactive>
33+
<Grid Padding="16,0" ColumnSpacing="16">
34+
<Grid.ColumnDefinitions>
35+
<ColumnDefinition Width="Auto" />
36+
<ColumnDefinition Width="*" />
37+
<ColumnDefinition Width="Auto" />
38+
</Grid.ColumnDefinitions>
39+
<Image
40+
Grid.Column="0"
41+
Width="16"
42+
Height="16"
43+
Source="/Data/DummyIcon1.png" />
44+
<TextBlock
45+
Grid.Column="1"
46+
VerticalAlignment="Center"
47+
Text="Breadcrumb goes here" />
48+
<FontIcon
49+
Grid.Column="2"
50+
FontSize="14"
51+
Glyph="&#xe70d;" />
52+
</Grid>
53+
</controls:OmnibarMode.ContentOnInactive>
54+
</controls:OmnibarMode>
2455

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">
56+
<controls:OmnibarMode
57+
SuggestionItemsSource="{x:Bind DummyItems1, Mode=OneWay}"
58+
TextPlaceholder="Enter a palette command..."
59+
ToolTip="Palette">
60+
<controls:OmnibarMode.IconOnActive>
61+
<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Commands}" />
62+
</controls:OmnibarMode.IconOnActive>
63+
<controls:OmnibarMode.IconOnInactive>
64+
<controls:ThemedIcon IconType="Outline" Style="{StaticResource App.ThemedIcons.Omnibar.Commands}" />
65+
</controls:OmnibarMode.IconOnInactive>
66+
<controls:OmnibarMode.SuggestionItemTemplate>
67+
<DataTemplate x:DataType="data:DummyItem1">
68+
<Grid Height="48" ColumnSpacing="12">
4169
<Grid.ColumnDefinitions>
4270
<ColumnDefinition Width="Auto" />
4371
<ColumnDefinition Width="*" />
4472
<ColumnDefinition Width="Auto" />
4573
</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;" />
74+
<StackPanel VerticalAlignment="Center">
75+
<controls:ThemedIcon IconSize="20" Style="{StaticResource App.ThemedIcons.Actions.Copying}" />
76+
</StackPanel>
77+
<StackPanel Grid.Column="1" VerticalAlignment="Center">
78+
<TextBlock
79+
Style="{StaticResource BodyStrongTextBlockStyle}"
80+
Text="{x:Bind Title}"
81+
TextTrimming="CharacterEllipsis"
82+
TextWrapping="NoWrap" />
83+
<TextBlock
84+
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
85+
Style="{StaticResource CaptionTextBlockStyle}"
86+
Text="{x:Bind Description}"
87+
TextTrimming="CharacterEllipsis"
88+
TextWrapping="NoWrap" />
89+
</StackPanel>
90+
<StackPanel Grid.Column="2" VerticalAlignment="Center">
91+
<TextBlock
92+
Text="{x:Bind HotKeys}"
93+
TextTrimming="CharacterEllipsis"
94+
TextWrapping="NoWrap" />
95+
</StackPanel>
5996
</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">
76-
<Grid.ColumnDefinitions>
77-
<ColumnDefinition Width="Auto" />
78-
<ColumnDefinition Width="*" />
79-
<ColumnDefinition Width="Auto" />
80-
</Grid.ColumnDefinitions>
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>
103-
</Grid>
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>
97+
</DataTemplate>
98+
</controls:OmnibarMode.SuggestionItemTemplate>
99+
</controls:OmnibarMode>
116100

117-
</controls:Omnibar>
118-
</StackPanel>
101+
<controls:OmnibarMode TextPlaceholder="Enter a search query..." ToolTip="Search">
102+
<controls:OmnibarMode.IconOnActive>
103+
<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Search}" />
104+
</controls:OmnibarMode.IconOnActive>
105+
<controls:OmnibarMode.IconOnInactive>
106+
<controls:ThemedIcon IconType="Outline" Style="{StaticResource App.ThemedIcons.Omnibar.Search}" />
107+
</controls:OmnibarMode.IconOnInactive>
108+
</controls:OmnibarMode>
119109

120-
<!-- Example Controls -->
121-
<StackPanel
122-
Grid.Column="1"
123-
Orientation="Vertical"
124-
Style="{StaticResource StackPanelControlTestingStyle}" />
110+
</controls:Omnibar>
125111

126-
</Grid>
127-
</StackPanel>
112+
</controls2:SamplePanel.MainContent>
113+
</controls2:SamplePanel>
128114

129115
</StackPanel>
130116
</Page>

0 commit comments

Comments
 (0)