WPF 自定义DataGrid控件样式模板5个

news2024/11/16 11:44:39

WPF 自定义DataGrid控件样式

样式一:

样式代码:

 <!--DataGrid样式-->
        <Style TargetType="DataGrid">
            <!--网格线颜色-->
            <Setter Property="CanUserResizeColumns" Value="false"/>
            <Setter Property="Background" Value="#FFF7EDAD" />
            <Setter Property="BorderBrush" Value="#FFF5F7F5" />
            <Setter Property="HorizontalGridLinesBrush">
                <Setter.Value>
                    <SolidColorBrush Color="#d6c79b"/>
                </Setter.Value>
            </Setter>
            <Setter Property="VerticalGridLinesBrush">
                <Setter.Value>
                    <SolidColorBrush Color="#d6c79b"/>
                </Setter.Value>
            </Setter>
        </Style>

        <!--标题栏样式-->
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="MinWidth" Value="0" />
            <Setter Property="MinHeight" Value="28" />
            <Setter Property="Foreground" Value="#323433" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="DataGridColumnHeader">
                        <Border x:Name="BackgroundBorder" BorderThickness="0,1,0,1" 
                             BorderBrush="#e6dbba" 
                              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 Width="1" Fill="#d6c79b" HorizontalAlignment="Right" Grid.ColumnSpan="1" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Height" Value="25"/>
        </Style>
        <!--行样式触发-->
        <!--背景色改变必须先设置cellStyle 因为cellStyle会覆盖rowStyle样式-->
        <Style  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="#e7e7e7" />
                </Trigger>
                <Trigger Property="AlternationIndex" Value="1" >
                    <Setter Property="Background" Value="#f2f2f2" />
                </Trigger>

                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="LightGray"/>
                    <!--<Setter Property="Foreground" Value="White"/>-->
                </Trigger>

                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Black"/>
                </Trigger>
            </Style.Triggers>
        </Style>

        <!--单元格样式触发-->
        <Style 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="Black"/>
                </Trigger>
            </Style.Triggers>
        </Style>

引用示例:
<DataGrid x:Name="DataGrid" AutoGenerateColumns="False"  VerticalAlignment="Top"
                  CanUserSortColumns="False"     Margin="5" IsReadOnly="True"
                  CanUserResizeColumns="False" CanUserResizeRows="False"  SelectionMode="Single"
                  CanUserReorderColumns="False" AlternationCount="2"  RowHeaderWidth="0" CanUserAddRows="False" >
     <DataGrid.Columns>
           <DataGridTextColumn Header="名称" Width="150"  Binding="{Binding  Name}"/>
           <DataGridTextColumn Header="班级"   Width="120"  Binding="{Binding Class}"/>
           <DataGridTextColumn Header="性别"  Width="120"  Binding="{Binding Sex}"/>
           <DataGridTextColumn Header="班级排名"  Width="130"  Binding="{Binding ClassRank}"/>
           <DataGridTextColumn Header="全校排名"  Width="140"  Binding="{Binding SchoolRank}"/>
     </DataGrid.Columns>
</DataGrid>

初始化绑定数据C#代码:

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            StudentList = new List<StudentInfo>()
            {
                new StudentInfo()
                {
                    Name="张三",
                    Class="三班",
                    Sex="男",
                    ClassRank=10,
                    SchoolRank=103
                },
                 new StudentInfo()
                {
                    Name="李四",
                    Class="三班",
                    Sex="男",
                    ClassRank=12,
                    SchoolRank=110
                },
                  new StudentInfo()
                {
                    Name="李梅",
                    Class="三班",
                    Sex="女",
                    ClassRank=3,
                    SchoolRank=70
                },
             };
            this.DataGrid.ItemsSource = StudentList;
        }

        public List<StudentInfo> StudentList { get; set; }
        public class StudentInfo
        {
            public string Name { get; set; }
            public string Class { get; set; }
            public string Sex { get; set; }
            public int ClassRank { get; set; }
            public int SchoolRank { get; set; }
        }

效果展示:

样式二:

上面的代码实现了隔行换色的效果,但是没有鼠标选中效果。另外有些用户希望能够进行列头拖动及排序。那么就需要做以下更改:

添加DataGridRow样式:

