Skip to content

Commit 7a70f13

Browse files
felixsefelixse
authored
Dev/winui26 (#950)
* wip * improve tabview styling * fix titlebar alignment
1 parent 35c1f2d commit 7a70f13

File tree

3 files changed

+32
-64
lines changed

3 files changed

+32
-64
lines changed

‎FluentTerminal.App/Styles/Custom.xaml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@
2121
<Setter Property="FontWeight" Value="Normal" />
2222
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
2323
<Setter Property="UseSystemFocusVisuals" Value="True" />
24-
<Setter Property="Width" Value="47" />
24+
<Setter Property="CornerRadius" Value="4" />
2525
<Setter Property="Height" Value="32" />
2626
<Setter Property="Template">
2727
<Setter.Value>
2828
<ControlTemplate TargetType="Button">
29-
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
29+
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}">
3030
<ContentPresenter
3131
x:Name="ContentPresenter"
3232
Padding="{TemplateBinding Padding}"
@@ -78,12 +78,12 @@
7878
<Setter Property="FontWeight" Value="Normal" />
7979
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
8080
<Setter Property="UseSystemFocusVisuals" Value="True" />
81-
<Setter Property="Width" Value="47" />
81+
<Setter Property="CornerRadius" Value="4" />
8282
<Setter Property="Height" Value="32" />
8383
<Setter Property="Template">
8484
<Setter.Value>
8585
<ControlTemplate TargetType="RepeatButton">
86-
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
86+
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}">
8787
<ContentPresenter
8888
x:Name="ContentPresenter"
8989
Padding="{TemplateBinding Padding}"

‎FluentTerminal.App/Views/MainPage.xaml‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@
3333
<Rectangle x:Name="TitleBar" Fill="Transparent" />
3434
<Grid
3535
x:Name="TitleBarContents"
36-
Height="{Binding CoreTitleBarHeight, Mode=OneWay}"
36+
Height="42"
3737
Margin="{Binding CoreTitleBarPadding, Mode=OneWay}">
3838
<Grid.ColumnDefinitions>
3939
<ColumnDefinition Width="Auto" />
4040
<ColumnDefinition Width="*" />
4141
</Grid.ColumnDefinitions>
42-
<Button Flyout="{x:Bind ViewModel.AppMenuViewModel, Mode=OneWay, Converter={StaticResource MenuViewModelToFlyoutMenuConverter}}" Style="{StaticResource TitleBarButtonStyle}">
42+
<Button Margin="6 0 0 0" Flyout="{x:Bind ViewModel.AppMenuViewModel, Mode=OneWay, Converter={StaticResource MenuViewModelToFlyoutMenuConverter}}" Style="{StaticResource TitleBarButtonStyle}">
4343
<Button.Content>
4444
<Viewbox Width="16" Height="16">
4545
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE700;" />
@@ -48,7 +48,8 @@
4848
</Button>
4949
<TextBlock
5050
Grid.Column="1"
51-
Margin="12,8,12,0"
51+
Margin="12,0,12,0"
52+
VerticalAlignment="Center"
5253
IsHitTestVisible="False"
5354
Style="{StaticResource CaptionTextBlockStyle}"
5455
Text="{x:Bind ViewModel.WindowTitle, Mode=OneWay}"
@@ -99,8 +100,10 @@
99100
Opacity="0.2"
100101
Visibility="{x:Bind DraggingHappensFromAnotherWindow, Mode=TwoWay, Converter={StaticResource TrueToVisibleConverter}}" />
101102
<views:TabBar
103+
Height="42"
102104
x:Name="BottomTabBar"
103105
Grid.Row="2"
106+
Margin="0 0 4 0"
104107
HorizontalAlignment="Left"
105108
AddCommand="{x:Bind ViewModel.AddDefaultTabCommand}"
106109
ItemsSource="{x:Bind ViewModel.Terminals, Mode=OneWay}"

