Skip to content

Commit 806a0a8

Browse files
apmanapman
authored
[DevExpress] Add NumericUpDown styling & fix Combo hover state & dark mode colour (#150)
1 parent 5832623 commit 806a0a8

File tree

11 files changed

+328
-32
lines changed

11 files changed

+328
-32
lines changed

‎samples/SampleApp/DemoPages/NumericUpDownDemo.axaml

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,42 @@
77
<Grid RowDefinitions="Auto, Auto, Auto, Auto, Auto"
88
ColumnDefinitions="Auto, 120"
99
HorizontalAlignment="Left">
10-
<TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Margin="12">Watermark:</TextBlock>
11-
<TextBlock Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" Margin="12">0 - 10 only:</TextBlock>
12-
<TextBlock Grid.Row="2" Grid.Column="0" VerticalAlignment="Center" Margin="12">Disabled:</TextBlock>
13-
<TextBlock Grid.Row="3" Grid.Column="0" VerticalAlignment="Center" Margin="12">Read-only:</TextBlock>
14-
<TextBlock Grid.Row="4" Grid.Column="0" VerticalAlignment="Top" Margin="12 5 12 12">Error:</TextBlock>
10+
<TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center">Watermark:</TextBlock>
11+
<TextBlock Grid.Row="1" Grid.Column="0" VerticalAlignment="Center">0 - 10 only:</TextBlock>
12+
<TextBlock Grid.Row="2" Grid.Column="0" VerticalAlignment="Center">Disabled:</TextBlock>
13+
<TextBlock Grid.Row="3" Grid.Column="0" VerticalAlignment="Center">Read-only:</TextBlock>
14+
<TextBlock Grid.Row="4" Grid.Column="0" VerticalAlignment="Top">Error:</TextBlock>
1515
<NumericUpDown Grid.Row="0" Grid.Column="1"
16+
VerticalAlignment="Center"
17+
Margin="5 5 0 5"
1618
Increment="1"
1719
Watermark="Days" />
18-
<NumericUpDown Grid.Row="1" Grid.Column="1" Minimum="0"
20+
<NumericUpDown Grid.Row="1" Grid.Column="1"
21+
VerticalAlignment="Center"
22+
Margin="5 5 0 5"
23+
Minimum="0"
1924
Maximum="10"
2025
Increment="0.5"
2126
Value="10" />
22-
<NumericUpDown Grid.Row="2" Grid.Column="1" Minimum="0"
27+
<NumericUpDown Grid.Row="2" Grid.Column="1"
28+
VerticalAlignment="Center"
29+
Margin="5 5 0 5"
30+
Minimum="0"
2331
Maximum="10"
2432
Value="5"
2533
Increment="0.5"
2634
IsEnabled="False" />
27-
<NumericUpDown Grid.Row="3" Grid.Column="1" Minimum="0"
35+
<NumericUpDown Grid.Row="3" Grid.Column="1"
36+
VerticalAlignment="Center"
37+
Margin="5 5 0 5"
38+
Minimum="0"
2839
Maximum="10"
2940
Value="5"
3041
Increment="0.5"
3142
IsReadOnly="True" />
32-
<NumericUpDown Grid.Row="4" Grid.Column="1">
43+
<NumericUpDown Grid.Row="4" Grid.Column="1"
44+
VerticalAlignment="Center"
45+
Margin="5 5 0 5">
3346
<DataValidationErrors.Error>
3447
<system:Exception>
3548
<x:Arguments>

‎src/Devolutions.AvaloniaTheme.DevExpress/Accents/ThemeResources.axaml

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@
2929
<Color x:Key='TextBoxBorderBottomColor'>#9f9f9f</Color>
3030

3131
<Color x:Key='ScrollBarThumbColor'>#9f9f9f</Color>
32+
33+
<SolidColorBrush x:Key="ControlBackgroundSelectedBrush" Color="{DynamicResource SystemAccentColor}"
34+
Opacity="0.07" />
35+
3236
</ResourceDictionary>
3337

3438
<!-- TODO: Darkmode colours just roughly -->
@@ -57,9 +61,22 @@
5761
<Color x:Key='TextBoxBorderBottomColor'>#666666</Color>
5862

5963
<Color x:Key='ScrollBarThumbColor'>#808080</Color>
64+
65+
<Color x:Key='ControlBackgroundSelectedColor'>#21ffffff</Color>
66+
<SolidColorBrush x:Key="ControlBackgroundSelectedBrush" Color="{DynamicResource ControlBackgroundSelectedColor}" />
67+
6068
</ResourceDictionary>
6169
</ResourceDictionary.ThemeDictionaries>
6270

71+
<!-- Theme-specific brushes that must be accessible as StaticResource -->
72+
<!-- TODO: Is there really no way to define a static resource referencing brushes within the theme dictionaries?? -->
73+
74+
<SolidColorBrush x:Key="ControlBackgroundSelectedBrushLight" Color="{DynamicResource SystemAccentColor}"
75+
Opacity="0.07" />
76+
<SolidColorBrush x:Key="ControlBackgroundSelectedBrushDark" Color="{DynamicResource ControlBackgroundSelectedColor}" />
77+
78+
<!-- ••••••• -->
79+
6380
<CornerRadius x:Key="ControlCornerRadius">3</CornerRadius>
6481

6582
<SolidColorBrush x:Key="TransparentBrush" Color="Transparent" />
@@ -85,7 +102,7 @@
85102
<SolidColorBrush x:Key="ControlBackgroundHighBrush" Color="{DynamicResource ControlBackgroundHighColor}" />
86103
<SolidColorBrush x:Key="ControlBackgroundMidBrush" Color="{DynamicResource ControlBackgroundMidColor}" />
87104
<SolidColorBrush x:Key="ControlBackgroundAccentBrush" Color="{DynamicResource SystemAccentColor}" />
88-
<SolidColorBrush x:Key="ControlBackgroundSelectedBrush" Color="{DynamicResource SystemAccentColor}" Opacity="0.07" />
105+
89106
<SolidColorBrush x:Key="ControlBorderMidBrush" Color="{DynamicResource ControlBorderMidColorSolid}" />
90107
<SolidColorBrush x:Key="ControlBorderBrushTransparent" Color="{DynamicResource ForegroundColor}" Opacity="0.11" />
91108
<LinearGradientBrush x:Key="ControlBorderRaisedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
@@ -110,7 +127,7 @@
110127
<SolidColorBrush x:Key="ComboBoxDropDownBorderBrushTransparent" Color="{DynamicResource ForegroundColor}"
111128
Opacity="0.28" />
112129
<Thickness x:Key="ComboBoxPadding">10,0,10,0</Thickness>
113-
<x:Double x:Key="ComboBoxMinHeight">24</x:Double>
130+
<x:Double x:Key="TextBasedInputMinHeight">23</x:Double>
114131
<BoxShadows x:Key="ComboBoxDropDownShadow"> 0 3 7 0 #30000000</BoxShadows>
115132

116133
<SolidColorBrush x:Key="CheckBoxBackgroundBrush" Color="{DynamicResource BackgroundColor}" />

‎src/Devolutions.AvaloniaTheme.DevExpress/Controls/ButtonSpinner.axaml

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<ResourceDictionary xmlns="https://github.com/avaloniaui"
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3+
xmlns:sys="using:System"
4+
xmlns:converters="using:Avalonia.Controls.Converters">
5+
6+
<Design.PreviewWith>
7+
<Border Padding="20">
8+
<StackPanel Spacing="20">
9+
<ButtonSpinner Content="Right spinner" />
10+
<ButtonSpinner ButtonSpinnerLocation="Left"
11+
Content="Left spinner" />
12+
<ButtonSpinner BorderThickness="2"
13+
BorderBrush="Blue"
14+
Content="Right Border" />
15+
<ButtonSpinner ButtonSpinnerLocation="Left"
16+
BorderThickness="2"
17+
BorderBrush="Blue"
18+
Content="Left Border" />
19+
<ButtonSpinner Content="Right disabled"
20+
AllowSpin="False" />
21+
<ButtonSpinner ButtonSpinnerLocation="Left"
22+
Content="Left disabled"
23+
AllowSpin="False" />
24+
<ButtonSpinner ShowButtonSpinner="False"
25+
Content="Hide spinner" />
26+
<ButtonSpinner Content="Error">
27+
<DataValidationErrors.Error>
28+
<sys:Exception>
29+
<x:Arguments>
30+
<x:String>Error</x:String>
31+
</x:Arguments>
32+
</sys:Exception>
33+
</DataValidationErrors.Error>
34+
</ButtonSpinner>
35+
</StackPanel>
36+
</Border>
37+
</Design.PreviewWith>
38+
39+
<converters:MarginMultiplierConverter x:Key="ButtonSpinnerLeftThickness" Indent="1" Left="True" />
40+
<converters:MarginMultiplierConverter x:Key="ButtonSpinnerRightThickness" Indent="1" Right="True" />
41+
42+
<ControlTheme x:Key="FluentButtonSpinnerRepeatButton" TargetType="RepeatButton">
43+
<Setter Property="CornerRadius" Value="5" />
44+
<Setter Property="Template">
45+
<ControlTemplate>
46+
<ContentPresenter x:Name="PART_ContentPresenter"
47+
Background="{TemplateBinding Background}"
48+
BorderBrush="{TemplateBinding BorderBrush}"
49+
BorderThickness="{TemplateBinding BorderThickness}"
50+
CornerRadius="{TemplateBinding CornerRadius}"
51+
Content="{TemplateBinding Content}"
52+
ContentTemplate="{TemplateBinding ContentTemplate}"
53+
Padding="{TemplateBinding Padding}"
54+
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
55+
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
56+
</ControlTemplate>
57+
</Setter>
58+
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
59+
<Setter Property="Background" Value="{DynamicResource ControlBackgroundSelectedBrush}" />
60+
</Style>
61+
</ControlTheme>
62+
63+
<ControlTheme x:Key="{x:Type ButtonSpinner}" TargetType="ButtonSpinner">
64+
<Setter Property="Foreground" Value="{DynamicResource ForegroundColor}" />
65+
<Setter Property="Padding" Value="5 0" />
66+
<Setter Property="HorizontalContentAlignment" Value="Center" />
67+
<Setter Property="VerticalContentAlignment" Value="Center" />
68+
<Setter Property="Focusable" Value="True" />
69+
<Setter Property="Template">
70+
<ControlTemplate>
71+
<DataValidationErrors>
72+
<Border Background="{TemplateBinding Background}"
73+
BorderBrush="{TemplateBinding BorderBrush}"
74+
BorderThickness="{TemplateBinding BorderThickness}"
75+
CornerRadius="{TemplateBinding CornerRadius}"
76+
Margin="0 0 3 0">
77+
<StackPanel Name="PART_SpinnerPanel"
78+
TabIndex="2"
79+
DockPanel.Dock="Right"
80+
Orientation="Vertical"
81+
VerticalAlignment="Center"
82+
IsVisible="{TemplateBinding ShowButtonSpinner}">
83+
<RepeatButton Name="PART_IncreaseButton"
84+
IsTabStop="{TemplateBinding IsTabStop}"
85+
Theme="{StaticResource FluentButtonSpinnerRepeatButton}"
86+
Background="{TemplateBinding Background}"
87+
BorderBrush="{TemplateBinding BorderBrush}"
88+
BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource ButtonSpinnerLeftThickness}}"
89+
VerticalAlignment="Center"
90+
VerticalContentAlignment="Center"
91+
Foreground="{TemplateBinding Foreground}"
92+
Padding="{TemplateBinding Padding}">
93+
<PathIcon
94+
Width="9"
95+
Height="9"
96+
HorizontalAlignment="Center"
97+
VerticalAlignment="Center"
98+
Foreground="{TemplateBinding Foreground}"
99+
RenderTransform="scaleY(-1)"
100+
Data="{StaticResource ChevronPath}" />
101+
</RepeatButton>
102+
103+
<RepeatButton Name="PART_DecreaseButton"
104+
IsTabStop="{TemplateBinding IsTabStop}"
105+
Theme="{StaticResource FluentButtonSpinnerRepeatButton}"
106+
Background="{TemplateBinding Background}"
107+
BorderBrush="{TemplateBinding BorderBrush}"
108+
BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource ButtonSpinnerLeftThickness}}"
109+
VerticalAlignment="Center"
110+
VerticalContentAlignment="Center"
111+
Foreground="{TemplateBinding Foreground}"
112+
Margin="0 -1 0 0 "
113+
Padding="{TemplateBinding Padding}">
114+
<PathIcon Width="9"
115+
Height="9"
116+
HorizontalAlignment="Center"
117+
VerticalAlignment="Center"
118+
Foreground="{DynamicResource ForegroundColor}"
119+
Data="{StaticResource ChevronPath}" />
120+
</RepeatButton>
121+
</StackPanel>
122+
</Border>
123+
</DataValidationErrors>
124+
</ControlTemplate>
125+
</Setter>
126+
127+
<Style Selector="^ /template/ RepeatButton:disabled PathIcon, ^ /template/ RepeatButton:pressed PathIcon">
128+
<Setter Property="Foreground" Value="{DynamicResource ForegroundDisabledBrush}" />
129+
</Style>
130+
</ControlTheme>
131+
132+
</ResourceDictionary>

