Skip to content

Commit cbfd7cc

Browse files
siagupta0202siagupta0202
authored
Making RichTextBox style on parity with WinUI (#9550)
* Bringing RichTextBox on parity with WinUI * removing focus visual from RichTextBox and templatebinding horizontal and vertical alignment * Adding border thickness to accent border
1 parent e7ddcf4 commit cbfd7cc

File tree

4 files changed

+75
-36
lines changed

4 files changed

+75
-36
lines changed

‎src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Styles/RichTextBox.xaml

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,18 @@
99
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
1010
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
1111

12+
<Thickness x:Key="RichTextBoxAccentBorderThemeThickness">0,0,0,1</Thickness>
13+
1214
<Style x:Key="DefaultRichTextBoxStyle" TargetType="{x:Type RichTextBox}">
1315
<Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
1416
<Setter Property="CaretBrush" Value="{DynamicResource TextControlForeground}" />
1517
<Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
16-
<Setter Property="BorderBrush" Value="{DynamicResource ControlElevationBorderBrush}" />
17-
<Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
18+
<Setter Property="BorderBrush" Value="{DynamicResource TextControlElevationBorderBrush}" />
19+
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
1820
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
1921
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
22+
<Setter Property="HorizontalAlignment" Value="Stretch" />
23+
<Setter Property="VerticalAlignment" Value="Stretch" />
2024
<Setter Property="MinHeight" Value="34" />
2125
<Setter Property="BorderThickness" Value="1" />
2226
<Setter Property="Padding" Value="6,4" />
@@ -26,24 +30,33 @@
2630
<Setter Property="Template">
2731
<Setter.Value>
2832
<ControlTemplate TargetType="{x:Type RichTextBox}">
29-
<Border
30-
x:Name="MainBorder"
31-
Padding="0"
32-
Background="{TemplateBinding Background}"
33-
BorderBrush="{TemplateBinding BorderBrush}"
34-
BorderThickness="{TemplateBinding BorderThickness}"
35-
CornerRadius="4"
36-
Focusable="False">
37-
<ScrollViewer
38-
x:Name="PART_ContentHost"
39-
Margin="0,0,2,0"
40-
Padding="{TemplateBinding Padding}"
41-
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
42-
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
43-
Foreground="{TemplateBinding Foreground}"
44-
HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}"
45-
VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}" />
46-
</Border>
33+
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
34+
<Border
35+
x:Name="MainBorder"
36+
Padding="0"
37+
Background="{TemplateBinding Background}"
38+
BorderBrush="{TemplateBinding BorderBrush}"
39+
BorderThickness="{TemplateBinding BorderThickness}"
40+
CornerRadius="4"
41+
Focusable="False">
42+
<ScrollViewer
43+
x:Name="PART_ContentHost"
44+
Margin="0,0,2,0"
45+
Padding="{TemplateBinding Padding}"
46+
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
47+
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
48+
Foreground="{TemplateBinding Foreground}"
49+
HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}"
50+
VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}" />
51+
</Border>
52+
<Border
53+
x:Name="AccentBorder"
54+
HorizontalAlignment="Stretch"
55+
VerticalAlignment="Stretch"
56+
BorderBrush="{DynamicResource ControlStrokeColorDefaultBrush}"
57+
BorderThickness="{StaticResource RichTextBoxAccentBorderThemeThickness}"
58+
CornerRadius="{DynamicResource ControlCornerRadius}" />
59+
</Grid>
4760
<ControlTemplate.Triggers>
4861
<MultiTrigger>
4962
<MultiTrigger.Conditions>
@@ -54,10 +67,12 @@
5467
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundPointerOver}" />
5568
</MultiTrigger>
5669
<Trigger Property="IsFocused" Value="True">
70+
<Setter TargetName="AccentBorder" Property="BorderThickness" Value="0,0,0,2" />
71+
<Setter TargetName="AccentBorder" Property="BorderBrush" Value="{DynamicResource TextControlFocusedBorderBrush}" />
5772
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundFocused}" />
5873
</Trigger>
5974
</ControlTemplate.Triggers>
60-
</ControlTemplate>
75+
</ControlTemplate>
6176
</Setter.Value>
6277
</Setter>
6378
</Style>

