Skip to content

Commit 45d9079

Browse files
BornToBeRootBornToBeRoot
authored
Feature: Improve the header column design (BornToBeRoot#1910)
* Feature: Improve the header column design * Feature: Add error template to datagrid editable textbox * Docs: Add BornToBeRoot#1910
1 parent 6a918eb commit 45d9079

2 files changed

Lines changed: 100 additions & 5 deletions

File tree

‎Source/NETworkManager/Resources/Styles/DataGridStyles.xaml‎

Lines changed: 98 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,117 @@
11
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3-
xmlns:mahAppsControls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
3+
xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
44
xmlns:controls="clr-namespace:NETworkManager.Controls;assembly=NETworkManager.Controls">
5+
<Style x:Key="DefaultDataGridTextBoxEditing" TargetType="{x:Type TextBox}" BasedOn="{StaticResource MahApps.Styles.TextBox.DataGrid.Editing}">
6+
<Setter Property="FontSize" Value="14" />
7+
<Setter Property="Validation.ErrorTemplate" Value="{StaticResource DefaultErrorTemplate}" />
8+
</Style>
9+
10+
511
<Style x:Key="DefaultDataGrid" TargetType="{x:Type DataGrid}" BasedOn="{StaticResource MahApps.Styles.DataGrid}">
612
<Setter Property="FontSize" Value="14" />
713
<Setter Property="BorderThickness" Value="0" />
8-
<Setter Property="CanUserResizeColumns" Value="False" />
14+
<Setter Property="CanUserResizeColumns" Value="True" />
915
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
1016
<Setter Property="AutoGenerateColumns" Value="False" />
1117
<Setter Property="IsReadOnly" Value="True" />
18+
<Setter Property="mah:DataGridHelper.AutoGeneratedTextColumnEditingStyle" Value="{StaticResource DefaultDataGridTextBoxEditing}" />
1219
</Style>
1320

14-
<Style TargetType="{x:Type DataGrid}" BasedOn="{StaticResource DefaultDataGrid}" />
15-
<Style TargetType="{x:Type controls:MultiSelectScrollingDataGrid}" BasedOn="{StaticResource DefaultDataGrid}" />
21+
<!-- Overwrite style from here to adjust the color of the gripper: https://github.com/MahApps/MahApps.Metro/blob/df8a3eb689caa921b936c4aeba15f5fe2bb57163/src/MahApps.Metro/Styles/Controls.DataGrid.xaml#L217 -->
22+
<Style x:Key="DefaultColumnHeaderGripper" TargetType="{x:Type Thumb}" BasedOn="{StaticResource MahApps.Styles.Thumb.ColumnHeaderGripper}">
23+
<Setter Property="Background" Value="{DynamicResource MahApps.Brushes.Gray8}" />
24+
<Setter Property="Cursor" Value="SizeWE" />
25+
<Setter Property="SnapsToDevicePixels" Value="True" />
26+
<Setter Property="Template">
27+
<Setter.Value>
28+
<ControlTemplate TargetType="{x:Type Thumb}">
29+
<Border Margin="{TemplateBinding Padding}"
30+
Background="Transparent"
31+
BorderBrush="{TemplateBinding Background}"
32+
BorderThickness="0 0 1 0"
33+
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
34+
</ControlTemplate>
35+
</Setter.Value>
36+
</Setter>
37+
<Setter Property="Width" Value="8" />
38+
</Style>
1639

1740
<Style x:Key="DefaultDataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}" BasedOn="{StaticResource MahApps.Styles.DataGridColumnHeader}" >
18-
<Setter Property="mahAppsControls:ControlsHelper.ContentCharacterCasing" Value="Normal" />
41+
<Setter Property="mah:ControlsHelper.ContentCharacterCasing" Value="Normal" />
1942
<Setter Property="BorderThickness" Value="0,0,0,1" />
2043
<Setter Property="BorderBrush" Value="{DynamicResource MahApps.Brushes.Gray8}" />
44+
<!-- Overwrite style from here to adjust the color of the gripper: https://github.com/MahApps/MahApps.Metro/blob/df8a3eb689caa921b936c4aeba15f5fe2bb57163/src/MahApps.Metro/Styles/Controls.DataGrid.xaml#L248 -->
45+
<Setter Property="Template">
46+
<Setter.Value>
47+
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
48+
<Grid>
49+
<Grid.ColumnDefinitions>
50+
<ColumnDefinition Width="*" />
51+
<ColumnDefinition Width="Auto" />
52+
</Grid.ColumnDefinitions>
53+
<Border x:Name="BackgroundBorder"
54+
Grid.ColumnSpan="2"
55+
Background="{TemplateBinding Background}"
56+
BorderBrush="{TemplateBinding BorderBrush}"
57+
BorderThickness="{TemplateBinding BorderThickness}" />
58+
59+
<mah:ContentControlEx x:Name="HeaderContent"
60+
Grid.Column="0"
61+
Margin="{TemplateBinding BorderThickness}"
62+
Padding="{TemplateBinding Padding}"
63+
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
64+
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
65+
Content="{TemplateBinding Content}"
66+
ContentCharacterCasing="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ControlsHelper.ContentCharacterCasing)}"
67+
ContentStringFormat="{TemplateBinding ContentStringFormat}"
68+
ContentTemplate="{TemplateBinding ContentTemplate}"
69+
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
70+
RecognizesAccessKey="{TemplateBinding mah:ControlsHelper.RecognizesAccessKey}"
71+
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
72+
73+
<Path x:Name="SortArrow"
74+
Grid.Column="1"
75+
Width="8"
76+
Height="10"
77+
Margin="0 0 8 2"
78+
VerticalAlignment="Center"
79+
Fill="{DynamicResource DefaultColumnHeaderGripper}"
80+
RenderTransformOrigin="0.5,0.5"
81+
Stretch="Fill"
82+
Visibility="Collapsed" />
83+
84+
<Thumb x:Name="PART_LeftHeaderGripper"
85+
Grid.Column="0"
86+
HorizontalAlignment="Left"
87+
Background="Transparent"
88+
Style="{StaticResource DefaultColumnHeaderGripper}" />
89+
90+
<Thumb x:Name="PART_RightHeaderGripper"
91+
Grid.Column="1"
92+
HorizontalAlignment="Right"
93+
Style="{StaticResource DefaultColumnHeaderGripper}" />
94+
</Grid>
95+
<ControlTemplate.Triggers>
96+
<Trigger Property="SortDirection" Value="Ascending">
97+
<Setter TargetName="SortArrow" Property="Data" Value="F1 M 34,57L 42,57L 42,32.25L 52,42.25L 52,31.75L 38,17.75L 24,31.75L 24,42.25L 34,32.25L 34,57 Z " />
98+
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
99+
</Trigger>
100+
<Trigger Property="SortDirection" Value="Descending">
101+
<Setter TargetName="SortArrow" Property="Data" Value="F1 M 42,19.0002L 34,19.0002L 34,43.7502L 24,33.7502L 24,44.2502L 38,58.2502L 52,44.2502L 52,33.7502L 42,43.7502L 42,19.0002 Z " />
102+
<Setter TargetName="SortArrow" Property="Margin" Value="0 0 8 0" />
103+
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
104+
</Trigger>
105+
<Trigger Property="DisplayIndex" Value="0">
106+
<Setter TargetName="PART_LeftHeaderGripper" Property="Visibility" Value="Collapsed" />
107+
</Trigger>
108+
</ControlTemplate.Triggers>
109+
</ControlTemplate>
110+
</Setter.Value>
111+
</Setter>
21112
</Style>
22113

114+
<Style TargetType="{x:Type DataGrid}" BasedOn="{StaticResource DefaultDataGrid}" />
115+
<Style TargetType="{x:Type controls:MultiSelectScrollingDataGrid}" BasedOn="{StaticResource DefaultDataGrid}" />
23116
<Style TargetType="{x:Type DataGridColumnHeader}" BasedOn="{StaticResource DefaultDataGridColumnHeader}" />
24117
</ResourceDictionary>

‎docs/Changelog/next-release.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ New Feature
2424

2525
## Improvements
2626
- Move .NET runtime components and dependencies into a subfolder to simplify the installation/portable folder [#1832](https://github.com/BornToBeRoot/NETworkManager/pull/1832){:target="\_blank"}
27+
- DataGrid Column header design improved [#1910](https://github.com/BornToBeRoot/NETworkManager/pull/1910){:target="\_blank"}
28+
- DataGrid Columns can now be resized [#1910](https://github.com/BornToBeRoot/NETworkManager/pull/1910){:target="\_blank"}
2729
- Add documentation for: [#265](https://github.com/BornToBeRoot/NETworkManager/pull/265){:target="\_blank"}
2830
- [Dashboard](https://borntoberoot.net/NETworkManager/Documentation/Application/Dashboard){:target="\_blank"}
2931
- [Network Interface](https://borntoberoot.net/NETworkManager/Documentation/Application/NetworkInterface){:target="\_blank"

0 commit comments

Comments
 (0)