<Style x:Key="AlertCount1" 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="White" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="LightGray"/>
                </Trigger>

                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Black"/>
                    <Setter Property="Background" Value="LightGray"/>
                </Trigger>
            </Style.Triggers>
        </Style>

在引用时,设置DataGrid的RowStyle="{StaticResource AlertCount1}"且AlternationCount=“1”。这样就可以实现突出选中效果,取消隔行显示效果。要实现表头拖动,使用上面的样式代码是不行的,上面的样式代码去掉了拖动的控件。要实现拖动需要将其加上。

样式三:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfApp5"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib">
    <sys:Double x:Key="DataGridRow.Height">33</sys:Double>

    <!--  表格外边框线粗细,一般不修改  -->
    <Thickness x:Key="DataGrid.BorderThickness" Bottom="1" Left="1" Right="1" Top="1"/>
    <!--  列头边框粗细,一般不修改  -->
    <Thickness x:Key="ColumnHeader.BorderThickness" Bottom="0" Left="0" Right="1" Top="0"/>
    <!--  行边框粗细,一般不修改  -->
    <Thickness x:Key="DataGridRow.BorderThickness" Bottom="0" Left="0" Right="0" Top="1"/>

    <!--  表格外边框颜色  -->
    <SolidColorBrush x:Key="DataGrid.BorderBrush" Color="#E9ECF1" />
    <!--  列头背景色  -->
    <SolidColorBrush x:Key="ColumnHeader.Background" Color="#F6F7FB" />
    <!--  列头边框颜色  -->
    <SolidColorBrush x:Key="ColumnHeader.BorderBrush" Color="#E9ECF1" />
    <!--  行边框颜色  -->
    <SolidColorBrush x:Key="DataGridRow.BorderBrush" Color="#E9ECF1" />
    <!--  行默认背景颜色  -->
    <SolidColorBrush x:Key="DataGridRow.Normal.Background" Color="#FFFFFF" />
    <!--  行默认文字颜色  -->
    <SolidColorBrush x:Key="DataGridRow.Normal.Foreground" Color="#000000" />
    <!--  行悬浮背景颜色  -->
    <SolidColorBrush x:Key="DataGridRow.MouseOver.Background" Color="#F6F7FB" />
    <!--  行悬浮文字颜色  -->
    <SolidColorBrush x:Key="DataGridRow.MouseOver.Foreground" Color="#000000" />
    <!--  行选中背景颜色  -->
    <SolidColorBrush x:Key="DataGridRow.Selected.Background" Color="#F6F7FB" />
    <!--  行选中文字颜色  -->
    <SolidColorBrush x:Key="DataGridRow.Selected.Foreground" Color="#000000" />

    <Style TargetType="DataGrid">
        <!--  网格线颜色  -->
        <Setter Property="RowHeaderWidth" Value="0" />
        <Setter Property="BorderThickness" Value="{StaticResource DataGrid.BorderThickness}" />
        <Setter Property="HeadersVisibility" Value="Column" />
        <Setter Property="Background" Value="{StaticResource ColumnHeader.Background}" />
        <Setter Property="BorderBrush" Value="{StaticResource DataGrid.BorderBrush}" />
        <Setter Property="HorizontalGridLinesBrush" Value="#00E9ECF1" />
        <Setter Property="VerticalGridLinesBrush" Value="#00E9ECF1" />
        <Setter Property="UseLayoutRounding" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="AutoGenerateColumns" Value="False" />
        <Setter Property="CanUserAddRows" Value="False" />
        <Setter Property="CanUserReorderColumns" Value="False" />
        <Setter Property="CanUserResizeColumns" Value="False" />
        <Setter Property="CanUserResizeRows" Value="False" />
        <Setter Property="CanUserSortColumns" Value="False" />
        <Setter Property="GridLinesVisibility" Value="None" />
        <Setter Property="IsReadOnly" Value="True" />
        <Setter Property="RowHeight" Value="{StaticResource DataGridRow.Height}" />
        <Setter Property="SelectionMode" Value="Single" />
    </Style>
    <!--列头样式-->
    <Style TargetType="DataGridColumnHeader">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Foreground" Value="#000000" />
        <Setter Property="FontSize" Value="12" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Height" Value="28" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridColumnHeader">
                    <Border x:Name="BackgroundBorder" Width="Auto" Margin="-1,0"
                            BorderBrush="{StaticResource ColumnHeader.BorderBrush}"
                            BorderThickness="{StaticResource ColumnHeader.BorderThickness}"
                            SnapsToDevicePixels="True" UseLayoutRounding="True">
                        <ContentPresenter Margin="5,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--  行样式触发  背景色改变必须先设置cellStyle 因为cellStyle会覆盖rowStyle样式  -->
    <Style TargetType="{x:Type DataGridRow}">
        <Setter Property="Background" Value="{StaticResource DataGridRow.Normal.Background}" />
        <Setter Property="Foreground" Value="{StaticResource DataGridRow.MouseOver.Foreground}" />
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="UseLayoutRounding" Value="True" />
        <Setter Property="Validation.ErrorTemplate" Value="{x:Null}" />
        <Setter Property="BorderThickness" Value="{StaticResource DataGridRow.BorderThickness}" />
        <Setter Property="BorderBrush" Value="{StaticResource DataGridRow.BorderBrush}" />
        <Setter Property="ValidationErrorTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <TextBlock Margin="0,0,0,0" VerticalAlignment="Center" Foreground="Red" Text="!" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridRow}">
                    <Border x:Name="DGR_Border" Margin="0,0,0,-1"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="True" UseLayoutRounding="True">
                        <SelectiveScrollingGrid>
                            <SelectiveScrollingGrid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </SelectiveScrollingGrid.ColumnDefinitions>
                            <SelectiveScrollingGrid.RowDefinitions>
                                <RowDefinition Height="*" MinHeight="{StaticResource DataGridRow.Height}" />
                                <RowDefinition Height="Auto" />
                            </SelectiveScrollingGrid.RowDefinitions>
                            <DataGridCellsPresenter Grid.Column="1"
                                                    ItemsPanel="{TemplateBinding ItemsPanel}"
                                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            <DataGridDetailsPresenter Grid.Row="1" Grid.Column="1"
                                                      SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen,
                                                                                                                     ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical},
                                                                                                                     Converter={x:Static DataGrid.RowDetailsScrollingConverter},
                                                                                                                     RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
                                                      Visibility="{TemplateBinding DetailsVisibility}" />
                            <DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
                                               Visibility="{Binding HeadersVisibility,
                                                                    ConverterParameter={x:Static DataGridHeadersVisibility.Row},
                                                                    Converter={x:Static DataGrid.HeadersVisibilityConverter},
                                                                    RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
                        </SelectiveScrollingGrid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="{StaticResource DataGridRow.MouseOver.Foreground}" />
                            <Setter Property="Background" Value="{StaticResource DataGridRow.MouseOver.Background}" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Foreground" Value="{StaticResource DataGridRow.Selected.Foreground}" />
                            <Setter Property="Background" Value="{StaticResource DataGridRow.Selected.Background}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--  单元格样式触发  -->
    <Style TargetType="DataGridCell">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridCell">
                    <Border x:Name="Bg" Background="Transparent" UseLayoutRounding="True">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Foreground" Value="#000000" />
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