‎src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.Dark.xaml

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3357,14 +3357,17 @@
33573357
</Setter>
33583358
</Style>
33593359
<Style BasedOn="{StaticResource DefaultRepeatButtonStyle}" TargetType="{x:Type RepeatButton}" />
3360+
<Thickness x:Key="RichTextBoxAccentBorderThemeThickness">0,0,0,1</Thickness>
33603361
<Style x:Key="DefaultRichTextBoxStyle" TargetType="{x:Type RichTextBox}">
33613362
<Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
33623363
<Setter Property="CaretBrush" Value="{DynamicResource TextControlForeground}" />
33633364
<Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
3364-
<Setter Property="BorderBrush" Value="{DynamicResource ControlElevationBorderBrush}" />
3365-
<Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
3365+
<Setter Property="BorderBrush" Value="{DynamicResource TextControlElevationBorderBrush}" />
3366+
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
33663367
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
33673368
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
3369+
<Setter Property="HorizontalAlignment" Value="Stretch" />
3370+
<Setter Property="VerticalAlignment" Value="Stretch" />
33683371
<Setter Property="MinHeight" Value="34" />
33693372
<Setter Property="BorderThickness" Value="1" />
33703373
<Setter Property="Padding" Value="6,4" />
@@ -3374,9 +3377,12 @@
33743377
<Setter Property="Template">
33753378
<Setter.Value>
33763379
<ControlTemplate TargetType="{x:Type RichTextBox}">
3377-
<Border x:Name="MainBorder" Padding="0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4" Focusable="False">
3378-
<ScrollViewer x:Name="PART_ContentHost" Margin="0,0,2,0" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Foreground="{TemplateBinding Foreground}" HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}" />
3379-
</Border>
3380+
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
3381+
<Border x:Name="MainBorder" Padding="0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4" Focusable="False">
3382+
<ScrollViewer x:Name="PART_ContentHost" Margin="0,0,2,0" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Foreground="{TemplateBinding Foreground}" HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}" />
3383+
</Border>
3384+
<Border x:Name="AccentBorder" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="{DynamicResource ControlStrokeColorDefaultBrush}" BorderThickness="{StaticResource RichTextBoxAccentBorderThemeThickness}" CornerRadius="{DynamicResource ControlCornerRadius}" />
3385+
</Grid>
33803386
<ControlTemplate.Triggers>
33813387
<MultiTrigger>
33823388
<MultiTrigger.Conditions>
@@ -3387,6 +3393,8 @@
33873393
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundPointerOver}" />
33883394
</MultiTrigger>
33893395
<Trigger Property="IsFocused" Value="True">
3396+
<Setter TargetName="AccentBorder" Property="BorderThickness" Value="0,0,0,2" />
3397+
<Setter TargetName="AccentBorder" Property="BorderBrush" Value="{DynamicResource TextControlFocusedBorderBrush}" />
33903398
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundFocused}" />
33913399
</Trigger>
33923400
</ControlTemplate.Triggers>

‎src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.HC.xaml

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3329,14 +3329,17 @@
33293329
</Setter>
33303330
</Style>
33313331
<Style BasedOn="{StaticResource DefaultRepeatButtonStyle}" TargetType="{x:Type RepeatButton}" />
3332+
<Thickness x:Key="RichTextBoxAccentBorderThemeThickness">0,0,0,1</Thickness>
33323333
<Style x:Key="DefaultRichTextBoxStyle" TargetType="{x:Type RichTextBox}">
33333334
<Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
33343335
<Setter Property="CaretBrush" Value="{DynamicResource TextControlForeground}" />
33353336
<Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
3336-
<Setter Property="BorderBrush" Value="{DynamicResource ControlElevationBorderBrush}" />
3337-
<Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
3337+
<Setter Property="BorderBrush" Value="{DynamicResource TextControlElevationBorderBrush}" />
3338+
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
33383339
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
33393340
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
3341+
<Setter Property="HorizontalAlignment" Value="Stretch" />
3342+
<Setter Property="VerticalAlignment" Value="Stretch" />
33403343
<Setter Property="MinHeight" Value="34" />
33413344
<Setter Property="BorderThickness" Value="1" />
33423345
<Setter Property="Padding" Value="6,4" />
@@ -3346,9 +3349,12 @@
33463349
<Setter Property="Template">
33473350
<Setter.Value>
33483351
<ControlTemplate TargetType="{x:Type RichTextBox}">
3349-
<Border x:Name="MainBorder" Padding="0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4" Focusable="False">
3350-
<ScrollViewer x:Name="PART_ContentHost" Margin="0,0,2,0" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Foreground="{TemplateBinding Foreground}" HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}" />
3351-
</Border>
3352+
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
3353+
<Border x:Name="MainBorder" Padding="0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4" Focusable="False">
3354+
<ScrollViewer x:Name="PART_ContentHost" Margin="0,0,2,0" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Foreground="{TemplateBinding Foreground}" HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}" />
3355+
</Border>
3356+
<Border x:Name="AccentBorder" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="{DynamicResource ControlStrokeColorDefaultBrush}" BorderThickness="{StaticResource RichTextBoxAccentBorderThemeThickness}" CornerRadius="{DynamicResource ControlCornerRadius}" />
3357+
</Grid>
33523358
<ControlTemplate.Triggers>
33533359
<MultiTrigger>
33543360
<MultiTrigger.Conditions>
@@ -3359,6 +3365,8 @@
33593365
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundPointerOver}" />
33603366
</MultiTrigger>
33613367
<Trigger Property="IsFocused" Value="True">
3368+
<Setter TargetName="AccentBorder" Property="BorderThickness" Value="0,0,0,2" />
3369+
<Setter TargetName="AccentBorder" Property="BorderBrush" Value="{DynamicResource TextControlFocusedBorderBrush}" />
33623370
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundFocused}" />
33633371
</Trigger>
33643372
</ControlTemplate.Triggers>

