Wpf之HandyControls与MaterialDesign混用之DataGrid
首先在App.Xaml引入相关资源
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!--Handy Control-->
<ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml"/>
<ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/>
<!--Material Design-->
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/materialdesigncolor.blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
<!--Geometry-->
<ResourceDictionary Source="pack://application:,,,/Resources/Icons/Icons.xaml"/>
<!--Custom Styles-->
<ResourceDictionary Source="pack://application:,,,/Resources/Theme/AppBaseStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
<local:AppLocator x:Key="Locator"/>
</ResourceDictionary>
</Application.Resources>
定义好DataGrid Style在引入到AppBaseStyle中， 下面是DataGrid.xaml的定义
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:hc="https://handyorg.github.io/handycontrol">
<!--<Style x:Key="LSTextBlockComboBoxStyle" TargetType="ComboBox">
<Setter Property="Focusable" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<TextBlock IsHitTestVisible="False" Text="{TemplateBinding Text}" TextTrimming="CharacterEllipsis" VerticalAlignment="Center"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>-->
<Style x:Key="LSTextBlockComboBoxStyle"
TargetType="{x:Type ComboBox}"
BasedOn="{StaticResource MaterialDesignDataGridComboBox}">
<Setter Property="IsHitTestVisible" Value="False" />
<Setter Property="Focusable" Value="False" />
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style x:Key="LSTextBlockComboBoxEditingStyle"
TargetType="{x:Type ComboBox}"
BasedOn="{StaticResource MaterialDesignDataGridComboBox}">
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style x:Key="LSDataGridTextColumnStyle" TargetType="TextBlock">
<Setter Property="TextTrimming" Value="CharacterEllipsis"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style TargetType="DataGrid">
<Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}"/>
<Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}"/>
<Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignTextBoxBorder}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="EnableRowVirtualization" Value="True"/>
<Setter Property="CanUserAddRows" Value="False"/>
<Setter Property="CanUserDeleteRows" Value="False"/>
<Setter Property="CanUserReorderColumns" Value="False"/>
<Setter Property="CanUserResizeRows" Value="False"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="GridLinesVisibility" Value="Horizontal" />
<Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected"/>
<Setter Property="HeadersVisibility" Value="Column" />
<Setter Property="HorizontalGridLinesBrush" Value="{DynamicResource MaterialDesignSelection}" />
<!--
<Setter Property="ColumnHeaderStyle" Value="{StaticResource MaterialDesignDataGridColumnHeader}"/>
<Setter Property="RowHeaderStyle" Value="{StaticResource MaterialDesignDataGridRowHeader}"/>
<Setter Property="RowStyle" Value="{StaticResource MaterialDesignDataGridRow}"/>
<Setter Property="CellStyle" Value="{StaticResource MaterialDesignDataGridCell}"/>
-->
<Setter Property="ColumnHeaderStyle" Value="{StaticResource DataGridColumnHeaderStyle}"/>
<Setter Property="RowHeaderStyle" Value="{StaticResource DataGridRowHeaderStyle}"/>
<Setter Property="RowStyle" Value="{StaticResource MaterialDesignDataGridRow}"/>
<Setter Property="CellStyle" Value="{StaticResource MaterialDesignDataGridCell}"/>
<!--<Setter Property="md:DataGridAssist.AutoGeneratedCheckBoxStyle" Value="{StaticResource MaterialDesignDataGridCheckBoxColumnStyle}" />
<Setter Property="md:DataGridAssist.AutoGeneratedEditingCheckBoxStyle" Value="{StaticResource MaterialDesignDataGridCheckBoxColumnEditingStyle}" />
<Setter Property="md:DataGridAssist.AutoGeneratedEditingTextStyle" Value="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}" />
-->
<Setter Property="md:DataGridAssist.EnableEditBoxAssist" Value="True" />
<!--<Setter Property="hc:DataGridAttach.TextColumnStyle" Value="{StaticResource DataGridTextColumnStyle}"/>-->
<Setter Property="hc:DataGridAttach.TextColumnStyle" Value="{StaticResource LSDataGridTextColumnStyle}"/>
<Setter Property="hc:DataGridAttach.EditingTextColumnStyle" Value="{StaticResource TextBoxBaseStyle}"/>
<Setter Property="hc:DataGridAttach.ComboBoxColumnStyle" Value="{StaticResource LSTextBlockComboBoxStyle}"/>
<Setter Property="hc:DataGridAttach.EditingComboBoxColumnStyle" Value="{StaticResource LSTextBlockComboBoxEditingStyle}"/>
<Setter Property="hc:DataGridAttach.CheckBoxColumnStyle" Value="{StaticResource CheckBoxBaseStyle}"/>
<Setter Property="hc:DataGridAttach.EditingCheckBoxColumnStyle" Value="{StaticResource CheckBoxBaseStyle}"/>
<Setter Property="hc:DataGridAttach.ApplyDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGrid}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="DG_ScrollViewer" Focusable="false">
<ScrollViewer.Template>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button Command="{x:Static DataGrid.SelectAllCommand}" Focusable="false" Style="{DynamicResource {ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}}" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.All}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Width="{Binding CellsPanelHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
<Border BorderThickness="0 0 0 1" BorderBrush="{DynamicResource MaterialDesignDivider}"
Grid.Row="0" Grid.Column="1" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Column}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}">
<DataGridColumnHeadersPresenter x:Name="PART_ColumnHeadersPresenter" />
</Border>
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" Grid.ColumnSpan="2"
Grid.Column="0" Grid.Row="1"/>
<ScrollBar x:Name="PART_VerticalScrollBar" Grid.Column="2" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Grid.Row="1" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>
<Grid Grid.Column="1" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding NonFrozenColumnsViewportHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ScrollBar x:Name="PART_HorizontalScrollBar" Grid.Column="1" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/>
</Grid>
</Grid>
</ControlTemplate>
</ScrollViewer.Template>
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsGrouping" Value="true"/>
<Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</MultiTrigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
效果如下
其它
- 在datagrid中使用ComboboxColumn时会遇到一些绑定与显示的问题， 解决方案是分别定义ComboboxColumnSytle和ComboboxColumnEditingStyle, 此方法需要麻烦但是可以解决Combobox在DataGrid中的问题
<DataGridComboBoxColumn Header="节目类型">
<DataGridComboBoxColumn.EditingElementStyle>
<Style TargetType="ComboBox">
<Setter Property="ItemsSource" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=DataGrid}, Path=DataContext.Categories.Result}"/>
<Setter Property="DisplayMemberPath" Value="Title"/>
<Setter Property="SelectedValuePath" Value="Id"/>
<Setter Property="SelectedValue" Value="{Binding CategoryId, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>
<Setter Property="SelectedItem" Value="{Binding CategoryModel, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>
</Style>
</DataGridComboBoxColumn.EditingElementStyle>
<DataGridComboBoxColumn.ElementStyle>
<Style TargetType="ComboBox">
<Setter Property="ItemsSource" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=DataGrid}, Path=DataContext.Categories.Result}"/>
<Setter Property="DisplayMemberPath" Value="Title"/>
<Setter Property="SelectedValuePath" Value="Id"/>
<Setter Property="SelectedValue" Value="{Binding CategoryId, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>
<Setter Property="SelectedItem" Value="{Binding CategoryModel, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>
</Style>
</DataGridComboBoxColumn.ElementStyle>
</DataGridComboBoxColumn>
- 使用MaterialDesign的DataGridComboboxColumn
<md:DataGridComboBoxColumn Header="节目类型"
ItemsSourceBinding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}, Path=DataContext.Categories.Result}"
DisplayMemberPath="Title" SelectedValuePath="Id"
SelectedValueBinding="{Binding CategoryId, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
SelectedItemBinding="{Binding CategoryModel, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />
版权声明：本文为linxmouse原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。