WPF中DataGrid自定义样式

Posted 2020-12-27 ly-heroesrebor

1、前台代码

 <Grid Background="#FFCEF3F3">
        <DataGrid   ItemsSource="{Binding CarList}"
                    
                    RowHeaderStyle="{StaticResource dataGridRowHeaderStyle}"
                    
                    ColumnHeaderStyle="{StaticResource dataGridColumnHeaderStyle}" 
                    
                    RowStyle="{StaticResource dataGridRowStyle}"
                    
                    CellStyle="{StaticResource dataGridCellStyle}"
                    
                    Style="{StaticResource dataGridStyle}"
                     
                    Height="235" Width="456" Margin="28,29,0,0" HorizontalAlignment="Left"  VerticalAlignment="Top" 
                      >
            <DataGrid.Columns>
                <DataGridTextColumn Header="编号"  ></DataGridTextColumn>
                <DataGridTextColumn Header="车名" Binding="{Binding CarName}" ></DataGridTextColumn>
                <DataGridTextColumn Header="车型" Binding="{Binding CarType}"></DataGridTextColumn>
                <DataGridTextColumn Header="产地" Binding="{Binding CarMade}"></DataGridTextColumn>
                
                <DataGridCheckBoxColumn Header="购买"></DataGridCheckBoxColumn> 
                
                <DataGridTemplateColumn Header="国产/进口">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <CheckBox Content="请选择" ></CheckBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="排量" MinWidth="50" >
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <ComboBox  >
                                <Label Content="001"></Label>
                                <Label Content="002"></Label>
                                <Label Content="003"></Label>
                            </ComboBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>

    </Grid>