引用:

<StackPanel>
        <DataGrid x:Name="grd" ItemsSource="{Binding DataList}" AutoGenerateColumns="False" Margin="20">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Index}" Header="序号" Width="100"/>
                <DataGridTextColumn Binding="{Binding Name}" Header="名称" Width="200"/>
                <DataGridTextColumn Binding="{Binding Remark}" Header="时间" Width="*"/>
            </DataGrid.Columns>
        </DataGrid>
    </StackPanel>

效果:

样式四:

<Style TargetType="{x:Type DataGrid}">
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="BorderBrush" Value="#FF688CAF"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
        <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
        <Setter Property="AutoGenerateColumns" Value="False"/>
        <Setter Property="ColumnHeaderHeight" Value="50"/>
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="RowHeight" Value="50"/>
        <Setter Property="AlternationCount" Value="2"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGrid}">
                    <Grid>
                        <Border Background="White" CornerRadius="0">
                            <Border.Effect>
                                <DropShadowEffect ShadowDepth="0" Direction="0" Color="#FFDADADA"/>
                            </Border.Effect>
                        </Border>
                        <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>
                                            <Grid Background="White" Grid.Column="1">
                                                <Grid.Effect>
                                                    <DropShadowEffect Direction="270" Color="#FFF3F3F3"/>
                                                </Grid.Effect>
                                            </Grid>
                                            <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}}}"/>
                                            <DataGridColumnHeadersPresenter x:Name="PART_ColumnHeadersPresenter" Grid.Column="1" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Column}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                                            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" Grid.ColumnSpan="2" 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>
                    </Grid>
                </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>
    <Style TargetType="DataGridColumnHeader">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridColumnHeader">
                    <Grid Background="{TemplateBinding Background}">
                        <!--<Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="20"/>
                        </Grid.ColumnDefinitions>-->
                        <ContentPresenter Margin="20 0 0 0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                        <!--<TextBlock Grid.Column="1" x:Name="SortArrow" Visibility="Visible"   VerticalAlignment="Center" FontFamily="/DataGrid;component/Fonts/#FontAwesome"/>-->
                    </Grid>
                    <!--<ControlTemplate.Triggers>
                        <Trigger Property="SortDirection" Value="Ascending">
                            <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
                            <Setter TargetName="SortArrow" Property="Text" Value="&#xf160;" />
                        </Trigger>
                        <Trigger Property="SortDirection" Value="Descending">
                            <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
                            <Setter TargetName="SortArrow" Property="Text" Value="&#xf161;" />
                        </Trigger>
                    </ControlTemplate.Triggers>-->
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="DataGridRow">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="DataGridRow">
                    <Grid >
                        <Border x:Name="border" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="Transparent"/>
                        <DataGridCellsPresenter />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" TargetName="border"  Value="#00BCD4"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="BorderBrush" TargetName="border"  Value="#00BCD4"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="ItemsControl.AlternationIndex"
                         Value="0">
                <Setter Property="Background" Value="#F8F9FA" />
            </Trigger>
            <Trigger Property="ItemsControl.AlternationIndex"
                         Value="1">
                <Setter Property="Background" Value="White" />
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style TargetType="DataGridCell">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridCell">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="Foreground" Value="Black" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

