Skip to content

Commit

Permalink
Switch WinUI to the Windows 11 styles (#12241)
Browse files Browse the repository at this point in the history
  • Loading branch information
@PankajBhojwani
PankajBhojwani authored Jan 27, 2022
1 parent 1e47d7a commit a13b207
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 21 deletions.
2 changes: 1 addition & 1 deletion src/cascadia/TerminalApp/App.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<ResourceDictionary.MergedDictionaries>
<!-- Include the MUX Controls resources -->
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"
ControlsResourcesVersion="Version1" />
ControlsResourcesVersion="Version2" />
<ResourceDictionary>

<!--
Expand Down
3 changes: 2 additions & 1 deletion src/cascadia/TerminalApp/TerminalPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
Grid.Row="0"
KeyUp="_KeyDownHandler" />

<StackPanel Grid.Row="1">
<StackPanel Grid.Row="1"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<mux:InfoBar x:Name="KeyboardServiceWarningInfoBar"
x:Load="False"
IsClosable="True"
Expand Down
45 changes: 27 additions & 18 deletions src/cascadia/TerminalSettingsEditor/Appearances.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,13 +278,14 @@
x:Uid="Profile_BackgroundImageAlignmentTopLeft"

This comment has been minimized.

Sign in to view

Copy link
@piusayowale

piusayowale Feb 4, 2022

src/cascadia/TerminalSettingsEditor/Appearances.xaml
Grid.Row="0"
Grid.Column="0"
Click="BIAlignment_Click">
Click="BIAlignment_Click"
Style="{StaticResource BIAlignmentToggleButtonStyle}">
<ToggleButton.Tag>
<!-- ConvergedAlignment: Vertical_Top (0x10) | Horizontal_Left (0x01) -->
<x:Int32>17</x:Int32>
</ToggleButton.Tag>
<ToggleButton.Content>
<FontIcon FontFamily="Segoe MDL2 Assets"
<FontIcon FontFamily="Segoe Fluent Icons"
Glyph="&#xE744;"
RenderTransformOrigin="0.5,0.5">
<FontIcon.RenderTransform>
Expand All @@ -297,13 +298,14 @@
x:Uid="Profile_BackgroundImageAlignmentTop"
Grid.Row="0"
Grid.Column="1"
Click="BIAlignment_Click">
Click="BIAlignment_Click"
Style="{StaticResource BIAlignmentToggleButtonStyle}">
<ToggleButton.Tag>
<!-- ConvergedAlignment: Vertical_Top (0x10) | Horizontal_Center (0x00) -->
<x:Int32>16</x:Int32>
</ToggleButton.Tag>
<ToggleButton.Content>
<FontIcon FontFamily="Segoe MDL2 Assets"
<FontIcon FontFamily="Segoe Fluent Icons"
Glyph="&#xE745;"
RenderTransformOrigin="0.5,0.5">
<FontIcon.RenderTransform>
Expand All @@ -316,13 +318,14 @@
x:Uid="Profile_BackgroundImageAlignmentTopRight"
Grid.Row="0"
Grid.Column="2"
Click="BIAlignment_Click">
Click="BIAlignment_Click"
Style="{StaticResource BIAlignmentToggleButtonStyle}">
<ToggleButton.Tag>
<!-- ConvergedAlignment: Vertical_Top (0x10) | Horizontal_Right (0x02) -->
<x:Int32>18</x:Int32>
</ToggleButton.Tag>
<ToggleButton.Content>
<FontIcon FontFamily="Segoe MDL2 Assets"
<FontIcon FontFamily="Segoe Fluent Icons"
Glyph="&#xEA5F;"
RenderTransformOrigin="0.5,0.5">
<FontIcon.RenderTransform>
Expand All @@ -337,41 +340,44 @@
x:Uid="Profile_BackgroundImageAlignmentLeft"
Grid.Row="1"
Grid.Column="0"
Click="BIAlignment_Click">
Click="BIAlignment_Click"
Style="{StaticResource BIAlignmentToggleButtonStyle}">
<ToggleButton.Tag>
<!-- ConvergedAlignment: Vertical_Center (0x00) | Horizontal_Left (0x01) -->
<x:Int32>1</x:Int32>
</ToggleButton.Tag>
<ToggleButton.Content>
<FontIcon FontFamily="Segoe MDL2 Assets"
<FontIcon FontFamily="Segoe Fluent Icons"
Glyph="&#xE746;" />
</ToggleButton.Content>
</ToggleButton>
<ToggleButton x:Name="BIAlign_Center"
x:Uid="Profile_BackgroundImageAlignmentCenter"
Grid.Row="1"
Grid.Column="1"
Click="BIAlignment_Click">
Click="BIAlignment_Click"
Style="{StaticResource BIAlignmentToggleButtonStyle}">
<ToggleButton.Tag>
<!-- ConvergedAlignment: Vertical_Center (0x00) | Horizontal_Center (0x00) -->
<x:Int32>0</x:Int32>
</ToggleButton.Tag>
<ToggleButton.Content>
<FontIcon FontFamily="Segoe MDL2 Assets"
<FontIcon FontFamily="Segoe Fluent Icons"
Glyph="&#xF16E;" />
</ToggleButton.Content>
</ToggleButton>
<ToggleButton x:Name="BIAlign_Right"
x:Uid="Profile_BackgroundImageAlignmentRight"
Grid.Row="1"
Grid.Column="2"
Click="BIAlignment_Click">
Click="BIAlignment_Click"
Style="{StaticResource BIAlignmentToggleButtonStyle}">
<ToggleButton.Tag>
<!-- ConvergedAlignment: Vertical_Center (0x00) | Horizontal_Right (0x02) -->
<x:Int32>2</x:Int32>
</ToggleButton.Tag>
<ToggleButton.Content>
<FontIcon FontFamily="Segoe MDL2 Assets"
<FontIcon FontFamily="Segoe Fluent Icons"
Glyph="&#xEA61;" />
</ToggleButton.Content>
</ToggleButton>
Expand All @@ -381,41 +387,44 @@
x:Uid="Profile_BackgroundImageAlignmentBottomLeft"
Grid.Row="2"
Grid.Column="0"
Click="BIAlignment_Click">
Click="BIAlignment_Click"
Style="{StaticResource BIAlignmentToggleButtonStyle}">
<ToggleButton.Tag>
<!-- ConvergedAlignment: Vertical_Bottom (0x20) | Horizontal_Left (0x01) -->
<x:Int32>33</x:Int32>
</ToggleButton.Tag>
<ToggleButton.Content>
<FontIcon FontFamily="Segoe MDL2 Assets"
<FontIcon FontFamily="Segoe Fluent Icons"
Glyph="&#xE744;" />
</ToggleButton.Content>
</ToggleButton>
<ToggleButton x:Name="BIAlign_Bottom"
x:Uid="Profile_BackgroundImageAlignmentBottom"
Grid.Row="2"
Grid.Column="1"
Click="BIAlignment_Click">
Click="BIAlignment_Click"
Style="{StaticResource BIAlignmentToggleButtonStyle}">
<ToggleButton.Tag>
<!-- ConvergedAlignment: Vertical_Bottom (0x20) | Horizontal_Center (0x00) -->
<x:Int32>32</x:Int32>
</ToggleButton.Tag>
<ToggleButton.Content>
<FontIcon FontFamily="Segoe MDL2 Assets"
<FontIcon FontFamily="Segoe Fluent Icons"
Glyph="&#xE745;" />
</ToggleButton.Content>
</ToggleButton>
<ToggleButton x:Name="BIAlign_BottomRight"
x:Uid="Profile_BackgroundImageAlignmentBottomRight"
Grid.Row="2"
Grid.Column="2"
Click="BIAlignment_Click">
Click="BIAlignment_Click"
Style="{StaticResource BIAlignmentToggleButtonStyle}">
<ToggleButton.Tag>
<!-- ConvergedAlignment: Vertical_Top (0x20) | Horizontal_Right (0x02) -->
<x:Int32>34</x:Int32>
</ToggleButton.Tag>
<ToggleButton.Content>
<FontIcon FontFamily="Segoe MDL2 Assets"
<FontIcon FontFamily="Segoe Fluent Icons"
Glyph="&#xEA5F;" />
</ToggleButton.Content>
</ToggleButton>
Expand Down
9 changes: 9 additions & 0 deletions src/cascadia/TerminalSettingsEditor/CommonResources.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@
TargetType="Button">
<Setter Property="Height" Value="33" />
<Setter Property="Width" Value="33" />
<Setter Property="Padding" Value="5" />
</Style>

<Style x:Key="AccentBrowseButtonStyle"
Expand All @@ -138,13 +139,21 @@
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="Height" Value="33" />
<Setter Property="Width" Value="33" />
<Setter Property="Padding" Value="5" />
</Style>

<Style x:Key="IconButtonTextBlockStyle"
TargetType="TextBlock">
<Setter Property="Margin" Value="10,0,0,0" />
</Style>

<Style x:Key="BIAlignmentToggleButtonStyle"
TargetType="ToggleButton">
<Setter Property="Width" Value="40" />
<Setter Property="Height" Value="40" />
<Setter Property="Padding" Value="8" />
</Style>

<!-- Slider-Related Styling -->
<Style x:Key="SliderValueLabelStyle"
TargetType="TextBlock">
Expand Down
2 changes: 1 addition & 1 deletion src/cascadia/TerminalSettingsEditor/Profiles.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@
SettingOverrideSource="{x:Bind Profile.IconOverrideSource, Mode=OneWay}">
<StackPanel Orientation="Horizontal">
<TextBox x:Uid="Profile_IconBox"
FontFamily="Segoe UI, Segoe MDL2 Assets"
FontFamily="Segoe UI, Segoe Fluent Icons"
IsSpellCheckEnabled="False"
Style="{StaticResource TextBoxSettingStyle}"
Text="{x:Bind Profile.Icon, Mode=TwoWay}" />
Expand Down

0 comments on commit a13b207

Please sign in to comment.