‎FluentTerminal.App/Views/TabBar.xaml‎

Lines changed: 22 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
mc:Ignorable="d">
1616

1717
<Grid>
18+
<Grid.Resources>
19+
<x:Double x:Key="ListViewItemSelectedBorderThemeThickness">0</x:Double>
20+
<x:Double x:Key="ListViewItemCompactSelectedBorderThemeThickness">0</x:Double>
21+
</Grid.Resources>
1822
<Grid.ColumnDefinitions>
1923
<ColumnDefinition Width="Auto" />
2024
<ColumnDefinition Width="*" />
@@ -25,7 +29,7 @@
2529
x:Name="ScrollLeftButton"
2630
Grid.Column="0"
2731
Width="24"
28-
Padding="0,0,0,0"
32+
Padding="0,0,4,0"
2933
Click="OnScrollLeftButtonTapped"
3034
Style="{StaticResource TitleBarRepeatButtonStyle}"
3135
Tapped="OnScrollLeftButtonTapped"
@@ -45,6 +49,7 @@
4549
VerticalScrollBarVisibility="Hidden"
4650
VerticalScrollMode="Disabled">
4751
<ListView
52+
Margin="0"
4853
x:Name="ListView"
4954
AllowDrop="True"
5055
Background="Transparent"
@@ -66,7 +71,9 @@
6671
Hovered="{x:Bind IsHovered, Mode=TwoWay}">
6772
<RelativePanel
6873
Height="32"
69-
Margin="0"
74+
Margin="4 2 4 2"
75+
Padding="0"
76+
CornerRadius="4"
7077
Background="Transparent"
7178
ContextFlyout="{x:Bind TabContextMenu, Converter={StaticResource MenuViewModelToFlyoutMenuConverter}, Mode=OneWay}"
7279
ToolTipService.ToolTip="{x:Bind TabTitle, Mode=OneWay}">
@@ -110,8 +117,8 @@
110117
Text="{x:Bind TabTitle, Mode=OneWay, Converter={StaticResource TextMiddleEllipsisConverter}}"
111118
TextWrapping="NoWrap" />
112119
<Grid
120+
Margin="0"
113121
x:Name="CloseButton"
114-
Width="32"
115122
RelativePanel.AlignRightWithPanel="True">
116123
<Button
117124
Width="32"
@@ -145,6 +152,7 @@
145152
<Setter Property="MaxWidth" Value="200" />
146153
<Setter Property="MinHeight" Value="32" />
147154
<Setter Property="Padding" Value="0" />
155+
<Setter Property="Margin" Value="0" />
148156
<Setter Property="views:TabBarBackgroundBindingHelper.BackgroundBindingPath" Value="BackgroundTabTheme" />
149157
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
150158
<Setter Property="VerticalContentAlignment" Value="Stretch" />
@@ -154,17 +162,19 @@
154162
<Setter Property="TabNavigation" Value="Local" />
155163
<Setter Property="IsHoldingEnabled" Value="True" />
156164
<Setter Property="AllowDrop" Value="True" />
157-
<Setter Property="UseSystemFocusVisuals" Value="True" />
165+
<Setter Property="UseSystemFocusVisuals" Value="False" />
158166
<Setter Property="FocusVisualMargin" Value="0" />
159167
<Setter Property="FocusVisualPrimaryBrush" Value="{ThemeResource ListViewItemFocusVisualPrimaryBrush}" />
160-
<Setter Property="FocusVisualPrimaryThickness" Value="2" />
168+
<Setter Property="FocusVisualPrimaryThickness" Value="0" />
161169
<Setter Property="FocusVisualSecondaryBrush" Value="{ThemeResource ListViewItemFocusVisualSecondaryBrush}" />
162-
<Setter Property="FocusVisualSecondaryThickness" Value="1" />
170+
<Setter Property="FocusVisualSecondaryThickness" Value="0" />
163171
<Setter Property="Template">
164172
<Setter.Value>
165173
<ControlTemplate TargetType="ListViewItem">
166174
<ListViewItemPresenter
167175
x:Name="Root"
176+
CornerRadius="4"
177+
Height="36"
168178
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
169179
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
170180
CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
@@ -181,68 +191,23 @@
181191
FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
182192
FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
183193
FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}"
184-
FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}"
194+
FocusVisualPrimaryThickness="0"
185195
FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}"
186-
FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}"
196+
FocusVisualSecondaryThickness="0"
187197
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
188198
PointerOverBackground="{Binding TabTheme, Mode=OneWay, Converter={StaticResource TabColorFallbackConverter}, ConverterParameter=BackgroundPointerOver}"
189199
PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
190200
PressedBackground="{Binding TabTheme, Mode=OneWay, Converter={StaticResource TabColorFallbackConverter}, ConverterParameter=BackgroundPressed}"
191201
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
192202
RevealBackground="{ThemeResource ListViewItemRevealBackground}"
193203
RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}"
194-
RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
204+
RevealBorderThickness="0"
195205
SelectedBackground="{Binding TabTheme, Mode=OneWay, Converter={StaticResource TabColorFallbackConverter}, ConverterParameter=BackgroundSelected}"
196206
SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
197207
SelectedPointerOverBackground="{Binding TabTheme, Mode=OneWay, Converter={StaticResource TabColorFallbackConverter}, ConverterParameter=BackgroundSelectedPointerOver}"
198208
SelectedPressedBackground="{Binding TabTheme, Mode=OneWay, Converter={StaticResource TabColorFallbackConverter}, ConverterParameter=BackgroundSelectedPressed}"
199-
SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}">
200-
<VisualStateManager.VisualStateGroups>
201-
<VisualStateGroup x:Name="CommonStates">
202-
<VisualState x:Name="Normal" />
203-
<VisualState x:Name="Selected" />
204-
205-
<VisualState x:Name="PointerOver">
206-
<VisualState.Setters>
207-
<Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
208-
</VisualState.Setters>
209-
</VisualState>
210-
211-
<VisualState x:Name="PointerOverSelected">
212-
<VisualState.Setters>
213-
<Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
214-
</VisualState.Setters>
215-
</VisualState>
216-
<VisualState x:Name="PointerOverPressed">
217-
<VisualState.Setters>
218-
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
219-
</VisualState.Setters>
220-
</VisualState>
221-
222-
<VisualState x:Name="Pressed">
223-
<VisualState.Setters>
224-
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
225-
</VisualState.Setters>
226-
</VisualState>
227-
228-
<VisualState x:Name="PressedSelected">
229-
<VisualState.Setters>
230-
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
231-
</VisualState.Setters>
232-
</VisualState>
233-
</VisualStateGroup>
234-
235-
<VisualStateGroup x:Name="DisabledStates">
236-
<VisualState x:Name="Enabled" />
237-
238-
<VisualState x:Name="Disabled">
239-
<VisualState.Setters>
240-
<Setter Target="Root.RevealBorderThickness" Value="0" />
241-
</VisualState.Setters>
242-
</VisualState>
243-
</VisualStateGroup>
244-
245-
</VisualStateManager.VisualStateGroups>
209+
SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
210+
PointerOverBackgroundMargin="0">
246211
</ListViewItemPresenter>
247212
</ControlTemplate>
248213
</Setter.Value>
@@ -260,7 +225,7 @@
260225
x:Name="ScrollRightButton"
261226
Grid.Column="2"
262227
Width="24"
263-
Padding="0,0,0,0"
228+
Padding="4,0,0,0"
264229
Click="OnScrollRightButtonTapped"
265230
Style="{StaticResource TitleBarRepeatButtonStyle}"
266231
Tapped="OnScrollRightButtonTapped"

0 commit comments

Comments
 (0)