DataGrid模版(分组效果)

2016-10-27 19:32:36来源:CSDN作者:ff1990723人点击

样式效果图



其中,矢量字体图标(FIcon之类)请参考wpf使用矢量图标



1.DataGrid总体样式

    <!--  表格DataGrid样式  -->    <Style TargetType="{x:Type DataGrid}">        <Setter Property="MinRowHeight" Value="25" />        <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />        <Setter Property="Background" Value="Transparent" />        <Setter Property="BorderBrush" Value="{StaticResource ControlBorderBrush}" />        <Setter Property="BorderThickness" Value="0" />        <Setter Property="GridLinesVisibility" Value="Horizontal" />        <Setter Property="HorizontalGridLinesBrush" Value="#E7E5E5" />        <Setter Property="CanUserAddRows" Value="False" />        <Setter Property="CanUserDeleteRows" Value="False" />        <Setter Property="ColumnHeaderStyle" Value="{StaticResource DefaultDataGridColumnHeader}" />        <Setter Property="RowHeaderStyle" Value="{StaticResource DefaultDataGridRowHeader}" />        <Setter Property="CellStyle" Value="{StaticResource DefaultDataGridCell}" />        <Setter Property="RowStyle" Value="{StaticResource DefaultDataGridRow}" />        <Setter Property="HeadersVisibility" Value="All" />        <Setter Property="EnableRowVirtualization" Value="True" />        <Setter Property="EnableColumnVirtualization" Value="False" />        <Setter Property="AutoGenerateColumns" Value="False" />        <Setter Property="IsReadOnly" Value="True" />        <Setter Property="SelectionMode" Value="Single" />        <Setter Property="SelectionUnit" Value="FullRow" />        <Setter Property="AlternationCount" Value="2" />        <Setter Property="ScrollViewer.CanContentScroll" Value="True" />        <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True" />        <Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Recycling" />        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />        <!--  列头移动列时候分割线样式  -->        <Setter Property="DropLocationIndicatorStyle">            <Setter.Value>                <Style TargetType="Separator">                    <Setter Property="Background" Value="{StaticResource HeaderBorderBrush}" />                    <Setter Property="Width" Value="2.5" />                    <Setter Property="Template">                        <Setter.Value>                            <ControlTemplate TargetType="Separator">                                <Rectangle Width="{TemplateBinding Width}"                                           Height="{TemplateBinding Height}"                                           Fill="{TemplateBinding Background}" />                            </ControlTemplate>                        </Setter.Value>                    </Setter>                </Style>            </Setter.Value>        </Setter>        <!--<Style.Triggers>            <Trigger Property="IsGrouping" Value="true">                <Setter Property="ScrollViewer.CanContentScroll" Value="false" />            </Trigger>        </Style.Triggers>-->    </Style>

2.行样式

  <!--  行样式  -->    <Style x:Key="DefaultDataGridRow" TargetType="{x:Type DataGridRow}">        <Setter Property="Foreground" Value="#949FBA" />        <Setter Property="Background" Value="Transparent" />        <Setter Property="Margin" Value="0,0,0,0" />        <Setter Property="Height" Value="50" />        <Setter Property="BorderBrush" Value="#E5E3E3" />        <Setter Property="BorderThickness" Value="0 0.5 0 0" />        <Setter Property="VerticalAlignment" Value="Center" />        <Setter Property="FontFamily" Value="黑体" />        <Style.Triggers>            <Trigger Property="IsMouseOver" Value="True">                <Setter Property="Background" Value="#DDF3FE" />            </Trigger>        </Style.Triggers>    </Style>