‎src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.Light.xaml

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3352,14 +3352,17 @@
33523352
</Setter>
33533353
</Style>
33543354
<Style BasedOn="{StaticResource DefaultRepeatButtonStyle}" TargetType="{x:Type RepeatButton}" />
3355+
<Thickness x:Key="RichTextBoxAccentBorderThemeThickness">0,0,0,1</Thickness>
33553356
<Style x:Key="DefaultRichTextBoxStyle" TargetType="{x:Type RichTextBox}">
33563357
<Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
33573358
<Setter Property="CaretBrush" Value="{DynamicResource TextControlForeground}" />
33583359
<Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
3359-
<Setter Property="BorderBrush" Value="{DynamicResource ControlElevationBorderBrush}" />
3360-
<Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
3360+
<Setter Property="BorderBrush" Value="{DynamicResource TextControlElevationBorderBrush}" />
3361+
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
33613362
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
33623363
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
3364+
<Setter Property="HorizontalAlignment" Value="Stretch" />
3365+
<Setter Property="VerticalAlignment" Value="Stretch" />
33633366
<Setter Property="MinHeight" Value="34" />
33643367
<Setter Property="BorderThickness" Value="1" />
33653368
<Setter Property="Padding" Value="6,4" />
@@ -3369,9 +3372,12 @@
33693372
<Setter Property="Template">
33703373
<Setter.Value>
33713374
<ControlTemplate TargetType="{x:Type RichTextBox}">
3372-
<Border x:Name="MainBorder" Padding="0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4" Focusable="False">
3373-
<ScrollViewer x:Name="PART_ContentHost" Margin="0,0,2,0" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Foreground="{TemplateBinding Foreground}" HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}" />
3374-
</Border>
3375+
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
3376+
<Border x:Name="MainBorder" Padding="0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4" Focusable="False">
3377+
<ScrollViewer x:Name="PART_ContentHost" Margin="0,0,2,0" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Foreground="{TemplateBinding Foreground}" HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}" />
3378+
</Border>
3379+
<Border x:Name="AccentBorder" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="{DynamicResource ControlStrokeColorDefaultBrush}" BorderThickness="{StaticResource RichTextBoxAccentBorderThemeThickness}" CornerRadius="{DynamicResource ControlCornerRadius}" />
3380+
</Grid>
33753381
<ControlTemplate.Triggers>
33763382
<MultiTrigger>
33773383
<MultiTrigger.Conditions>
@@ -3382,6 +3388,8 @@
33823388
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundPointerOver}" />
33833389
</MultiTrigger>
33843390
<Trigger Property="IsFocused" Value="True">
3391+
<Setter TargetName="AccentBorder" Property="BorderThickness" Value="0,0,0,2" />
3392+
<Setter TargetName="AccentBorder" Property="BorderBrush" Value="{DynamicResource TextControlFocusedBorderBrush}" />
33853393
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundFocused}" />
33863394
</Trigger>
33873395
</ControlTemplate.Triggers>

0 commit comments

Comments
 (0)