使用方式:

<DataGrid x:Name="grd" ItemsSource="{Binding DataList}"  Margin="20" BorderThickness="0" Background="Transparent" CanUserSortColumns="False" SelectionMode="Single" HorizontalGridLinesBrush="Black" VerticalGridLinesBrush="Black" GridLinesVisibility="None" RowDetailsVisibilityMode="Collapsed" ForceCursor="True" >
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Index}" Header="序号" Width="*" ClipboardContentBinding="{x:Null}"/>
                <DataGridTextColumn Binding="{Binding Name}" Header="名称" Width="*" ClipboardContentBinding="{x:Null}"/>
                <DataGridTextColumn Binding="{Binding Remark}" Header="时间" Width="*" ClipboardContentBinding="{x:Null}"/>
            </DataGrid.Columns>
        </DataGrid>

效果:

样式五:

<!--DataGrid样式-->
    <Style TargetType="DataGrid">
        <Setter Property="RowHeaderWidth" Value="0"></Setter>
        <Setter Property="AutoGenerateColumns" Value="False"></Setter>
        <Setter Property="CanUserAddRows" Value="False"></Setter>
        <Setter Property="CanUserResizeColumns" Value="False"></Setter>
        <Setter Property="CanUserResizeRows" Value="False"></Setter>
        <Setter Property="HorizontalGridLinesBrush" Value="LightGray"></Setter>
        <Setter Property="VerticalGridLinesBrush" Value="LightGray"></Setter>
        <Setter Property="IsReadOnly" Value="True"></Setter>
        <Setter Property="BorderThickness" Value="1,0"></Setter>
        <Setter Property="BorderBrush" Value="LightGray"></Setter>
        <Setter Property="RowHeight" Value="30"></Setter>
        <Setter Property="VerticalScrollBarVisibility" Value="Auto"></Setter>
    </Style>
 
    <!--DataGrid表头样式-->
    <Style TargetType="DataGridColumnHeader">
        <Setter Property="FontSize" Value="16"></Setter>
        <Setter Property="Background" Value="{StaticResource BgColor}"></Setter>
        <Setter Property="BorderThickness" Value="0,0,1,1"></Setter>
        <Setter Property="BorderBrush" Value="LightGray"></Setter>
        <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
    </Style>
 
