Skip to content

Commit 9803e37

Browse files
authored
Adding style for Frame in fluent (#10577)
* Adding style for Frame in fluent and also adding control brushes for the same * Addressing PR comments * Addressing PR comments 2.0 * Addressing PR review 3.0 * Changing x:Key for NavigationButton MenuItem Style
1 parent 1472dd5 commit 9803e37

File tree

7 files changed

+660
-22
lines changed

7 files changed

+660
-22
lines changed

src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Theme/Dark.xaml

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -479,6 +479,14 @@
479479
<SolidColorBrush x:Key="FlyoutBackground" Color="{StaticResource AcrylicBackgroundFillColorDefault}" />
480480
<SolidColorBrush x:Key="FlyoutBorderBrush" Color="{StaticResource SurfaceStrokeColorFlyout}" />
481481

482+
<!-- Frame -->
483+
<SolidColorBrush x:Key="FrameBackground" Color="Transparent" />
484+
<SolidColorBrush x:Key="FrameForeground" Color="{StaticResource TextFillColorPrimary}" />
485+
<SolidColorBrush x:Key="FrameMenuItemBackground" Color="Transparent" />
486+
<SolidColorBrush x:Key="FrameMenuItemBorderBrush" Color="Transparent" />
487+
<SolidColorBrush x:Key="FrameMenuItemBackgroundSelected" Color="{StaticResource SubtleFillColorTertiary}" />
488+
<SolidColorBrush x:Key="FrameMenuItemForegroundDisabled" Color="{StaticResource TextFillColorDisabled}" />
489+
482490
<!-- GridSplitter -->
483491
<SolidColorBrush x:Key="GridsplitterBackground" Color="{StaticResource ControlAltFillColorTransparent}" />
484492
<SolidColorBrush x:Key="GridsplitterBackgroundPointerOver" Color="{StaticResource ControlAltFillColorTertiary}" />

src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Theme/HC.xaml

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -350,6 +350,14 @@
350350
<SolidColorBrush x:Key="FlyoutBackground" Color="{StaticResource SystemColorWindowColor}" />
351351
<SolidColorBrush x:Key="FlyoutBorderBrush" Color="{StaticResource SystemColorWindowTextColor}" />
352352

353+
<!-- Frame -->
354+
<SolidColorBrush x:Key="FrameBackground" Color="Transparent" />
355+
<SolidColorBrush x:Key="FrameForeground" Color="{StaticResource SystemColorWindowTextColor}" />
356+
<SolidColorBrush x:Key="FrameMenuItemBackground" Color="Transparent" />
357+
<SolidColorBrush x:Key="FrameMenuItemBorderBrush" Color="Transparent" />
358+
<SolidColorBrush x:Key="FrameMenuItemBackgroundSelected" Color="{StaticResource SystemColorButtonFaceColor}" />
359+
<SolidColorBrush x:Key="FrameMenuItemForegroundDisabled" Color="{StaticResource SystemColorGrayTextColor}" />
360+
353361
<!-- GridSplitter -->
354362
<SolidColorBrush x:Key="GridsplitterBackground" Color="Transparent" />
355363
<SolidColorBrush x:Key="GridsplitterBackgroundPointerOver" Color="{StaticResource SystemColorHighlightTextColor}" />

src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Theme/Light.xaml

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -481,7 +481,15 @@
481481
<!-- Flyout -->
482482
<SolidColorBrush x:Key="FlyoutBackground" Color="{StaticResource AcrylicBackgroundFillColorDefault}" />
483483
<SolidColorBrush x:Key="FlyoutBorderBrush" Color="{StaticResource SurfaceStrokeColorFlyout}" />
484-
484+
485+
<!-- Frame -->
486+
<SolidColorBrush x:Key="FrameBackground" Color="Transparent" />
487+
<SolidColorBrush x:Key="FrameForeground" Color="{StaticResource TextFillColorPrimary}" />
488+
<SolidColorBrush x:Key="FrameMenuItemBackground" Color="Transparent" />
489+
<SolidColorBrush x:Key="FrameMenuItemBorderBrush" Color="Transparent" />
490+
<SolidColorBrush x:Key="FrameMenuItemBackgroundSelected" Color="{StaticResource SubtleFillColorTertiary}" />
491+
<SolidColorBrush x:Key="FrameMenuItemForegroundDisabled" Color="{StaticResource TextFillColorDisabled}" />
492+
485493
<!-- GridSplitter -->
486494
<SolidColorBrush x:Key="GridsplitterBackground" Color="{StaticResource ControlAltFillColorTransparent}" />
487495
<SolidColorBrush x:Key="GridsplitterBackgroundPointerOver" Color="{StaticResource ControlAltFillColorTertiary}" />

src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Styles/Frame.xaml

Lines changed: 194 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,203 @@
55
All Rights Reserved.
66
-->
77

8-
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
8+
<ResourceDictionary
9+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
10+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
11+
xmlns:system="clr-namespace:System;assembly=System.Runtime"
12+
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=PresentationFramework">
913

10-
<Style TargetType="{x:Type Frame}">
11-
<Setter Property="Background" Value="Transparent" />
12-
<Setter Property="NavigationUIVisibility" Value="Hidden" />
13-
<Setter Property="Padding" Value="0" />
14-
<Setter Property="Margin" Value="0" />
14+
<JournalEntryUnifiedViewConverter x:Key="JournalEntryUnifiedViewConverter"/>
15+
<Thickness x:Key="FrameMenuItemBorderThickness">1</Thickness>
16+
<Thickness x:Key="FramePadding">0</Thickness>
17+
<system:String x:Key="FrameMenuItemChevronDownGlyph">&#xE70D;</system:String>
18+
<system:String x:Key="FrameMenuItemArrowLeftGlyph">&#xE72B;</system:String>
19+
<system:String x:Key="FrameMenuItemArrowRightGlyph">&#xE72A;</system:String>
20+
<system:String x:Key="FrameMenuiItemCurrentGlyph">&#xE915;</system:String>
21+
22+
<Style x:Key="FrameNavigationButtonJournalEntryStyle" TargetType="{x:Type MenuItem}">
23+
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
24+
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
25+
<Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultCollectionFocusVisualStyle}" />
26+
<Setter Property="KeyboardNavigation.IsTabStop" Value="True" />
27+
<Setter Property="Background" Value="{DynamicResource FrameMenuItemBackground}" />
28+
<Setter Property="BorderBrush" Value="{DynamicResource FrameMenuItemBorderBrush}" />
29+
<Setter Property="BorderThickness" Value="{StaticResource FrameMenuItemBorderThickness}" />
30+
<Setter Property="Focusable" Value="True" />
31+
<Setter Property="OverridesDefaultStyle" Value="True" />
32+
<Setter Property="Header" Value="{Binding Path=(JournalEntry.Name)}"/>
33+
<Setter Property="Command" Value="NavigationCommands.NavigateJournal"/>
34+
<Setter Property="CommandTarget" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type Menu}}, Path=TemplatedParent}"/>
35+
<Setter Property="CommandParameter" Value="{Binding RelativeSource={RelativeSource Self}}"/>
36+
<Setter Property="JournalEntryUnifiedViewConverter.JournalEntryPosition" Value="{Binding (JournalEntryUnifiedViewConverter.JournalEntryPosition)}"/>
37+
<Setter Property="Template">
38+
<Setter.Value>
39+
<ControlTemplate TargetType="{x:Type MenuItem}">
40+
<Border
41+
x:Name="Border"
42+
Margin="4"
43+
BorderThickness="{TemplateBinding BorderThickness}"
44+
Background="{TemplateBinding Background}"
45+
BorderBrush="{TemplateBinding BorderBrush}">
46+
<Grid Margin="8">
47+
<Grid.ColumnDefinitions>
48+
<ColumnDefinition Width="Auto" />
49+
<ColumnDefinition Width="*" />
50+
</Grid.ColumnDefinitions>
51+
<ContentPresenter
52+
x:Name="Icon"
53+
Grid.Column="0"
54+
Margin="0,0,8,0"
55+
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
56+
VerticalAlignment="Center"
57+
Content="{TemplateBinding Icon}"/>
58+
<ContentPresenter
59+
x:Name="HeaderPresenter"
60+
Grid.Column="1"
61+
VerticalAlignment="Center"
62+
ContentSource="Header"
63+
Margin="{TemplateBinding Padding}"
64+
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
65+
RecognizesAccessKey="True"
66+
TextElement.Foreground="{TemplateBinding Foreground}" />
67+
</Grid>
68+
</Border>
69+
<ControlTemplate.Triggers>
70+
<Trigger Property="IsHighlighted" Value="True">
71+
<Setter TargetName="Border" Property="Background" Value="{DynamicResource FrameMenuItemBackgroundSelected}" />
72+
</Trigger>
73+
<Trigger Property="Header" Value="{x:Null}">
74+
<Setter TargetName="Icon" Property="Margin" Value="0" />
75+
<Setter TargetName="HeaderPresenter" Property="Visibility" Value="Collapsed" />
76+
</Trigger>
77+
<Trigger Property="JournalEntryUnifiedViewConverter.JournalEntryPosition" Value="Current">
78+
<Setter TargetName="Icon" Property="Content">
79+
<Setter.Value>
80+
<TextBlock Text="{StaticResource FrameMenuiItemCurrentGlyph}" FontFamily="{DynamicResource SymbolThemeFontFamily}" />
81+
</Setter.Value>
82+
</Setter>
83+
</Trigger>
84+
<MultiTrigger>
85+
<MultiTrigger.Conditions>
86+
<Condition Property="MenuItem.IsHighlighted" Value="True"/>
87+
<Condition Property="JournalEntryUnifiedViewConverter.JournalEntryPosition" Value="Forward"/>
88+
</MultiTrigger.Conditions>
89+
<Setter TargetName="Icon" Property="Content">
90+
<Setter.Value>
91+
<TextBlock Text="{StaticResource FrameMenuItemArrowRightGlyph}" FontFamily="{DynamicResource SymbolThemeFontFamily}" />
92+
</Setter.Value>
93+
</Setter>
94+
</MultiTrigger>
95+
<MultiTrigger>
96+
<MultiTrigger.Conditions>
97+
<Condition Property="MenuItem.IsHighlighted" Value="True"/>
98+
<Condition Property="JournalEntryUnifiedViewConverter.JournalEntryPosition" Value="Back"/>
99+
</MultiTrigger.Conditions>
100+
<Setter TargetName="Icon" Property="Content">
101+
<Setter.Value>
102+
<TextBlock Text="{StaticResource FrameMenuItemArrowLeftGlyph}" FontFamily="{DynamicResource SymbolThemeFontFamily}" />
103+
</Setter.Value>
104+
</Setter>
105+
</MultiTrigger>
106+
<Trigger Property="IsEnabled" Value="False">
107+
<Setter TargetName="Icon" Property="TextElement.Foreground" Value="{DynamicResource FrameMenuItemForegroundDisabled}"/>
108+
</Trigger>
109+
</ControlTemplate.Triggers>
110+
</ControlTemplate>
111+
</Setter.Value>
112+
</Setter>
113+
</Style>
114+
115+
<ControlTemplate x:Key="FrameTemplateKey" TargetType="{x:Type Frame}">
116+
<Border
117+
Background="{TemplateBinding Background}"
118+
BorderBrush="{TemplateBinding BorderBrush}"
119+
BorderThickness="{TemplateBinding BorderThickness}">
120+
<DockPanel>
121+
<Menu
122+
Name="NavMenu"
123+
VerticalAlignment="Center"
124+
DockPanel.Dock="Top">
125+
<MenuItem
126+
Background="Transparent"
127+
BorderBrush="Transparent"
128+
Command="NavigationCommands.BrowseBack"
129+
FontFamily="{DynamicResource SymbolThemeFontFamily}"
130+
Header ="{StaticResource FrameMenuItemArrowLeftGlyph}"/>
131+
<MenuItem
132+
Background="Transparent"
133+
BorderBrush="Transparent"
134+
Command="NavigationCommands.BrowseForward"
135+
FontFamily="{DynamicResource SymbolThemeFontFamily}"
136+
Header ="{StaticResource FrameMenuItemArrowRightGlyph}"/>
137+
<Separator/>
138+
<MenuItem
139+
x:Name="Arrow"
140+
SnapsToDevicePixels="False"
141+
HorizontalAlignment="Right"
142+
VerticalAlignment="Center"
143+
ItemContainerStyle="{StaticResource FrameNavigationButtonJournalEntryStyle}"
144+
IsSubmenuOpen="{Binding Path=(MenuItem.IsSubmenuOpen),Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" >
145+
<MenuItem.Icon>
146+
<TextBlock FontFamily="{DynamicResource SymbolThemeFontFamily}" Text="{StaticResource FrameMenuItemChevronDownGlyph}" />
147+
</MenuItem.Icon>
148+
<MenuItem.ItemsSource>
149+
<MultiBinding Converter="{StaticResource JournalEntryUnifiedViewConverter}">
150+
<MultiBinding.Bindings>
151+
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="BackStack" />
152+
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="ForwardStack" />
153+
</MultiBinding.Bindings>
154+
</MultiBinding>
155+
</MenuItem.ItemsSource>
156+
</MenuItem>
157+
</Menu>
158+
<ContentPresenter Name="PART_FrameCP" ClipToBounds="True"/>
159+
</DockPanel>
160+
</Border>
161+
<ControlTemplate.Triggers>
162+
<MultiTrigger>
163+
<MultiTrigger.Conditions>
164+
<Condition Property="CanGoForward" Value="False"/>
165+
<Condition Property="CanGoBack" Value="False"/>
166+
</MultiTrigger.Conditions>
167+
<Setter TargetName="NavMenu" Property="IsEnabled" Value="False"/>
168+
</MultiTrigger>
169+
</ControlTemplate.Triggers>
170+
</ControlTemplate>
171+
172+
<Style x:Key="DefaultFrameStyle" TargetType="{x:Type Frame}">
173+
<Setter Property="Foreground" Value="{DynamicResource FrameForeground}"/>
174+
<Setter Property="Background" Value="{DynamicResource FrameBackground}"/>
175+
<Setter Property="Padding" Value="{DynamicResource FramePadding}" />
15176
<Setter Property="Focusable" Value="False" />
16177
<Setter Property="SnapsToDevicePixels" Value="True" />
178+
<Setter Property="Template">
179+
<Setter.Value>
180+
<ControlTemplate TargetType="{x:Type Frame}">
181+
<Border
182+
Background="{TemplateBinding Background}"
183+
BorderBrush="{TemplateBinding BorderBrush}"
184+
BorderThickness="{TemplateBinding BorderThickness}"
185+
Padding="{TemplateBinding Padding}">
186+
<ContentPresenter x:Name="PART_FrameCP"/>
187+
</Border>
188+
</ControlTemplate>
189+
</Setter.Value>
190+
</Setter>
191+
<Style.Triggers>
192+
<Trigger Property="NavigationUIVisibility" Value="Visible">
193+
<Setter Property="Template" Value="{StaticResource FrameTemplateKey}"/>
194+
</Trigger>
195+
<MultiTrigger>
196+
<MultiTrigger.Conditions>
197+
<Condition Property="JournalOwnership" Value="OwnsJournal"/>
198+
<Condition Property="NavigationUIVisibility" Value="Automatic"/>
199+
</MultiTrigger.Conditions>
200+
<Setter Property="Template" Value="{StaticResource FrameTemplateKey}"/>
201+
</MultiTrigger>
202+
</Style.Triggers>
17203
</Style>
18204

205+
<Style BasedOn="{StaticResource DefaultFrameStyle}" TargetType="{x:Type Frame}"/>
206+
19207
</ResourceDictionary>

0 commit comments

Comments
 (0)