‎src/Devolutions.AvaloniaTheme.DevExpress/Controls/ComboBox.axaml

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
4747
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
4848
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
49-
<Setter Property="MinHeight" Value="{DynamicResource ComboBoxMinHeight}" />
49+
<Setter Property="MinHeight" Value="{DynamicResource TextBasedInputMinHeight}" />
5050
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
5151
<Setter Property="VerticalContentAlignment" Value="Center" />
5252
<Setter Property="HorizontalAlignment" Value="Stretch" />
@@ -174,6 +174,10 @@
174174
</Style>
175175
</Style>
176176

177+
<Style Selector="^ /template/ Border#DropDownGlyphBackground:pointerover">
178+
<Setter Property="Background" Value="{DynamicResource ControlBackgroundSelectedBrush}" />
179+
</Style>
180+
177181
<!-- Disabled State -->
178182
<Style Selector="^:disabled">
179183
<Style Selector="^ /template/ Border#BorderElement">

‎src/Devolutions.AvaloniaTheme.DevExpress/Controls/ComboBoxItem.axaml

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,14 @@
6262
<Style Selector="^ /template/ Border#LayoutRoot">
6363
<Setter Property="Background">
6464
<Setter.Value>
65-
<MultiBinding Converter="{StaticResource BooleanToChoiceConverter}">
65+
<MultiBinding Converter="{StaticResource BooleanAndThemeToChoiceConverter}">
6666
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=ItemsPresenter}" Path="IsPointerOver" />
6767
<Binding Source="{StaticResource ComboBoxItemBackgroundBrush}" />
68-
<Binding Source="{StaticResource ControlBackgroundSelectedBrush}" />
68+
<Binding Source="{StaticResource ComboBoxItemBackgroundBrush}" />
69+
<Binding Source="{StaticResource ControlBackgroundSelectedBrushLight}" />
70+
<Binding Source="{StaticResource ControlBackgroundSelectedBrushDark}" />
71+
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Application}"
72+
Path="ActualThemeVariant" />
6973
</MultiBinding>
7074
</Setter.Value>
7175
</Setter>

