WPF UI开发教程自定义DataGrid样式

92 篇文章 9 订阅
92 篇文章 24 订阅

开发软件大部分都会用到数据显示控件,今天文章来自定义DataGrid样式。

先看下DataGrid运行效果图:

DataGrid样式修改了DataGridRow行和DataGridCell表格颜色,隔行换色,鼠标选中颜色等样式,下面是样式代码:

!--  行样式触发  -->
    <!--  背景色改变必须先设置cellStyle 因为cellStyle会覆盖rowStyle样式  -->
    <Style TargetType="DataGridRow">
        <Setter Property="Background" Value="#FFFFFF" />
        <Setter Property="Foreground" Value="#FF666666" />
        <Style.Triggers>
            <!--  隔行换色  -->
            <Trigger Property="AlternationIndex" Value="0">
                <Setter Property="Background" Value="#FFFAFAFA" />
            </Trigger>
            <Trigger Property="AlternationIndex" Value="1">
                <Setter Property="Background" Value="#FFF5F5F7" />
            </Trigger>

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

            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="#FFE3E3E5" />
                <Setter Property="Foreground" Value="#FF111111" />
            </Trigger>
        </Style.Triggers>
    </Style>

AlternationIndex设置单双数行背景行颜色,IsMouseOver鼠标移动到行背景颜色。

 <!--  单元格样式触发  -->
    <Style TargetType="DataGridCell">
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="Foreground" Value="#FF5A5A5A" />
        <Setter Property="FontSize" Value="11" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridCell">
                    <Grid>
                        <TextBlock />
                        <ContentPresenter
                            Margin="5,0,0,0"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Center" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <!--<Setter Property="Background" Value="White"/>
                <Setter Property="BorderThickness" Value="0"/>-->
                <Setter Property="Foreground" Value="#FF464646" />
            </Trigger>
        </Style.Triggers>
    </Style>

DataGridCell设置对齐方式,文本内容对齐方式,选中单元格背景颜色。

 <Style TargetType="DataGridColumnHeader">
        <Style.Resources>
            <ResourceDictionary />
        </Style.Resources>
        <Setter Property="UseLayoutRounding" Value="True" />
        <Setter Property="MinWidth" Value="0" />
        <Setter Property="MinHeight" Value="30" />
        <Setter Property="Foreground" Value="#FF5A5A5A" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Control.VerticalContentAlignment">
            <Setter.Value>
                <x:Static Member="VerticalAlignment.Center" />
            </Setter.Value>
        </Setter>
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridColumnHeader">
                    <Grid>
                        <Border
                            x:Name="BackgroundBorder"
                            Width="Auto"
                            BorderBrush="#FFE1E1E2"
                            BorderThickness="0,0,0,1">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <ContentPresenter
                                    Margin="5,0,0,0"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Center" />
                                <Path
                                    x:Name="SortArrow"
                                    Grid.Column="2"
                                    Width="8"
                                    Height="6"
                                    Margin="0,0,0,0"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Center"
                                    Data="M0,0 L1,0 0.5,1 z"
                                    Fill="Black"
                                    RenderTransformOrigin="1,1"
                                    Stretch="Fill"
                                    Visibility="Collapsed" />
                                <!--  竖线 分割线  -->
                                <Rectangle
                                    Grid.ColumnSpan="1"
                                    Width="1"
                                    HorizontalAlignment="Right"
                                    Fill="#FFE1E1E2" />
                                <!--<TextBlock  Background="Red">
                            <ContentPresenter></ContentPresenter></TextBlock>-->
                            </Grid>
                        </Border>

                        <Thumb Name="PART_LeftHeaderGripper" HorizontalAlignment="Left">
                            <Thumb.Style>
                                <Style TargetType="Thumb">
                                    <Style.Resources>
                                        <ResourceDictionary />
                                    </Style.Resources>
                                    <Setter Property="FrameworkElement.Width">
                                        <Setter.Value>
                                            <s:Double>8</s:Double>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="Panel.Background">
                                        <Setter.Value>
                                            <SolidColorBrush>#00FFFFFF</SolidColorBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="FrameworkElement.Cursor">
                                        <Setter.Value>
                                            <Cursor>SizeWE</Cursor>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="Control.Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="Thumb">
                                                <Border Padding="{TemplateBinding Control.Padding}" Background="{TemplateBinding Panel.Background}" />
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </Thumb.Style>
                        </Thumb>
                        <Thumb Name="PART_RightHeaderGripper" HorizontalAlignment="Right">
                            <Thumb.Style>
                                <Style TargetType="Thumb">
                                    <Style.Resources>
                                        <ResourceDictionary />
                                    </Style.Resources>
                                    <Setter Property="FrameworkElement.Width">
                                        <Setter.Value>
                                            <s:Double>8</s:Double>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="Panel.Background">
                                        <Setter.Value>
                                            <SolidColorBrush>#00FFFFFF</SolidColorBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="FrameworkElement.Cursor">
                                        <Setter.Value>
                                            <Cursor>SizeWE</Cursor>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="Control.Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="Thumb">
                                                <Border Padding="{TemplateBinding Control.Padding}" Background="{TemplateBinding Panel.Background}" />
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </Thumb.Style>
                        </Thumb>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

