Skip to content

Commit 89c98e6

Browse files
0x5bfa0x5bfa
committed
Added initial visual states
1 parent 206bfc6 commit 89c98e6

File tree

3 files changed

+110
-19
lines changed

3 files changed

+110
-19
lines changed

‎src/Files.App.Controls/BreadcrumbBar/BreadcrumbBar.xaml‎

Lines changed: 59 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
55
xmlns:local="using:Files.App.Controls">
66

7+
<x:Double x:Key="BreadcrumbBarItemHeight">32</x:Double>
8+
79
<Style BasedOn="{StaticResource DefaultBreadcrumbBarStyle}" TargetType="local:BreadcrumbBar" />
810
<Style BasedOn="{StaticResource DefaultBreadcrumbBarItemStyle}" TargetType="local:BreadcrumbBarItem" />
911

@@ -31,33 +33,36 @@
3133
<Setter Property="FontSize" Value="{ThemeResource BreadcrumbBarItemThemeFontSize}" />
3234
<Setter Property="FontWeight" Value="{ThemeResource BreadcrumbBarItemFontWeight}" />
3335
<Setter Property="Foreground" Value="{ThemeResource BreadcrumbBarForegroundBrush}" />
36+
<Setter Property="Height" Value="{ThemeResource BreadcrumbBarItemHeight}" />
3437
<Setter Property="HorizontalAlignment" Value="Stretch" />
3538
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
3639
<Setter Property="IsTabStop" Value="True" />
3740
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
3841
<Setter Property="VerticalAlignment" Value="Center" />
3942
<Setter Property="VerticalContentAlignment" Value="Center" />
40-
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
43+
<Setter Property="CornerRadius" Value="2" />
4144
<Setter Property="Template">
4245
<Setter.Value>
4346
<ControlTemplate TargetType="local:BreadcrumbBarItem">
44-
<Grid x:Name="PART_LayoutRoot" CornerRadius="{TemplateBinding CornerRadius}">
47+
<Grid x:Name="PART_LayoutRoot" ColumnSpacing="2">
4548
<Grid.ColumnDefinitions>
4649
<ColumnDefinition x:Name="PART_ContentColumn" Width="Auto" />
4750
<ColumnDefinition x:Name="PART_ChevronColumn" Width="Auto" />
4851
</Grid.ColumnDefinitions>
4952

5053
<!-- Clickable Area -->
51-
<Button
54+
<Border
5255
x:Name="PART_ItemButton"
56+
Height="{TemplateBinding Height}"
57+
Padding="8,0"
5358
AutomationProperties.AccessibilityView="Raw"
54-
Background="{TemplateBinding Background}"
55-
BorderBrush="{TemplateBinding BorderBrush}"
56-
BorderThickness="{TemplateBinding BorderThickness}"
5759
Control.IsTemplateFocusTarget="True"
5860
CornerRadius="{TemplateBinding CornerRadius}"
5961
FocusVisualMargin="-3"
6062
IsTabStop="False">
63+
<Border.BackgroundTransition>
64+
<BrushTransition Duration="0:0:0.083" />
65+
</Border.BackgroundTransition>
6166
<Grid AutomationProperties.AccessibilityView="Raw">
6267
<ContentPresenter
6368
x:Name="PART_ItemContentPresenter"
@@ -81,23 +86,58 @@
8186
Text="&#xE712;"
8287
Visibility="Collapsed" />
8388
</Grid>
84-
</Button>
89+
</Border>
8590

8691
<!-- Chevron -->
87-
<TextBlock
88-
x:Name="PART_ChevronTextBlock"
92+
<Border
93+
x:Name="PART_ChevronButton"
8994
Grid.Column="1"
90-
Padding="{ThemeResource BreadcrumbBarChevronPadding}"
91-
HorizontalAlignment="Center"
92-
VerticalAlignment="Center"
93-
AutomationProperties.AccessibilityView="Raw"
94-
FontFamily="{ThemeResource SymbolThemeFontFamily}"
95-
FontSize="{ThemeResource BreadcrumbBarChevronFontSize}"
96-
Foreground="{ThemeResource BreadcrumbBarNormalForegroundBrush}"
97-
IsTextScaleFactorEnabled="False"
98-
Text="&#xE76C;" />
95+
Padding="2,0"
96+
CornerRadius="{TemplateBinding CornerRadius}">
97+
<Border.BackgroundTransition>
98+
<BrushTransition Duration="0:0:0.083" />
99+
</Border.BackgroundTransition>
100+
<TextBlock
101+
x:Name="PART_ChevronTextBlock"
102+
Padding="{ThemeResource BreadcrumbBarChevronPadding}"
103+
HorizontalAlignment="Center"
104+
VerticalAlignment="Center"
105+
AutomationProperties.AccessibilityView="Raw"
106+
FontFamily="{ThemeResource SymbolThemeFontFamily}"
107+
FontSize="{ThemeResource BreadcrumbBarChevronFontSize}"
108+
Foreground="{ThemeResource BreadcrumbBarNormalForegroundBrush}"
109+
IsTextScaleFactorEnabled="False"
110+
Text="&#xE76C;" />
111+
</Border>
99112