3.单元格样式(Trigger的作用是为了选中的行失去焦点后,字体颜色会变成想要的颜色,否则会变成默认色比如白色)

  <!--  单元格样式  -->    <Style x:Key="DefaultDataGridCell" TargetType="{x:Type DataGridCell}">        <Setter Property="Background" Value="Transparent" />        <Setter Property="BorderBrush" Value="Transparent" />        <Setter Property="HorizontalContentAlignment" Value="Center" />        <Setter Property="VerticalContentAlignment" Value="Center" />        <Setter Property="BorderThickness" Value="0" />        <Setter Property="SnapsToDevicePixels" Value="True" />        <Setter Property="Padding" Value="0" />        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="{x:Type DataGridCell}">                    <Border Background="{TemplateBinding Background}"                            BorderBrush="{TemplateBinding BorderBrush}"                            BorderThickness="{TemplateBinding BorderThickness}"                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />                    </Border>                    <ControlTemplate.Triggers>                      <Trigger Property="IsSelected" Value="True">                            <Setter Property="Foreground" Value="Black" />                            <Setter Property="Background" Value="#A8E1FD" />                        </Trigger>                    </ControlTemplate.Triggers>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>

4.头部样式集合

   <!--  Region 头部样式集合  -->    <!--  行头部样式  -->    <Style x:Key="DefaultDataGridRowHeader" TargetType="{x:Type DataGridRowHeader}">        <Setter Property="HorizontalContentAlignment" Value="Stretch" />        <Setter Property="VerticalContentAlignment" Value="Center" />        <Setter Property="Background" Value="Transparent" />        <Setter Property="BorderBrush" Value="Transparent" />        <Setter Property="BorderThickness" Value="0,0,0,0" />        <Setter Property="Margin" Value="0,0,0,0" />        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="{x:Type DataGridRowHeader}">                    <Grid>                        <Border Margin="{TemplateBinding Margin}"                                Background="{TemplateBinding Background}"                                BorderBrush="{TemplateBinding BorderBrush}"                                BorderThickness="{TemplateBinding BorderThickness}"                                Padding="{TemplateBinding Padding}"                                SnapsToDevicePixels="True">                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />                        </Border>                    </Grid>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>    <!--  列头header样式  -->    <Style x:Key="DefaultDataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">        <Setter Property="SnapsToDevicePixels" Value="True" />        <Setter Property="MinWidth" Value="5" />        <Setter Property="Height" Value="60" />        <Setter Property="Foreground" Value="White" />        <Setter Property="HorizontalContentAlignment" Value="Center" />        <Setter Property="VerticalContentAlignment" Value="Center" />        <Setter Property="Padding" Value="10" />        <Setter Property="Margin" Value="0,0,0,0" />        <Setter Property="FontFamily" Value="黑体" />        <Setter Property="FontSize" Value="26" />        <Setter Property="BorderThickness" Value="0" />        <Setter Property="BorderBrush" Value="{StaticResource HeaderBorderBrush}" />        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">                    <Grid>                        <Grid.ColumnDefinitions>                            <ColumnDefinition Width="*" />                            <ColumnDefinition Width="auto" />                        </Grid.ColumnDefinitions>                        <Border x:Name="BackgroundBorder"                                Grid.ColumnSpan="2"                                Background="#208FE7"                                BorderBrush="{TemplateBinding BorderBrush}"                                BorderThickness="0" />                        <TextBlock Margin="{TemplateBinding Padding}"                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"                                   FontSize="18"                                   FontWeight="Bold"                                   Foreground="#D4EAFA"                                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"                                   Text="{TemplateBinding Content}" />                        <TextBlock x:Name="SortArrow"                                   Grid.Column="1"                                   Width="20"                                   Margin="0 0 10 0"                                   FontSize="16"                                   Foreground="White"                                   RenderTransformOrigin="0.5,0.5"                                   Style="{StaticResource FIcon}"                                   Text=""                                   Visibility="Collapsed">                            <TextBlock.RenderTransform>                                <RotateTransform Angle="180" />                            </TextBlock.RenderTransform>                        </TextBlock>                    </Grid>                    <ControlTemplate.Triggers>                        <!--  显示排序标示  -->                        <MultiTrigger>                            <MultiTrigger.Conditions>                                <Condition Property="IsMouseOver" Value="True" />                                <Condition Property="SortDirection" Value="{x:Null}" />                                <Condition Property="CanUserSort" Value="true" />                            </MultiTrigger.Conditions>                            <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />                        </MultiTrigger>                        <!--  可排序列鼠标样式  -->                        <Trigger Property="CanUserSort" Value="True">                            <Setter Property="Cursor" Value="Hand" />                        </Trigger>                        <!--  升序  -->                        <Trigger Property="SortDirection" Value="Ascending">                            <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />                        </Trigger>                        <!--  降序  -->                        <Trigger Property="SortDirection" Value="Descending">                            <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />                            <Setter TargetName="SortArrow" Property="RenderTransform">                                <Setter.Value>                                    <RotateTransform Angle="0" />                                </Setter.Value>                            </Setter>                        </Trigger>                        <!--  第一列左边不显示分割线  -->                        <!--<Trigger Property="DisplayIndex" Value="2">                            <Setter TargetName="PART_LeftHeaderGripper" Property="Visibility" Value="Collapsed" />                        </Trigger>-->                    </ControlTemplate.Triggers>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>    <!--  调整列头宽度样式  -->    <Style x:Key="DefaultColumnHeaderGripperStyle" TargetType="{x:Type Thumb}">        <Setter Property="Width" Value="8" />        <Setter Property="Background" Value="{StaticResource HeaderBorderBrush}" />        <Setter Property="Cursor" Value="SizeWE" />        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="{x:Type Thumb}">                    <Border Margin="0 0 0 2"                            Background="Transparent"                            Padding="{TemplateBinding Padding}">                        <Rectangle Width="1"                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"                                   Fill="{TemplateBinding Background}" />                    </Border>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>    <!--  EndRegion  -->