接下来设置DataGridColumnHeader头部样式,主要对宽度,高度,字体大小,光标样式,重写了Thumb样式。

<Style TargetType="DataGrid">
        <!--  网格线颜色  -->
        <Setter Property="CanUserResizeColumns" Value="false" />
        <Setter Property="Background" Value="{x:Null}" />
        <Setter Property="BorderBrush" Value="#FFD6D6D6" />
        <Setter Property="HorizontalGridLinesBrush">
            <Setter.Value>
                <SolidColorBrush Color="#FFEEEEEE" />
            </Setter.Value>
        </Setter>
        <Setter Property="VerticalGridLinesBrush">
            <Setter.Value>
                <SolidColorBrush Color="#FFEEEEEE" />
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGrid">
                    <Border
                        Padding="{TemplateBinding Control.Padding}"
                        Background="{TemplateBinding Control.Background}"
                        BorderBrush="{TemplateBinding Control.BorderBrush}"
                        BorderThickness="{TemplateBinding Control.BorderThickness}"
                        UseLayoutRounding="True">
                        <ScrollViewer Name="DG_ScrollViewer" Focusable="False">
                            <ScrollViewer.Template>
                                <ControlTemplate TargetType="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="ApplicationCommands.SelectAll" Focusable="False" Style="{DynamicResource {ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly=DataGrid}}" Width="{Binding Path=CellsPanelHorizontalOffset, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType=DataGrid}}">
                                            <Button.Visibility>
                                                <Binding Path="HeadersVisibility" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType=DataGrid}">
                                                    <Binding.ConverterParameter>
                                                        <DataGridHeadersVisibility>All</DataGridHeadersVisibility>
                                                    </Binding.ConverterParameter>
                                                </Binding>
                                            </Button.Visibility>
                                        </Button>-->
                                        <DataGridColumnHeadersPresenter Name="PART_ColumnHeadersPresenter" Grid.Column="1">
                                            <DataGridColumnHeadersPresenter.Visibility>
                                                <Binding Path="Visibility" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType=DataGrid}">
                                                    <Binding.ConverterParameter>
                                                        <DataGridHeadersVisibility>Column</DataGridHeadersVisibility>
                                                    </Binding.ConverterParameter>
                                                </Binding>
                                            </DataGridColumnHeadersPresenter.Visibility>
                                        </DataGridColumnHeadersPresenter>
                                        <ScrollContentPresenter
                                            Name="PART_ScrollContentPresenter"
                                            Grid.Row="1"
                                            Grid.ColumnSpan="2"
                                            CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}"
                                            CanHorizontallyScroll="False"
                                            CanVerticallyScroll="False"
                                            Content="{TemplateBinding ContentControl.Content}"
                                            ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
                                            ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" />
                                        <controls:DMScrollBar
                                            x:Name="PART_VerticalScrollBar"
                                            Grid.Row="1"
                                            Grid.Column="2"
                                            Maximum="{TemplateBinding ScrollViewer.ScrollableHeight}"
                                            Orientation="Vertical"
                                            ViewportSize="{TemplateBinding ScrollViewer.ViewportHeight}"
                                            Visibility="{TemplateBinding ScrollViewer.ComputedVerticalScrollBarVisibility}"
                                            Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
                                        <Grid Grid.Row="2" Grid.Column="1">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="{Binding Path=NonFrozenColumnsViewportHorizontalOffset, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType=DataGrid}}" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <controls:DMScrollBar
                                                x:Name="PART_HorizontalScrollBar"
                                                Grid.Column="1"
                                                Maximum="{TemplateBinding ScrollViewer.ScrollableWidth}"
                                                Orientation="Horizontal"
                                                ViewportSize="{TemplateBinding ScrollViewer.ViewportWidth}"
                                                Visibility="{TemplateBinding ScrollViewer.ComputedHorizontalScrollBarVisibility}"
                                                Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
                                        </Grid>
                                        <Grid.Triggers>
                                            <EventTrigger RoutedEvent="MouseWheel">
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation
                                                            Storyboard.TargetName="PART_VerticalScrollBar"
                                                            Storyboard.TargetProperty="Opacity"
                                                            To="1"
                                                            Duration="0:0:0.5" />
                                                        <DoubleAnimation
                                                            BeginTime="0:0:1"
                                                            Storyboard.TargetName="PART_VerticalScrollBar"
                                                            Storyboard.TargetProperty="Opacity"
                                                            To="0.1"
                                                            Duration="0:0:0.5" />
                                                        <DoubleAnimation
                                                            Storyboard.TargetName="PART_HorizontalScrollBar"
                                                            Storyboard.TargetProperty="Opacity"
                                                            To="1"
                                                            Duration="0:0:0.5" />
                                                        <DoubleAnimation
                                                            BeginTime="0:0:1"
                                                            Storyboard.TargetName="PART_HorizontalScrollBar"
                                                            Storyboard.TargetProperty="Opacity"
                                                            To="0.1"
                                                            Duration="0:0:0.5" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                            <EventTrigger RoutedEvent="MouseEnter" SourceName="PART_VerticalScrollBar">
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation
                                                            Storyboard.TargetName="PART_VerticalScrollBar"
                                                            Storyboard.TargetProperty="Opacity"
                                                            To="1"
                                                            Duration="0:0:1" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                            <EventTrigger RoutedEvent="MouseLeave" SourceName="PART_VerticalScrollBar">
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation
                                                            Storyboard.TargetName="PART_VerticalScrollBar"
                                                            Storyboard.TargetProperty="Opacity"
                                                            To="0.2"
                                                            Duration="0:0:1" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                            <EventTrigger RoutedEvent="MouseEnter" SourceName="PART_HorizontalScrollBar">
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation
                                                            Storyboard.TargetName="PART_HorizontalScrollBar"
                                                            Storyboard.TargetProperty="Opacity"
                                                            To="1"
                                                            Duration="0:0:1" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                            <EventTrigger RoutedEvent="MouseLeave" SourceName="PART_HorizontalScrollBar">
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation
                                                            Storyboard.TargetName="PART_HorizontalScrollBar"
                                                            Storyboard.TargetProperty="Opacity"
                                                            To="0.2"
                                                            Duration="0:0:1" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                        </Grid.Triggers>
                                    </Grid>
                                </ControlTemplate>
                            </ScrollViewer.Template>
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