100113
<VisualStateManager.VisualStateGroups>
114+
115+
<VisualStateGroup x:Name="PointerStates">
116+
<VisualState x:Name="PointerNormal" />
117+
<VisualState x:Name="PointerOverItem">
118+
<VisualState.Setters>
119+
<Setter Target="PART_ItemButton.Background" Value="{ThemeResource ControlFillColorSecondaryBrush}" />
120+
<Setter Target="PART_ChevronButton.Background" Value="{ThemeResource ControlFillColorSecondaryBrush}" />
121+
</VisualState.Setters>
122+
</VisualState>
123+
<VisualState x:Name="PointerOverChevron">
124+
<VisualState.Setters>
125+
<Setter Target="PART_ChevronButton.Background" Value="{ThemeResource ControlFillColorSecondaryBrush}" />
126+
</VisualState.Setters>
127+
</VisualState>
128+
<VisualState x:Name="PointerPressedOnItem">
129+
<VisualState.Setters>
130+
<Setter Target="PART_ItemButton.Background" Value="{ThemeResource ControlFillColorTertiaryBrush}" />
131+
<Setter Target="PART_ChevronButton.Background" Value="{ThemeResource ControlFillColorTertiaryBrush}" />
132+
</VisualState.Setters>
133+
</VisualState>
134+
<VisualState x:Name="PointerPressedOnChevron">
135+
<VisualState.Setters>
136+
<Setter Target="PART_ChevronButton.Background" Value="{ThemeResource ControlFillColorTertiaryBrush}" />
137+
</VisualState.Setters>
138+
</VisualState>
139+
</VisualStateGroup>
140+
101141
<VisualStateGroup x:Name="ItemTypeStates">
102142
<VisualState x:Name="DefaultItemType" />
103143
<VisualState x:Name="LastItemType">
@@ -110,6 +150,7 @@
110150
</VisualState.Setters>
111151
</VisualState>-->
112152
</VisualStateGroup>
153+
113154
</VisualStateManager.VisualStateGroups>
114155
</Grid>
115156
</ControlTemplate>

‎src/Files.App.Controls/BreadcrumbBar/BreadcrumbBarItem.cs‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,60 @@ namespace Files.App.Controls
1414
{
1515
public sealed partial class BreadcrumbBarItem : ContentControl
1616
{
17+
// Constants
18+
19+
private const string _itemButtonName = "PART_ItemButton";
20+
private const string _chevronButtonName = "PART_ChevronButton";
21+
22+
// Fields
23+
24+
private Border _itemButton = null!;
25+
private Border _chevronButton = null!;
26+
27+
// Constructor
28+
1729
public BreadcrumbBarItem()
1830
{
1931
DefaultStyleKey = typeof(BreadcrumbBarItem);
2032
}
2133

34+
// Methods
35+
2236
protected override void OnApplyTemplate()
2337
{
38+
_itemButton = GetTemplateChild(_itemButtonName) as Border
39+
?? throw new MissingFieldException($"Could not find {_itemButtonName} in the given {nameof(BreadcrumbBarItem)}'s style.");
40+
_chevronButton = GetTemplateChild(_chevronButtonName) as Border
41+
?? throw new MissingFieldException($"Could not find {_chevronButtonName} in the given {nameof(BreadcrumbBarItem)}'s style.");
42+
43+
_itemButton.PointerEntered += BreadcrumbBarItem_PointerEntered;
44+
_itemButton.PointerPressed += BreadcrumbBarItem_PointerPressed;
45+
_itemButton.PointerReleased += BreadcrumbBarItem_PointerReleased;
46+
_itemButton.PointerExited += BreadcrumbBarItem_PointerExited;
47+
2448
base.OnApplyTemplate();
2549
}
50+
51+
// Event methods
52+
53+
private void BreadcrumbBarItem_PointerEntered(object sender, PointerRoutedEventArgs e)
54+
{
55+
VisualStateManager.GoToState(this, "PointerOverItem", true);
56+
}
57+
58+
private void BreadcrumbBarItem_PointerPressed(object sender, PointerRoutedEventArgs e)
59+
{
60+
VisualStateManager.GoToState(this, "PointerPressedOnItem", true);
61+
}
62+
63+
private void BreadcrumbBarItem_PointerReleased(object sender, PointerRoutedEventArgs e)
64+
{
65+
VisualStateManager.GoToState(this, "PointerOverItem", true);
66+
}
67+
68+
private void BreadcrumbBarItem_PointerExited(object sender, PointerRoutedEventArgs e)
69+
{
70+
VisualStateManager.GoToState(this, "PointerNormal", true);
71+
}
2672
}
2773
}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,13 @@
1515
<controls:SamplePanel Header="Default usage">
1616
<controls:SamplePanel.MainContent>
1717
<StackPanel
18+
Height="36"
19+
Padding="16,2"
1820
HorizontalAlignment="Left"
1921
VerticalAlignment="Top"
20-
Background="Black">
22+
Background="{ThemeResource ControlFillColorDefaultBrush}"
23+
BorderBrush="{ThemeResource CircleElevationBorderBrush}"
24+
CornerRadius="18">
2125
<controls:BreadcrumbBar ItemsSource="{x:Bind DummyItems2, Mode=OneWay}">
2226
<controls:BreadcrumbBar.ItemTemplate>
2327
<DataTemplate x:DataType="data:DummyItem2">

0 commit comments

Comments
 (0)