Skip to content

Commit 23b35bc

Browse files
apmanapman
committed
[DevExpress] Add Fluent styles for TreeDataGrid
1 parent 51188cb commit 23b35bc

File tree

3 files changed

+342
-0
lines changed

3 files changed

+342
-0
lines changed

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,13 @@
3838
<Style Selector="DataGridRow:nth-child(even)">
3939
<Setter Property="Background" Value="{DynamicResource DataGridRowAlternatingBackgroundBrush}" />
4040
</Style>
41+
42+
<Style Selector=":is(TreeDataGridCell)">
43+
<Setter Property="Background" Value="Transparent" />
44+
<Setter Property="MinHeight" Value="25" />
45+
</Style>
46+
47+
<Style Selector=":is(TreeDataGridCell):selected">
48+
<Setter Property="Background" Value="{DynamicResource TreeDataGridSelectedCellBackgroundBrush}" />
49+
</Style>
4150
</Styles>

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

Lines changed: 332 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,332 @@
1+
<!-- Based on https://github.com/AvaloniaUI/Avalonia.Controls.TreeDataGrid/blob/master/src/Avalonia.Controls.TreeDataGrid/Themes/Generic.axaml
2+
and https://github.com/AvaloniaUI/Avalonia.Controls.TreeDataGrid/blob/master/src/Avalonia.Controls.TreeDataGrid/Themes/Fluent.axaml -->
3+
4+
<ResourceDictionary xmlns="https://github.com/avaloniaui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
6+
xmlns:conv="using:Avalonia.Controls.Converters">
7+
8+
<ResourceDictionary.ThemeDictionaries>
9+
<ResourceDictionary x:Key="Default">
10+
<SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Color="{StaticResource SystemListLowColor}" />
11+
<SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPointerOverBrush" Color="{StaticResource SystemBaseHighColor}" Opacity="0.1" />
12+
<SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPressedBrush" Color="{StaticResource SystemBaseMediumLowColor}" />
13+
<SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPointerOverBrush" Color="Transparent" />
14+
<SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPressedBrush" Color="Transparent" />
15+
<SolidColorBrush x:Key="TreeDataGridHeaderForegroundPointerOverBrush" Color="{StaticResource SystemBaseHighColor}" />
16+
<SolidColorBrush x:Key="TreeDataGridHeaderForegroundPressedBrush" Color="{StaticResource SystemBaseHighColor}" />
17+
<SolidColorBrush x:Key="TreeDataGridSelectedCellBackgroundBrush" Color="{StaticResource SystemAccentColor}" Opacity="0.4" />
18+
</ResourceDictionary>
19+
<ResourceDictionary x:Key="Dark">
20+
<SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Color="{StaticResource SystemListLowColor}" />
21+
<SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPointerOverBrush" Color="{StaticResource SystemBaseHighColor}" Opacity="0.1" />
22+
<SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPressedBrush" Color="{StaticResource SystemBaseMediumLowColor}" />
23+
<SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPointerOverBrush" Color="Transparent" />
24+
<SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPressedBrush" Color="Transparent" />
25+
<SolidColorBrush x:Key="TreeDataGridHeaderForegroundPointerOverBrush" Color="{StaticResource SystemBaseHighColor}" />
26+
<SolidColorBrush x:Key="TreeDataGridHeaderForegroundPressedBrush" Color="{StaticResource SystemBaseHighColor}" />
27+
<SolidColorBrush x:Key="TreeDataGridSelectedCellBackgroundBrush" Color="{StaticResource SystemAccentColor}" Opacity="0.4" />
28+
</ResourceDictionary>
29+
</ResourceDictionary.ThemeDictionaries>
30+
31+
<StreamGeometry x:Key="TreeDataGridSortIconDescendingPath">M1875 1011l-787 787v-1798h-128v1798l-787 -787l-90 90l941 941l941 -941z</StreamGeometry>
32+
<StreamGeometry x:Key="TreeDataGridSortIconAscendingPath">M1965 947l-941 -941l-941 941l90 90l787 -787v1798h128v-1798l787 787z</StreamGeometry>
33+
<StreamGeometry x:Key="TreeDataGridItemCollapsedChevronPathData">M 1,0 10,10 l -9,10 -1,-1 L 8,10 -0,1 Z</StreamGeometry>
34+
<StreamGeometry x:Key="TreeDataGridItemExpandedChevronPathData">M0,1 L10,10 20,1 19,0 10,8 1,0 Z</StreamGeometry>
35+
36+
<ControlTheme x:Key="{x:Type TreeDataGrid}" TargetType="TreeDataGrid">
37+
<Setter Property="Template">
38+
<ControlTemplate>
39+
<Border x:Name="RootBorder"
40+
Background="{TemplateBinding Background}"
41+
BorderBrush="{TemplateBinding BorderBrush}"
42+
BorderThickness="{TemplateBinding BorderThickness}"
43+
CornerRadius="{TemplateBinding CornerRadius}">
44+
<DockPanel>
45+
<ScrollViewer Name="PART_HeaderScrollViewer"
46+
DockPanel.Dock="Top"
47+
IsVisible="{TemplateBinding ShowColumnHeaders}"
48+
HorizontalScrollBarVisibility="Hidden"
49+
VerticalScrollBarVisibility="Disabled"
50+
BringIntoViewOnFocusChange="{TemplateBinding (ScrollViewer.BringIntoViewOnFocusChange)}">
51+
<Border x:Name="ColumnHeadersPresenterBorder">
52+
<TreeDataGridColumnHeadersPresenter Name="PART_ColumnHeadersPresenter"
53+
ElementFactory="{TemplateBinding ElementFactory}"
54+
Items="{TemplateBinding Columns}" />
55+
</Border>
56+
</ScrollViewer>
57+
<ScrollViewer Name="PART_ScrollViewer"
58+
HorizontalScrollBarVisibility="Auto"
59+
BringIntoViewOnFocusChange="{TemplateBinding (ScrollViewer.BringIntoViewOnFocusChange)}">
60+
<TreeDataGridRowsPresenter Name="PART_RowsPresenter"
61+
Columns="{TemplateBinding Columns}"
62+
ElementFactory="{TemplateBinding ElementFactory}"
63+
Items="{TemplateBinding Rows}" />
64+
</ScrollViewer>
65+
</DockPanel>
66+
</Border>
67+
</ControlTemplate>
68+
</Setter>
69+
70+
<Style Selector="^/template/ Border#ColumnHeadersPresenterBorder">
71+
<Setter Property="BorderThickness" Value="0 0 0 1" />
72+
<Setter Property="BorderBrush" Value="{DynamicResource TreeDataGridGridLinesBrush}" />
73+
</Style>
74+
75+
</ControlTheme>
76+
77+
<ControlTheme x:Key="{x:Type TreeDataGridColumnHeader}" TargetType="TreeDataGridColumnHeader">
78+
<Setter Property="Background" Value="Transparent" />
79+
<Setter Property="MinHeight" Value="25" />
80+
<Setter Property="Padding" Value="4 2" />
81+
<Setter Property="VerticalContentAlignment" Value="Center" />
82+
<Setter Property="Template">
83+
<ControlTemplate>
84+
<Border Name="DataGridBorder"
85+
Background="{TemplateBinding Background}"
86+
BorderBrush="{TemplateBinding BorderBrush}"
87+
BorderThickness="{TemplateBinding BorderThickness}"
88+
CornerRadius="{TemplateBinding CornerRadius}">
89+
<DockPanel VerticalAlignment="Stretch">
90+
<Panel DockPanel.Dock="Right"
91+
TabIndex="2">
92+
<Rectangle Fill="{DynamicResource TreeDataGridGridLinesBrush}"
93+
HorizontalAlignment="Right"
94+
Width="1" />
95+
<Thumb Name="PART_Resizer"
96+
DockPanel.Dock="Right"
97+
Background="Transparent"
98+
Cursor="SizeWestEast"
99+
IsVisible="{TemplateBinding CanUserResize}"
100+
Width="5">
101+
<Thumb.Template>
102+
<ControlTemplate>
103+
<Border Background="{TemplateBinding Background}"
104+
VerticalAlignment="Stretch" />
105+
</ControlTemplate>
106+
</Thumb.Template>
107+
</Thumb>
108+
</Panel>
109+
<Path Name="SortIcon"
110+
DockPanel.Dock="Right"
111+
Fill="{TemplateBinding Foreground}"
112+
HorizontalAlignment="Center"
113+
VerticalAlignment="Center"
114+
Stretch="Uniform"
115+
Height="12"
116+
TabIndex="1" />
117+
<ContentPresenter Name="PART_ContentPresenter"
118+
Content="{TemplateBinding Header}"
119+
ContentTemplate="{TemplateBinding ContentTemplate}"
120+
Padding="{TemplateBinding Padding}"
121+
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
122+
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
123+
TabIndex="0">
124+
<ContentPresenter.DataTemplates>
125+
<DataTemplate DataType="x:String">
126+
<TextBlock Text="{Binding}" TextTrimming="CharacterEllipsis" />
127+
</DataTemplate>
128+
</ContentPresenter.DataTemplates>
129+
</ContentPresenter>
130+
</DockPanel>
131+
</Border>
132+
</ControlTemplate>
133+
</Setter>
134+
135+
<Style Selector="^:pointerover /template/ Border#DataGridBorder">
136+
<Setter Property="Background" Value="{DynamicResource TreeDataGridHeaderBackgroundPointerOverBrush}" />
137+
<Setter Property="BorderBrush" Value="{DynamicResource TreeDataGridHeaderBorderBrushPointerOverBrush}" />
138+
<Setter Property="TextBlock.Foreground"
139+
Value="{DynamicResource TreeDataGridHeaderForegroundPointerOverBrush}" />
140+
</Style>
141+
142+
<Style Selector="^:pressed /template/ Border#DataGridBorder">
143+
<Setter Property="Background" Value="{DynamicResource TreeDataGridHeaderBackgroundPressedBrush}" />
144+
<Setter Property="BorderBrush" Value="{DynamicResource TreeDataGridHeaderBorderBrushPressedBrush}" />
145+
<Setter Property="TextBlock.Foreground" Value="{DynamicResource TreeDataGridHeaderForegroundPressedBrush}" />
146+
</Style>
147+
148+
<Style Selector="^[SortDirection=Ascending] /template/ Path#SortIcon">
149+
<Setter Property="IsVisible" Value="True" />
150+
<Setter Property="Data" Value="{DynamicResource TreeDataGridSortIconAscendingPath}" />
151+
</Style>
152+
153+
<Style Selector="^[SortDirection=Descending] /template/ Path#SortIcon">
154+
<Setter Property="IsVisible" Value="True" />
155+
<Setter Property="Data" Value="{DynamicResource TreeDataGridSortIconDescendingPath}" />
156+
</Style>
157+
158+
</ControlTheme>
159+
160+
<ControlTheme x:Key="{x:Type TreeDataGridRow}" TargetType="TreeDataGridRow">
161+
<Setter Property="Template">
162+
<ControlTemplate>
163+
<Border x:Name="RowBorder"
164+
Background="{TemplateBinding Background}"
165+
BorderBrush="{TemplateBinding BorderBrush}"
166+
BorderThickness="{TemplateBinding BorderThickness}"
167+
CornerRadius="{TemplateBinding CornerRadius}">
168+
<TreeDataGridCellsPresenter Name="PART_CellsPresenter"
169+
ElementFactory="{TemplateBinding ElementFactory}"
170+
Items="{TemplateBinding Columns}"
171+
Rows="{TemplateBinding Rows}" />
172+
</Border>
173+
</ControlTemplate>
174+
</Setter>
175+
176+
<Style Selector="^:selected /template/ TreeDataGridCellsPresenter#PART_CellsPresenter">
177+
<Setter Property="Background" Value="{DynamicResource TreeDataGridSelectedCellBackgroundBrush}" />
178+
</Style>
179+
180+
</ControlTheme>
181+
182+
<ControlTheme x:Key="{x:Type TreeDataGridCheckBoxCell}" TargetType="TreeDataGridCheckBoxCell">
183+
<Setter Property="Padding" Value="4 2" />
184+
<Setter Property="Template">
185+
<ControlTemplate>
186+
<Border x:Name="CellBorder"
187+
Background="{TemplateBinding Background}"
188+
BorderBrush="{TemplateBinding BorderBrush}"
189+
BorderThickness="{TemplateBinding BorderThickness}"
190+
CornerRadius="{TemplateBinding CornerRadius}"
191+
Padding="{TemplateBinding Padding}">
192+
<CheckBox IsChecked="{TemplateBinding Value, Mode=TwoWay}"
193+
IsEnabled="{Binding !IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}"
194+
IsThreeState="{TemplateBinding IsThreeState}" />
195+
</Border>
196+
</ControlTemplate>
197+
</Setter>
198+
</ControlTheme>
199+
200+
<ControlTheme x:Key="TreeDataGridExpandCollapseChevron" TargetType="ToggleButton">
201+
<Setter Property="Margin" Value="0" />
202+
<Setter Property="Width" Value="12" />
203+
<Setter Property="Height" Value="12" />
204+
<Setter Property="Template">
205+
<ControlTemplate>
206+
<Border Background="Transparent"
207+
Width="{TemplateBinding Width}"
208+
Height="{TemplateBinding Height}"
209+
HorizontalAlignment="Center"
210+
VerticalAlignment="Center">
211+
<Path x:Name="ChevronPath"
212+
Data="{StaticResource TreeDataGridItemCollapsedChevronPathData}"
213+
Fill="{TemplateBinding Foreground}"
214+
Stretch="Uniform"
215+
HorizontalAlignment="Center"
216+
VerticalAlignment="Center" />
217+
</Border>
218+
</ControlTemplate>
219+
</Setter>
220+
<Style Selector="^:checked /template/ Path#ChevronPath">
221+
<Setter Property="Data" Value="{StaticResource TreeDataGridItemExpandedChevronPathData}" />
222+
</Style>
223+
</ControlTheme>
224+
225+
<ControlTheme x:Key="{x:Type TreeDataGridExpanderCell}" TargetType="TreeDataGridExpanderCell">
226+
<Setter Property="Template">
227+
<ControlTemplate>
228+
<Border x:Name="CellBorder"
229+
Background="{TemplateBinding Background}"
230+
BorderBrush="{TemplateBinding BorderBrush}"
231+
BorderThickness="{TemplateBinding BorderThickness}"
232+
CornerRadius="{TemplateBinding CornerRadius}"
233+
Padding="{TemplateBinding Indent, Converter={x:Static conv:IndentConverter.Instance}}">
234+
<DockPanel>
235+
<Border DockPanel.Dock="Left"
236+
Margin="4 0"
237+
Width="12" Height="12">
238+
<ToggleButton Theme="{StaticResource TreeDataGridExpandCollapseChevron}"
239+
Focusable="False"
240+
IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"
241+
IsVisible="{TemplateBinding ShowExpander}" />
242+
</Border>
243+
<Decorator Name="PART_Content" />
244+
</DockPanel>
245+
</Border>
246+
</ControlTemplate>
247+
</Setter>
248+
</ControlTheme>
249+
250+
<ControlTheme x:Key="{x:Type TreeDataGridTextCell}" TargetType="TreeDataGridTextCell">
251+
<Setter Property="Padding" Value="4 2" />
252+
<Setter Property="Template">
253+
<ControlTemplate>
254+
<Border x:Name="CellBorder"
255+
Background="{TemplateBinding Background}"
256+
BorderBrush="{TemplateBinding BorderBrush}"
257+
BorderThickness="{TemplateBinding BorderThickness}"
258+
CornerRadius="{TemplateBinding CornerRadius}"
259+
Padding="{TemplateBinding Padding}">
260+
<TextBlock Text="{TemplateBinding Value}"
261+
TextTrimming="{TemplateBinding TextTrimming}"
262+
TextWrapping="{TemplateBinding TextWrapping}"
263+
TextAlignment="{TemplateBinding TextAlignment}"
264+
VerticalAlignment="Center" />
265+
</Border>
266+
</ControlTemplate>
267+
</Setter>
268+
269+
<Style Selector="^:editing">
270+
<Setter Property="Padding" Value="4 2" />
271+
<Setter Property="Template">
272+
<ControlTemplate>
273+
<Border x:Name="CellBorder"
274+
Background="{TemplateBinding Background}"
275+
BorderBrush="{TemplateBinding BorderBrush}"
276+
BorderThickness="{TemplateBinding BorderThickness}"
277+
CornerRadius="{TemplateBinding CornerRadius}"
278+
Padding="{TemplateBinding Padding}">
279+
<TextBox Name="PART_Edit"
280+
Text="{TemplateBinding Value, Mode=TwoWay}" />
281+
</Border>
282+
</ControlTemplate>
283+
</Setter>
284+
</Style>
285+
286+
<Style Selector="^:editing /template/ TextBox#PART_Edit">
287+
<Setter Property="Background" Value="Transparent" />
288+
<Setter Property="MinHeight" Value="25" />
289+
<Setter Property="Padding" Value="10,3,6,3" />
290+
<Setter Property="VerticalAlignment" Value="Center" />
291+
</Style>
292+
293+
<Style Selector="^:editing /template/ TextBox#PART_Edit DataValidationErrors">
294+
<Setter Property="Template" Value="{DynamicResource TooltipDataValidationContentTemplate}" />
295+
<Setter Property="ErrorTemplate" Value="{DynamicResource TooltipDataValidationErrorTemplate}" />
296+
</Style>
297+
298+
</ControlTheme>
299+
300+
<ControlTheme x:Key="{x:Type TreeDataGridTemplateCell}" TargetType="TreeDataGridTemplateCell">
301+
<Setter Property="Template">
302+
<ControlTemplate>
303+
<ContentPresenter Name="PART_ContentPresenter"
304+
Background="{TemplateBinding Background}"
305+
BorderBrush="{TemplateBinding BorderBrush}"
306+
BorderThickness="{TemplateBinding BorderThickness}"
307+
ContentTemplate="{TemplateBinding ContentTemplate}"
308+
CornerRadius="{TemplateBinding CornerRadius}"
309+
Content="{TemplateBinding Content}"
310+
Padding="{TemplateBinding Padding}" />
311+
</ControlTemplate>
312+
</Setter>
313+
314+
<Style Selector="^:editing">
315+
<Setter Property="Padding" Value="4 2" />
316+
<Setter Property="Template">
317+
<ControlTemplate>
318+
<ContentPresenter Name="PART_EditingContentPresenter"
319+
Background="{TemplateBinding Background}"
320+
BorderBrush="{TemplateBinding BorderBrush}"
321+
BorderThickness="{TemplateBinding BorderThickness}"
322+
ContentTemplate="{TemplateBinding EditingTemplate}"
323+
CornerRadius="{TemplateBinding CornerRadius}"
324+
Content="{TemplateBinding Content}"
325+
Padding="{TemplateBinding Padding}" />
326+
</ControlTemplate>
327+
</Setter>
328+
</Style>
329+
</ControlTheme>
330+
</ResourceDictionary>
331+
332+
<!-- Additional styling in Accents/Styles.axaml -->

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<MergeResourceInclude Source="TextBox.axaml" />
1919
<MergeResourceInclude Source="TreeView.axaml" />
2020
<MergeResourceInclude Source="TreeViewItem.axaml" />
21+
<MergeResourceInclude Source="TreeDataGrid.axaml" />
2122
<MergeResourceInclude Source="ContextMenu.axaml" />
2223
<MergeResourceInclude Source="Window.axaml" />
2324
</ResourceDictionary.MergedDictionaries>

0 commit comments

Comments
 (0)