5.分组的样式

<ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton">        <Grid Width="30" Height="30">            <TextBlock x:Name="iconBorder"                       Background="Transparent"                       FontSize="28"                       FontWeight="ExtraBold"                       Foreground="#4E525D"                       Style="{StaticResource FIcon}"                       Text="" />            <TextBlock x:Name="icon"                       Background="Transparent"                       FontSize="18"                       Foreground="#4E525D"                       RenderTransformOrigin="0.5,0.5"                       Style="{StaticResource FIcon}"                       Text="" />        </Grid>        <ControlTemplate.Triggers>            <Trigger Property="ToggleButton.IsMouseOver" Value="true">                <Setter TargetName="iconBorder" Property="Foreground" Value="Black" />                <Setter TargetName="icon" Property="Foreground" Value="Black" />            </Trigger>            <Trigger Property="IsChecked" Value="true">                <Setter TargetName="icon" Property="RenderTransform">                    <Setter.Value>                        <RotateTransform Angle="180" />                    </Setter.Value>                </Setter>            </Trigger>        </ControlTemplate.Triggers>    </ControlTemplate>    <Style x:Key="DataGridExpanderStyle" TargetType="Expander">        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="Expander">                    <Grid>                        <Grid.RowDefinitions>                            <RowDefinition Height="Auto" />                            <RowDefinition Name="ContentRow" Height="0" />                        </Grid.RowDefinitions>                        <Border Name="border"                                Grid.Row="0"                                Height="50"                                BorderBrush="#E7E5E5"                                BorderThickness="0 0 0 0">                            <WrapPanel>                                <CheckBox x:Name="cbSelectGroup"                                          Margin="20 10 0 10"                                          HorizontalAlignment="Left"                                          VerticalAlignment="Center"                                          Command="{Binding DataContext.SelectGroupCommand,                                                            RelativeSource={RelativeSource AncestorType=DataGrid}}"                                          CommandParameter="{TemplateBinding Header}"                                          Visibility="{Binding DataContext.CbSelectAllVisible,                                                               RelativeSource={RelativeSource AncestorType=DataGrid},                                                               Mode=TwoWay}" />                                <ToggleButton Margin="20 10 0 10"                                              VerticalAlignment="Center"                                              IsChecked="{Binding Path=IsExpanded,                                                                  Mode=TwoWay,                                                                  RelativeSource={RelativeSource TemplatedParent}}"                                              OverridesDefaultStyle="True"                                              Template="{StaticResource ExpanderToggleButton}" />                                <ContentPresenter Grid.Column="1"                                                  Margin="20 10 0 10"                                                  VerticalAlignment="Center"                                                  ContentSource="Header"                                                  RecognizesAccessKey="True" />                            </WrapPanel>                        </Border>                        <ContentPresenter Grid.Row="1" />                    </Grid>                    <ControlTemplate.Triggers>                        <Trigger Property="IsExpanded" Value="True">                            <Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content, Path=DesiredHeight}" />                        </Trigger>                        <Trigger Property="IsExpanded" Value="False">                            <Setter TargetName="border" Property="BorderThickness" Value="0 0 0 1" />                        </Trigger>                    </ControlTemplate.Triggers>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>