‎src/Devolutions.AvaloniaTheme.DevExpress/Controls/NumericUpDown.axaml

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<ResourceDictionary xmlns="https://github.com/avaloniaui"
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3+
xmlns:sys="clr-namespace:System;assembly=System.Runtime">
4+
5+
<Design.PreviewWith>
6+
<Border Padding="20">
7+
<StackPanel Spacing="20">
8+
<NumericUpDown Minimum="0"
9+
Maximum="10"
10+
Increment="0.5"
11+
Watermark="Days" />
12+
<NumericUpDown Minimum="0"
13+
Maximum="10"
14+
Increment="0.5"
15+
VerticalContentAlignment="Center"
16+
HorizontalContentAlignment="Center"
17+
ButtonSpinnerLocation="Left"
18+
Watermark="Mins" />
19+
<NumericUpDown ButtonSpinnerLocation="Left">
20+
<NumericUpDown.InnerLeftContent>
21+
<TextBlock Text="m"
22+
TextAlignment="Center"
23+
VerticalAlignment="Center" />
24+
</NumericUpDown.InnerLeftContent>
25+
<NumericUpDown.InnerRightContent>
26+
<Button Content="X" />
27+
</NumericUpDown.InnerRightContent>
28+
</NumericUpDown>
29+
<NumericUpDown ButtonSpinnerLocation="Right">
30+
<NumericUpDown.InnerLeftContent>
31+
<Button Content="X" />
32+
</NumericUpDown.InnerLeftContent>
33+
<NumericUpDown.InnerRightContent>
34+
<TextBlock Text="m"
35+
TextAlignment="Center"
36+
VerticalAlignment="Center" />
37+
</NumericUpDown.InnerRightContent>
38+
</NumericUpDown>
39+
<NumericUpDown>
40+
<DataValidationErrors.Error>
41+
<sys:Exception>
42+
<x:Arguments>
43+
<x:String>Error</x:String>
44+
</x:Arguments>
45+
</sys:Exception>
46+
</DataValidationErrors.Error>
47+
</NumericUpDown>
48+
</StackPanel>
49+
</Border>
50+
</Design.PreviewWith>
51+
52+
<ControlTheme x:Key="{x:Type NumericUpDown}" TargetType="NumericUpDown">
53+
<Setter Property="TextAlignment" Value="Right" />
54+
<Setter Property="Template">
55+
<ControlTemplate>
56+
<DataValidationErrors>
57+
58+
<!-- TODO: InnerLeftContent and InnerRightContent should be swapped if ButtonSpinnerLocation="Left" - write a converter ...-->
59+
<!-- -->
60+
<Panel>
61+
<TextBox Name="PART_TextBox"
62+
Watermark="{TemplateBinding Watermark}"
63+
IsReadOnly="{TemplateBinding IsReadOnly}"
64+
Text="{TemplateBinding Text}"
65+
TextAlignment="{TemplateBinding TextAlignment}"
66+
Padding="5 0 0 0"
67+
AcceptsReturn="False"
68+
TextWrapping="NoWrap"
69+
InnerLeftContent="{Binding InnerLeftContent, RelativeSource={RelativeSource TemplatedParent}}">
70+
<TextBox.InnerRightContent>
71+
<ButtonSpinner Name="PART_Spinner"
72+
Background="{TemplateBinding Background}"
73+
BorderThickness="{TemplateBinding BorderThickness}"
74+
BorderBrush="{TemplateBinding BorderBrush}"
75+
CornerRadius="{TemplateBinding CornerRadius}"
76+
IsTabStop="False"
77+
HorizontalContentAlignment="Stretch"
78+
VerticalContentAlignment="Stretch"
79+
AllowSpin="{TemplateBinding AllowSpin}"
80+
ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}"
81+
ButtonSpinnerLocation="{TemplateBinding ButtonSpinnerLocation}" />
82+
</TextBox.InnerRightContent>
83+
</TextBox>
84+
<Border
85+
Name="ErrorBorder"
86+
BorderBrush="{StaticResource SystemControlErrorTextForegroundBrush}"
87+
BorderThickness="1"
88+
CornerRadius="{DynamicResource ControlCornerRadius}"
89+
IsVisible="False" />
90+
</Panel>
91+
</DataValidationErrors>
92+
</ControlTemplate>
93+
</Setter>
94+
95+
<Style Selector="^:error /template/ Border#ErrorBorder">
96+
<Setter Property="IsVisible" Value="True" />
97+
</Style>
98+
99+
</ControlTheme>
100+
</ResourceDictionary>

0 commit comments

Comments
 (0)