最后自定义DataGrid样式,主要对滚动条ScrollViewer进行修改,DataGridColumnHeadersPresenter是以指定要添加列标题的位置的控件的可视化树中的位置。ScrollContentPresenter滚动条内容使用样式。滚动条controls:DMScrollBar的属性也重新定义了,鼠标滚轮移动时设置垂直滚动条动画,以及鼠标按下,鼠标离开的动画效果。

 推荐一款WPF MVVM框架开源项目:Newbeecoder.UI

Newbeecoder.UI开源项目

Demo下载:

Newbeecoder.UI开源项目icon-default.png?t=M3K6https://share.weiyun.com/py6W1dcK

  • 2
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
WPF自定义DataGrid控件是通过继承现有的DataGrid类,并在其基础上进行修改和扩展来实现的。 自定义DataGrid控件的步骤如下: 1. 创建一个自定义的类,继承自DataGrid。例如,可以命名为CustomDataGrid。 2. 在CustomDataGrid类中,可以添加额外的属性、依赖属性或附加属性,用于自定义DataGrid控件的特定行为或外观。 3. 重写或扩展DataGrid的现有方法、事件和样式,以满足自定义需求。例如,可以重写OnApplyTemplate()方法以应用自定义样式。 4. 根据需要,可以添加新的功能或控件,例如自定义列、单元格、行、排序、筛选、分页等等。 5. 在CustomDataGrid类中,可以通过编写自定义的模板(Template)来修改DataGrid的外观。例如,可以通过修改DataGrid的ControlTemplate来改变整个DataGrid的显示风格。 6. 编写完自定义类后,可以在XAML中使用自定义DataGrid控件,通过添加命名空间引用并将CustomDataGrid作为一个控件使用。可以设置自定义属性、事件和样式,达到期望的效果。 通过自定义DataGrid控件,可以根据实际需求对其进行扩展和修改,以满足特定的业务需求。由于WPF提供了强大的样式、模板和继承机制,因此可以轻松地自定义DataGrid控件,并且可以实现高度的灵活性和可扩展性。这样,可以根据项目的需求和用户的喜好来创建独特的、具有个性化的DataGrid控件。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值