<!--DataGrid复选框样式-->
 <Style TargetType="CheckBox" x:Key="VerticalCheckBox">
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
        <Setter Property="FontSize" Value="16"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <StackPanel Name="sp" HorizontalAlignment="Center" >
                        <ContentPresenter HorizontalAlignment="Center" Margin="2"></ContentPresenter>
                        <Border x:Name="bd" BorderThickness="1.5" Height="20" Width="20" BorderBrush="Gray" >
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,0"  EndPoint="1,1">
                                    <GradientStop Color="LightGray" Offset="0.05"/>
                                    <GradientStop Color="White" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.Background>
                            <Path Name="checkPath" Width="18" Height="16" Stroke="Black"  StrokeThickness="2"></Path>
                        </Border>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="checkPath" Property="Data" Value="M 1.5,5 L 7,13 17,0"></Setter>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="bd" Property="Background" Value="LightGray"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
    <!--DataGrid单元格选中样式-->
    <Style TargetType="DataGridCell">
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="#FFC7CBCA"/>
                <Setter Property="BorderThickness" Value="0"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
 
    <!--DataGrid按钮样式 蓝-->
    <Style x:Key="btnInfo" TargetType="Button">
        <Setter Property="Width" Value="70"></Setter>
        <Setter Property="Foreground" Value="White"></Setter>
        <Setter Property="FontSize" Value="12"></Setter>
        <Setter Property="Margin" Value="0,2"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="bd" CornerRadius="3" BorderThickness="1" BorderBrush="LightGray" Background="#FF2F6DC1">
                        <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center"  />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsMouseOver" Value="True">
                            <Setter TargetName="bd" Property="Opacity" Value="0.6"></Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="bd" Property="Background" Value="#FF9BCEF7"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

效果:

下面是对DataGrid控件的补充:

控件常用方法:

BeginEdit:使DataGrid进入编辑状态。

CancelEdit:取消DataGrid的编辑状态。

CollapseRowGroup:闭合DataGrid的行分组。

CommitEdit:确认DataGrid的编辑完成。

ExpandRowGroup:展开DataGrid的行分组。

GetGroupFromItem:从具体Item中得到分组。

ScrollIntoView:滚动DataGrid视图。

控件常用属性:

AlternatingRowBackground:获取或设置一个笔刷用来描绘DataGrid奇数行的背景。

AreRowDetailsFrozen:获取或设置一个值用来判断是否冻结每行内容的详细信息。

AreRowGroupHeadersFrozen:获取或设置一个值用来判断是否冻结分组行的头部。

AutoGenerateColumns:获取或设置一个值用来判断是否允许自动生成表列。

CanUserReorderColumns:获取或设置一个值用来判断是否允许用户重新排列表列的位置。

CanUserSortColumns:获取或设置一个值用来判断是否允许用户按列对表中内容进行排序。

CellStyle:获取或设置单元格的样式。

ColumnHeaderHeight:获取或设置列头的高度。

ColumnHeaderStyle:获取或设置列头的样式。

Columns:获取组件中包含所有列的集合。

ColumnWidth:获取或设置列宽。

CurrentColumn:获取或设置包含当前单元格的列。

CurrentItem:获取包含当前单元格且与行绑定的数据项。

DragIndicatorStyle:获取或设置当拖曳列头时的样式。

DropLocationIndicatorStyle:获取或设置呈现列头时的样式。

FrozenColumnCount:获取或设置冻结列的个数。

GridLinesVisibility:获取或设置网格线的显示形式。

HeadersVisibility:获取或设置行头及列头的显示形式。

HorizontalGridLinesBrush:获取或设置水平网格线的笔刷。

HorizontalScrollBarVisibility:获取或设置水平滚动条的显示样式。

IsReadOnly:获取或设置DataGrid是否为只读。

MaxColumnWidth:获取或设置DataGrid的最大列宽。

MinColumnWidth:获取或设置DataGrid的最小列宽。

RowBackground:获取或设置用于填充行背景的笔刷。

RowDetailsTemplate:获取或设置被用于显示行详细部分的内容的模板。

RowDetailsVisibilityMode:获取或设置一个值用以判定行详细部分是否显示。

RowGroupHeaderStyles:获取呈现行分组头部的样式。

RowHeaderStyle:获取或设置呈现行头的样式。