使用

  <DataGrid Name="editGrid"                  Grid.Row="3"                  Width="{Binding ElementName=this,                                  Path=ActualWidth,                                  Converter={x:Static local:XConverter.ActualWidthMinusMargin},                                  ConverterParameter=30}"                  Background="White"                  BorderThickness="0"                  ItemsSource="{Binding ICManageModel}">            <DataGrid.Columns>                <DataGridTemplateColumn Width="auto"                                        Header=""                                        Visibility="{Binding Visible,                                                             Source={StaticResource proxy}}">                    <DataGridTemplateColumn.CellTemplate>                        <DataTemplate>                            <CheckBox Margin="50 0 0 0" IsChecked="{Binding IsCbCheked, UpdateSourceTrigger=PropertyChanged}" />                        </DataTemplate>                    </DataGridTemplateColumn.CellTemplate>                </DataGridTemplateColumn>                <DataGridTextColumn Width="*"                                    Binding="{Binding ICSequence}"                                    Header="卡号" />                <DataGridTextColumn Width="*"                                    Binding="{Binding OwnerName}"                                    Header="姓名" />                <DataGridTextColumn Width="*"                                    Binding="{Binding HasHostAuthority,                                                      Converter={x:Static local:XConverter.Type2HeadConverter}}"                                    Header="门口机权限" />                <DataGridTextColumn Width="*"                                    Binding="{Binding State,                                                      Converter={x:Static local:XConverter.Type2HeadConverter}}"                                    Header="注册状态" />                <DataGridTextColumn Width="*"                                    Binding="{Binding DueDate}"                                    Header="到期时间" />                <DataGridTemplateColumn Width="*" Header="操作">                    <DataGridTemplateColumn.CellTemplate>                        <DataTemplate>                            <Grid Background="Transparent">                                <Grid.Resources />                                <Grid.ColumnDefinitions>                                    <ColumnDefinition Width="auto" />                                    <ColumnDefinition Width="auto" />                                </Grid.ColumnDefinitions>                                <local:ButtonX x:Name="btnEdit"                                               Grid.Column="0"                                               Margin="10 0 10 0"                                               Click="btnEdit_Click"                                               FIcon=""                                               FIconSize="24"                                               FontSize="25"                                               Foreground="#A0A2A2"                                               MouseOverBackground="Transparent"                                               MouseOverForeground="Black"                                               PressedForeground="Black"                                               Style="{StaticResource ButtonX_Transparency}"                                               ToolTip="编辑" />                                <local:ButtonX x:Name="btnDeleted"                                               Grid.Column="1"                                               Width="Auto"                                               Margin="10 0 0 0"                                               Click="btnDeleted_Click"                                               FIcon=""                                               FIconMargin="0 0 0 2"                                               FIconSize="28"                                               FontSize="24"                                               Foreground="#A0A2A2"                                               MouseOverBackground="Transparent"                                               MouseOverForeground="Red"                                               PressedForeground="Red"                                               Style="{StaticResource ButtonX_Transparency}"                                               ToolTip="删除" />                            </Grid>                        </DataTemplate>                    </DataGridTemplateColumn.CellTemplate>                </DataGridTemplateColumn>            </DataGrid.Columns>            <DataGrid.GroupStyle>                <GroupStyle />            </DataGrid.GroupStyle>        </DataGrid>


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台