2、Resource

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">






    <Style x:Key="dataGridStyle" TargetType="DataGrid">
        <Setter Property="Background"   Value="#FFC8F393" />
        <Setter Property="BorderBrush"    Value="#FF598B00" />
        <!--该属性指示是否允许用户调整列宽度-->
        <Setter Property="CanUserResizeColumns"   Value="false" />
        <!--网格线颜色-->
        <Setter Property="HorizontalGridLinesBrush">
            <Setter.Value>
                <SolidColorBrush Color="#FFEA8777" />
            </Setter.Value>
        </Setter>
        <Setter Property="VerticalGridLinesBrush">
            <Setter.Value>
                <SolidColorBrush Color="#FFEA8777" />
            </Setter.Value>
        </Setter>
        <!--是否只读-->
        <Setter Property="IsReadOnly" Value="False"></Setter>
        <!--表格字段显示手动完成-->
        <Setter Property="AutoGenerateColumns" Value="False"></Setter>
        <!--隔行换色 -->
        <Setter Property="AlternationCount" Value="3"></Setter>
        <!--列头移动列时候分割线样式-->
        <Setter Property="DropLocationIndicatorStyle">
            <Setter.Value>
                <Style TargetType="Separator">
                    <Setter Property="Background" Value="#FF587878"></Setter>
                    <Setter Property="Width" Value="2.5" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Separator">
                                <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <!--DataGrid控件模板-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGrid}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" x:Name="border"
                            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 x:Name="col_rowheader" Width="1" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <!--选中所有行-->
                                        <Button Command="ApplicationCommands.SelectAll" Focusable="False" Style="{DynamicResource {ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}}" Width="{Binding CellsPanelHorizontalOffset, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type DataGrid}}}">
                                            <Button.Visibility>
                                                <Binding Path="HeadersVisibility" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type DataGrid}}">
                                                    <Binding.ConverterParameter>
                                                        <DataGridHeadersVisibility>All</DataGridHeadersVisibility>
                                                    </Binding.ConverterParameter>
                                                </Binding>
                                            </Button.Visibility>
                                        </Button>
                                        <!--表格头部-->
                                        <DataGridColumnHeadersPresenter x:Name="PART_ColumnHeadersPresenter" Grid.Column="1" Grid.ColumnSpan="2"
                                                    Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Column}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" >
                                         </DataGridColumnHeadersPresenter>
                                        <!--主数据区-->
                                        <Grid Grid.Row="1" Grid.ColumnSpan="2">
                                            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" Grid.ColumnSpan="2" />
                                        </Grid>
                                        <!--垂直滑动条-->
                                        <ScrollBar x:Name="PART_VerticalScrollBar" Grid.Column="2" Maximum="{TemplateBinding ScrollableHeight}"
                                                   Orientation="Vertical" Grid.Row="0" Grid.RowSpan="3" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                                   Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                                                   ViewportSize="{TemplateBinding ViewportHeight}" />
                                        <!--横向滑动条-->
                                        <ScrollBar x:Name="PART_HorizontalScrollBar" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2"
                                                       Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal"
                                                       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                                       Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                                                       ViewportSize="{TemplateBinding ViewportWidth}" />
                                    </Grid>
                                </ControlTemplate>
                            </ScrollViewer.Template>
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </ScrollViewer>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" Value="0.75" TargetName="border" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsGrouping" Value="true">
                <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
            </Trigger>
        </Style.Triggers>

    </Style>

    <!--行头调整高度样式 -->
    <Style x:Key="DefaultRowHeaderGripperStyle" TargetType="{x:Type Thumb}">
        <Setter Property="Height" Value="6" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Cursor" Value="SizeNS" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border Padding="{TemplateBinding Padding}" Background="Transparent"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    <!--行头部样式-->
    <Style x:Key="dataGridRowHeaderStyle" TargetType="DataGridRowHeader">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Red" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Margin" Value="0,0,0,0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridRowHeader}">
                    <Grid>
                        <Border BorderBrush="{TemplateBinding BorderBrush}"
                                Background="{TemplateBinding Background}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Padding="{TemplateBinding Padding}"
                                Margin="{TemplateBinding Margin}"
                                SnapsToDevicePixels="True">
                            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                        </Border>
                        <!--上下拖拽-->
                        <Thumb x:Name="PART_TopHeaderGripper" VerticalContentAlignment="Top"
                               VerticalAlignment="Top" Background="Transparent" Style="{StaticResource DefaultRowHeaderGripperStyle}" />
                        <Thumb x:Name="PART_BottomHeaderGripper" VerticalContentAlignment="Bottom"
                               VerticalAlignment="Bottom" Style="{StaticResource DefaultRowHeaderGripperStyle}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

       
    <!--标题栏 列头部样式-->
    <Style x:Key="dataGridColumnHeaderStyle" TargetType="DataGridColumnHeader">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="MinWidth" Value="15" />
        <Setter Property="MinHeight" Value="28" />
        <Setter Property="Foreground" Value="#FF0FA459" />
        <Setter Property="FontSize"   Value="14" />
        <Setter Property="Cursor"     Value="Hand" />
        <Setter Property="Height" Value="30" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridColumnHeader">
                    <!--设置表头的背景等样式-->
                    <Border x:Name="BackgroundBorder"  Background="#FFBABAFF"   BorderThickness="1,1,0,0"   BorderBrush="Blue"  Width="Auto">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <!--内容-->
                            <ContentPresenter  Margin="0,0,0,0"  VerticalAlignment="Center"  HorizontalAlignment="Center" />
                            <!--排序图标-->
                            <Path x:Name="SortArrow"  Visibility="Collapsed"   Data="M0,0 L1,0 0.5,1 z"  Stretch="Fill"    Grid.Column="2"    
                                       Width="8"  Height="6"  Fill="White" Margin="0,0,50,0"  VerticalAlignment="Center"  RenderTransformOrigin="1,1" />
                            <!--分割线-->
                            <Rectangle Visibility="Collapsed"  Width="1" Fill="#d6c79b" HorizontalAlignment="Right"  Grid.ColumnSpan="1"   />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    
    
    <!--行样式触发-->
    <!--背景色改变必须先设置cellStyle 因为cellStyle会覆盖rowStyle样式-->
    <Style x:Key="dataGridRowStyle"  TargetType="DataGridRow">
        <Setter Property="Background"  Value="#F2F2F2"/>
        <Setter Property="Height"  Value="25" />
        <Setter Property="Foreground" Value="Black" />
        <Style.Triggers>
            <!--隔行换色-->
            <Trigger Property="AlternationIndex"  Value="0">
                <Setter Property="Background"   Value="#FFB8E6FB" />
            </Trigger>
            <Trigger Property="AlternationIndex"   Value="1">
                <Setter Property="Background" Value="#FFD4C9F9" />
            </Trigger>
            <Trigger Property="AlternationIndex"   Value="2">
                <Setter Property="Background" Value="#FFFFCFC7" />
            </Trigger>
            <Trigger Property="IsMouseOver"   Value="True">
                <Setter Property="Background"  Value="#FFF31006" />
                <Setter Property="Opacity" Value="0.6"></Setter>
            </Trigger>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Foreground"   Value="#FFF31006" />
                <Setter Property="Opacity" Value="1"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

    <!--单元格样式触发-->
    <Style x:Key="dataGridCellStyle" TargetType="DataGridCell">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridCell">
                    <TextBlock TextAlignment="Center"  VerticalAlignment="Center">    
                        <ContentPresenter />
                    </TextBlock>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected"    Value="True">
                <Setter Property="Foreground"   Value="Blue" />
            </Trigger>
        </Style.Triggers>
    </Style>





</ResourceDictionary>