RowHeaderWidth:获取或设置行头的宽度。

RowHeight:获取或设置每行的高度。

RowStyle:获取或设置呈现行时的样式。

SelectedIndex:获取或设置当前选中部分的索引值。

SelectedItem:获取或设置与当前被选中行绑定的数据项。

SelectedItems:获取与当前被选中的各行绑定的数据项们的列表(List)。

SelectionMode:获取或设置DataGrid的选取模式。

VerticalGridLinesBrush:获取或设置垂直网格线的笔刷。

VerticalScrollBarVisibility:获取或设置垂直滚动条的显示样式。

原:https://www.cnblogs.com/xiaomingg/p/8736305.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/399334.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

React解决样式冲突问题的方法

React解决样式冲突问题的方法 前言&#xff1a; 1、React最终编译打包后都在一个html页面中&#xff0c;如果在两个组件中取一样类名分别引用在自身&#xff0c;那么后者会覆盖前者。 2、默认情况下&#xff0c;只要导入了组件&#xff0c;不管组件有没有显示在页面中&#x…

Fikker安装SSL证书

Fikker 基于nginx&#xff0c; 订单详细中下载nginx格式&#xff0c; 解压后包含 yourdomain.com.crt 和 yourdomain.com.key 2个文件&#xff0c;将内容粘贴到输入框中.1、说明&#xff1a;在【主机管理】中设置网站域名对应的SSL 数字证书&#xff08;CRT/CER&#xff09;和证…

[数据结构与算法(严蔚敏 C语言第二版)]第1章 绪论(课后习题+答案解析)

1. 简述下列概念:数据、数据元素、数据项、数据对象、数据结构、逻辑结构、存储结构、抽象数据类型。 数据 数据是客观事物的符号表示&#xff0c;是所有能输人到计算机中并被计算机程序处理的符号的总称。数据是信息的载体&#xff0c;能够被计算机识别、存储和加工 数据元素…

Imx6ull交叉编译nginx

Imx6ull交叉编译nginx 需要下好的包 Nginx(下载压缩包源码) nginx-rtmp-module(可以下载压缩包源码也可以 git clone https://github.com/arut/nginx-rtmp-module.git) pcre&#xff08;下载源码&#xff09; zlib&#xff08;下载源码&#xff09; openssl&#xff08;下载源…

国外SEO升级攻略:如何应对搜索引擎算法变化?

搜索引擎优化&#xff08;SEO&#xff09;是一个动态的领域&#xff0c;搜索引擎的算法经常会发生变化&#xff0c;这意味着SEO专业人员需要保持更新的技术知识和策略&#xff0c; 以适应变化并提高网站的排名。 以下是一些应对搜索引擎算法变化的升级攻略&#xff1a; 创造…

Linux-0.11 kernel目录进程管理sched.c详解

Linux-0.11 kernel目录进程管理sched.c详解 sched.c主要功能是负责进程的调度&#xff0c;其最核心的函数就是schedule。除schedule以外&#xff0c; sleep_on和wake_up也是相对重要的函数。 schedule void schedule(void)schedule函数的基本功能可以分为两大块&#xff0c;…

数据结构-带头双向循环链表

前言&#xff1a; 链表有很多种&#xff0c;上一章结&#xff0c;我复盘了单链表&#xff0c;这一章节&#xff0c;主要针对双链表的知识点进行&#xff0c;整理复盘&#xff0c;如果将链表分类的话&#xff0c;有很多种&#xff0c;我就学习的方向考察的重点&#xff0c;主要…

一点就分享系列(实践篇6——上篇)【迟到补发】Yolo-High_level系列算法开源项目融入V8 旨在研究和兼容使用【持续更新】

一点就分享系列&#xff08;实践篇5-补更篇&#xff09;[迟到补发]—Yolo系列算法开源项目融入V8旨在研究和兼容使用[持续更新] 题外话 去年我一直复读机式强调High-level在工业界已经饱和的情况&#xff0c;目的是呼吁更多人看准自己&#xff0c;不管是数字孪生交叉领域&#…

React全家桶(一)

课程内容 1、React基础 2、React Hooks 3、React路由 4、React Redux 5、组件库 6、Immutable 7、Mobx 8、ReactTS 9、单元测试 10、dvaumi 一、React介绍 1、React起源与发展 2、React与传统MVC的关系 3、React的特性 4、虚拟DOM 二、create-react-app 1、全局安装…

数学小课堂:数学难题的意义(善用工具和跳出圈外)

文章目录 引言I 几何学中的古典难题(几何作图题)1.1 伽罗瓦1.2 伽罗瓦理论II 数学难题的启发2.1 跳出圈外2.2 工具的作用引言 毕达哥拉斯定理做保障:任何自然数的平方根都可以用圆规和直尺作出来 高斯用直尺和圆规作图解决正十七边形画法的问题,正十七边形的边长计算出来…

如何利用海外主机服务提高网站速度?

网站速度是任何在线业务成功的关键。快速的网站速度可以让用户更快地访问您的网站&#xff0c;增加页面浏览量。对于拥有全球用户的网站而言&#xff0c;选择一个海外主机服务商是提高网站速度的有效方法之一。下面是一些利用海外主机服务(如美国主机、香港主机)提高网站速度的…

Job System

01-C&#xff03;Job System概述官方文档 Unity C&#xff03; Job System允许用户编写与Unity其余部分良好交互的多线程代码&#xff0c;并使编写正确的代码变得更加容易。编写多线程代码可以提供高性能的好处。其中包括显着提高帧速率和延长移动设备的电池寿命。C&#xff03…

iOS开发-bugly符号表自动上传发布自动化shell

这里介绍的是通过build得到的app文件和dSYM文件来打包分发和符号表上传。 通过Archive方式打包和获得符号表的方式以后再说。 一&#xff1a;bugly工具jar包准备 bugly符号表工具下载地址&#xff1a;(下载完成后放入项目目录下&#xff0c;如不想加入git可通过gitIgnore忽略…

doPost的实际使用

目录 前言 一、doPost是什么&#xff1f; 二、使用步骤 1.doPost的请求方法 2.需要引入依赖 总结 前言 本章主要记录一下doPost的请求公用方法的使用。 一、doPost是什么&#xff1f; 它其实就是一个http的post请求方式。 二、使用步骤 1.doPost的请求方法 当我们系…

使用Endnote自定义参考文献格式

使用Endnote自定义参考文献格式 使用Endnote插入参考文献&#xff0c;若要设置期刊指定格式或自己想要的参考格式&#xff0c;使用EndNote自定义方法&#xff0c;步骤如下。 注&#xff1a;有的期刊会给出EndNote的格式文件&#xff0c;那样直接导入就行。 文章目录使用Endnot…

Python+Yolov8目标识别特征检测

Yolov8目标识别特征检测如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01;前言这篇博客针对<<Yolov8目标识别特征检测>>编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。 学习与应用推荐…

毕业设计常用模块之温湿度模块DHT11模块使用

DHT11是一款可以测量温度数据和湿度数据的传感器 产品特点 暖通空调、除湿器、农业、冷链仓储、测试及检测设备、消费品、汽车、自动控制、数据记录器、气 象站、家电、湿度调节器、医疗、其他相关湿度检测控制 外形尺寸 第3管脚&#xff1a;NC 是没有用的 典型电路 通信方式…

表格中的table-layout属性讲解

表格中的table-layout属性讲解 定义和用法 tableLayout 属性用来显示表格单元格、行、列的算法规则。 table-layout有三个属性值&#xff1a;auto、fixed、inherit。 fixed&#xff1a;固定表格布局 固定表格布局与自动表格布局相比&#xff0c;允许浏览器更快地对表格进行布…

excel 一对多数据查询公式 经典用法

所谓一对多&#xff0c;就是符合某个指定条件的有多个结果&#xff0c;要把这些结果都提取出来。 下面咱们就说说一对多查询的典型用法&#xff0c;先看数据源&#xff1a; A~D列是一些员工信息&#xff0c;要根据F2单元格指定的学历&#xff0c;提取出所有“本科”的人员姓名…

“一网统管”视频融合平台EasyCVR增加播放限制功能,支持全局及自定义设置视频播放时长

EasyCVR平台可在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;实现视频资源的鉴权管理、按需调阅、全网分发、智能分析等。平台可支持多协议、多类型的设备接入&#xff0c;包括国标GB28181、RTMP、RTSP/Onvif、海康SDK、大华SDK…