zoukankan      html  css  js  c++  java
  • WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式

    一.前言

      申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接。

    本文主要内容:

    • DataGrid自定义样式;
    • ListView自定义样式;

    二.DataGrid自定义样式

    DataGrid是常用的数据列表显示控件,先看看实现的效果(动态图,有点大):

    DataGrid控件样式结构包括以下几个部分:

      • 列头header样式
      • 调整列头宽度的列分割线样式
      • 行样式
      • 行头调整高度样式
      • 行头部样式
      • 单元格样式

      在本文的样式定义中,默认开启了DataGrid的虚拟化,以支持大数据,若实际使用数据确定很小,应该关闭虚拟化,因为虚拟化本身也是有成本的。样式代码:  

    复制代码
        <!--调整列头宽度样式-->
        <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 Padding="{TemplateBinding Padding}" Background="Transparent" Margin="0 0 0 2">
                            <Rectangle HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Width="1" Fill="{TemplateBinding Background}" />
                        </Border>
                    </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="MinHeight" Value="25" />
            <Setter Property="Height" Value="30" />
            <Setter Property="Foreground" Value="{StaticResource TextForeground}" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Padding" Value="10,4,4,7" />
            <Setter Property="Margin" Value="0,0,0,0" />
            <Setter Property="FontWeight" Value="SemiBold"></Setter>
            <Setter Property="FontSize" Value="{StaticResource HeaderFontSize}" />
            <Setter Property="BorderThickness" Value="0,0,0,3" />
            <Setter Property="BorderBrush" Value="{StaticResource HeaderBorderBrush}" />
            <Setter Property="Background" Value="{StaticResource HeaderBackground}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="auto" />
                            </Grid.ColumnDefinitions>
                            <Border x:Name="BackgroundBorder" BorderThickness="{TemplateBinding BorderThickness}"
                                    Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" />
                            <ContentPresenter x:Name="HeaderContent"
                                              Content="{TemplateBinding Content}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              Margin="{TemplateBinding Padding}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              RecognizesAccessKey="True"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            <TextBlock x:Name="SortArrow" Style="{StaticResource FIcon}" Text="&#xe624;" Grid.Column="1" Width="20"
                                           Visibility="Collapsed" FontSize="16" Margin="1,1,3,1" />
    
                            <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" HorizontalContentAlignment="Left"
                                   Style="{StaticResource DefaultColumnHeaderGripperStyle}" />
    
                            <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" HorizontalContentAlignment="Right" Background="Transparent"
                                   Style="{StaticResource DefaultColumnHeaderGripperStyle}" Grid.Column="1" />
                        </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"></Setter>
                            </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="Text" Value="&#xe625;"/>
                            </Trigger>
                            <!--第一列左边不显示分割线-->
                            <Trigger Property="DisplayIndex" Value="2">
                                <Setter Property="Visibility" Value="Collapsed" TargetName="PART_LeftHeaderGripper" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <!--行样式-->
        <Style x:Key="DefaultDataGridRow" TargetType="{x:Type DataGridRow}">
            <Setter Property="Foreground" Value="{StaticResource TextForeground}" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Margin" Value="0,0,0,0" />
    
            <Style.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                    <Setter Property="Background" Value="{StaticResource ItemsAlternationContentBackground}" />
                </Trigger>
                <Trigger Property="IsSelected" Value="True">
                    <Setter  Property="Background" Value="{StaticResource ItemSelectedBackground}" />
                    <Setter Property="Foreground" Value="{StaticResource ItemSelectedForeground}" />
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsSelected" Value="True" />
                        <Condition Property="Selector.IsSelectionActive" Value="True" />
                    </MultiTrigger.Conditions>
                    <Setter  Property="Background" Value="{StaticResource ItemSelectedBackground}" />
                    <Setter Property="Foreground" Value="{StaticResource ItemSelectedForeground}" />
                </MultiTrigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True" />
                    </MultiDataTrigger.Conditions>
                    <Setter  Property="Background" Value="{StaticResource ItemMouseOverBackground}" />
                    <Setter Property="Foreground" Value="{StaticResource ItemMouseOverForeground}" />
                </MultiDataTrigger>
            </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="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,1,0" />
            <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="DefaultDataGridCell"
               TargetType="{x:Type DataGridCell}">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridCell}">
                        <Border BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
                                              Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                              Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
    
                            </ContentPresenter>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Foreground" Value="{StaticResource ItemSelectedForeground}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <!--表格DataGrid样式-->
        <Style x:Key="DefaultDataGrid" TargetType="{x:Type DataGrid}">
            <Setter Property="MinRowHeight" Value="25" />
            <Setter Property="Background" Value="{StaticResource ItemsContentBackground}" />
            <Setter Property="BorderBrush" Value="{StaticResource ControlBorderBrush}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="HorizontalGridLinesBrush" Value="{StaticResource GridLinesBrush}" />
            <Setter Property="VerticalGridLinesBrush" Value="{StaticResource GridLinesBrush}" />
            <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="GridLinesVisibility" Value="All" />
            <Setter Property="AlternationCount" Value="2"></Setter>
            <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
            <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"></Setter>
            <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 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>
                                            <!--表格头部-->
                                            <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}}}" />
                                            <!--主数据区-->
                                            <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="{StaticResource DisableOpacity}" 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>
    复制代码

      最后一个就是DataGrid的样式了,主要是重写定义了滑动条的布局,使得整体效果更加协调,属性AlternationCount可用来设置行交替色,而具体实现交替色是在上面行(DataGridRow)样式中通过触发器实现的。 

    使用和原本一样,示例代码:  

    复制代码
            <DataGrid Grid.Row="1" x:Name="gridList" Margin="3" GridLinesVisibility="None" BorderThickness="0">
                <DataGrid.Columns>
                    <DataGridTextColumn Width="120" Header="好好学习" Binding="{Binding Name}"></DataGridTextColumn>
                    <DataGridTextColumn Header="Manufacturer" Binding="{Binding Manufacturer}"></DataGridTextColumn>
                    <DataGridTemplateColumn Header="Mode">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <CheckBox core:ControlAttachProperty.FIconSize="18">选中我啊</CheckBox>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <DataGridTextColumn Header="Name" Binding="{Binding Name}" Width="300"></DataGridTextColumn>
                </DataGrid.Columns>
            </DataGrid>
    复制代码

     三.ListView自定义样式

      ListView作为列表控件,可以支持非常灵活的呈现效果,本文实现两种基本的样式效果,在后面的文章会有其他需求扩展的分享,效果图(动态图,有点大):

    如上面的效果图,ListView实现了两种基本样式:

      • 类似ListBox的基础列表样式;
      • 支持多列(效果类型DataGrid)的样式;

    ListView也是默认支持虚拟化的,也重新定义了滑动条的布局样式,所有样式定义代码:  

    复制代码
        <!--DefaultGridViewScrollViewerStyle-->
        <Style x:Key="DefaultGridViewScrollViewerStyle" TargetType="{x:Type ScrollViewer}" BasedOn="{StaticResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
            <Setter Property="Focusable" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ScrollViewer}">
                        <Grid Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <DockPanel Margin="{TemplateBinding Padding}">
                                <ScrollViewer DockPanel.Dock="Top" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
                                    <GridViewHeaderRowPresenter AllowsColumnReorder="{Binding TemplatedParent.View.AllowsColumnReorder, RelativeSource={RelativeSource TemplatedParent}}"
                                                                ColumnHeaderContainerStyle="{Binding TemplatedParent.View.ColumnHeaderContainerStyle, RelativeSource={RelativeSource TemplatedParent}}"
                                                                ColumnHeaderToolTip="{Binding TemplatedParent.View.ColumnHeaderToolTip, RelativeSource={RelativeSource TemplatedParent}}"
                                                                ColumnHeaderStringFormat="{Binding TemplatedParent.View.ColumnHeaderStringFormat, RelativeSource={RelativeSource TemplatedParent}}"
                                                                ColumnHeaderContextMenu="{Binding TemplatedParent.View.ColumnHeaderContextMenu, RelativeSource={RelativeSource TemplatedParent}}"
                                                                ColumnHeaderTemplate="{Binding TemplatedParent.View.ColumnHeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                                                                Columns="{Binding TemplatedParent.View.Columns, RelativeSource={RelativeSource TemplatedParent}}"
                                                                ColumnHeaderTemplateSelector="{Binding TemplatedParent.View.ColumnHeaderTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}"
                                                                Margin="0" Visibility="Visible" x:Name="PART_Header" Height="auto"
                                                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                </ScrollViewer>
                                <ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
                                                        CanContentScroll="{TemplateBinding CanContentScroll}"
                                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                                        Content="{TemplateBinding Content}"
                                                        KeyboardNavigation.DirectionalNavigation="Local"
                                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </DockPanel>
                            <ScrollBar x:Name="PART_HorizontalScrollBar" Cursor="Arrow" Maximum="{TemplateBinding ScrollableWidth}"
                                       Minimum="0.0" Orientation="Horizontal" Grid.Row="1"
                                       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                       Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                                       ViewportSize="{TemplateBinding ViewportWidth}" />
                            <ScrollBar x:Name="PART_VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}"
                                       Minimum="0.0" Orientation="Vertical"
                                       Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                       Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                                       ViewportSize="{TemplateBinding ViewportHeight}" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <DataTrigger Binding="{Binding Columns, ElementName=PART_Header}" Value="{x:Null}">
                                <Setter Property="Visibility" TargetName="PART_Header" Value="Collapsed"></Setter>
                            </DataTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <!--DefaultListViewItem-->
        <Style x:Key="DefaultListViewItem" TargetType="{x:Type ListViewItem}">
            <Setter Property="Foreground" Value="{StaticResource TextForeground}" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="MinHeight" Value="25" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="Background" Value="Transparent"></Setter>
            <Setter Property="Padding" Value="3,0,0,0"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListViewItem}">
                        <Border x:Name="Bd" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" Margin="{TemplateBinding Margin}">
                            <Grid x:Name="PART_Root" Margin="{TemplateBinding Padding}">
                                <GridViewRowPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                <ContentPresenter x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed" />
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="GridView.ColumnCollection" Value="{x:Null}">
                                <Setter TargetName="contentPresenter" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource ItemSelectedBackground}" />
                                <Setter Property="Foreground" Value="{StaticResource ItemSelectedForeground}" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource ItemMouseOverBackground}" />
                                <Setter Property="Foreground" Value="{StaticResource ItemMouseOverForeground}" />
                            </Trigger>
                            <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                                <Setter Property="Background" Value="{StaticResource ItemsAlternationContentBackground}" />
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true" />
                                    <Condition Property="Selector.IsSelectionActive" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" Value="{StaticResource ItemSelectedBackground}" />
                                <Setter Property="Foreground" Value="{StaticResource ItemSelectedForeground}" />
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsEnabled" Value="False" />
                                    <Condition Property="IsSelected" Value="True" />
                                </MultiTrigger.Conditions>
                                <MultiTrigger.Setters>
                                    <Setter TargetName="PART_Root" Property="Opacity" Value="{StaticResource DisableOpacity}" />
                                </MultiTrigger.Setters>
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <!--NonSelectableListViewContainerStyle:无选中状态、支持交替色样式-->
        <Style x:Key="NonSelectableListViewContainerStyle" TargetType="{x:Type ListViewItem}">
            <Setter Property="Foreground" Value="{StaticResource TextForeground}" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="MinHeight" Value="25" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="Background" Value="Transparent"></Setter>
            <Setter Property="Padding" Value="3,0,0,0"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListViewItem}">
                        <Border x:Name="Bd" Background="{TemplateBinding Background}"
                                BorderThickness="{TemplateBinding Border.BorderThickness}" SnapsToDevicePixels="true">
                            <GridViewRowPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource ItemMouseOverBackground}" />
                                <Setter Property="Foreground" Value="{StaticResource ItemMouseOverForeground}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                    <Setter Property="Background" Value="Transparent" />
                </Trigger>
                <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                    <Setter Property="Background" Value="{StaticResource ItemsAlternationContentBackground}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    
        <!--DefaultListView-->
        <Style x:Key="DefaultListView" TargetType="{x:Type ListView}">
            <Setter Property="BorderBrush" Value="{StaticResource ControlBorderBrush}" />
            <Setter Property="Background" Value="{StaticResource ItemsContentBackground}" />
            <Setter Property="BorderThickness" Value="1" />
            <!--False会关闭虚拟化-->
            <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
            <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"></Setter>
            <Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Recycling" />
            <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
            <Setter Property="AlternationCount" Value="2" />
            <!-- Things taken from the original template. -->
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="SelectionMode" Value="Single" />
            <Setter Property="ItemContainerStyle" Value="{StaticResource DefaultListViewItem}"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListView">
                        <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">
                            <ScrollViewer Padding="{TemplateBinding Padding}" Style="{StaticResource DefaultGridViewScrollViewerStyle}">
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsGrouping" Value="true">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="Border" Property="Opacity" Value="{StaticResource DisableOpacity}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <!--ColumnHeader-->
    
        <!--GridViewColumnHeaderGripper-->
        <Style x:Key="GridViewColumnHeaderGripper" TargetType="Thumb">
            <Setter Property="Width" Value="18" />
            <Setter Property="Background" Value="{StaticResource HeaderBorderBrush}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border Padding="{TemplateBinding Padding}" Background="Transparent" Margin="0 0 0 2">
                            <Rectangle Width="1" Fill="{TemplateBinding Background}" HorizontalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <!--DefaultGridViewColumnHeader-->
        <Style x:Key="DefaultGridViewColumnHeader" TargetType="GridViewColumnHeader">
            <Setter Property="Foreground" Value="{StaticResource TextForeground}" />
            <Setter Property="Background" Value="{StaticResource HeaderBackground}"></Setter>
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Padding" Value="4 2 4 2" />
            <Setter Property="MinHeight" Value="26"/>
            <Setter Property="Height" Value="30"/>
            <Setter Property="BorderThickness" Value="0,0,0,3" />
            <Setter Property="BorderBrush" Value="{StaticResource HeaderBorderBrush}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewColumnHeader">
                        <Grid>
                            <Rectangle Fill="Transparent" IsHitTestVisible="True" />
                            <Border x:Name="HeaderBorder" Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}"
                                    BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                                <ContentPresenter x:Name="HeaderContent" Content="{TemplateBinding Content}"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}" Margin="5,1,5,1"
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True"
                                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </Border>
                            <Thumb x:Name="PART_HeaderGripper" HorizontalAlignment="Right" Margin="0,0,-9,0" Style="{StaticResource GridViewColumnHeaderGripper}" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter TargetName="HeaderContent" Property="Margin" Value="6,1,6,1" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock TextBlock.FontWeight="SemiBold" Text="{Binding}" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <!--Floating 的 Role 值标识当前是拖放操作的对象的列-->
                <Trigger Property="Role" Value="Floating">
                    <Setter Property="Opacity" Value="0.7" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="GridViewColumnHeader">
                                <Canvas Name="PART_FloatingHeaderCanvas">
                                    <Rectangle Fill="#60000000" Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight}" />
                                </Canvas>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    复制代码

    使用示例:  

    复制代码
            <ListView Grid.Row="1" x:Name="gridList0" Style="{StaticResource DefaultListView}" Margin="3" >
                <!--<ListViewItem>2222</ListViewItem>
                <ListViewItem>2222</ListViewItem>
                <ListViewItem>2222</ListViewItem>
                <ListViewItem>2222</ListViewItem>-->
            </ListView>
            <ListView Margin="3" Grid.Row="2" x:Name="gridList"  Style="{StaticResource DefaultListView}" AlternationCount="1">
                <ListView.View>
                    <GridView ColumnHeaderContainerStyle="{StaticResource DefaultGridViewColumnHeader}">
                        <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="auto"></GridViewColumn>
                        <GridViewColumn Header="Manufacturer" DisplayMemberBinding="{Binding Manufacturer}" Width="200"></GridViewColumn>
                        <GridViewColumn Header="Mode" DisplayMemberBinding="{Binding Mode}" Width="200"></GridViewColumn>
                        <GridViewColumn Header="Name" Width="auto">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <CheckBox Content="{Binding Name}"></CheckBox>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>
    复制代码

    附录:参考引用

     WPF自定义控件与样式(1)-矢量字体图标(iconfont)

    WPF自定义控件与样式(2)-自定义按钮FButton

    WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

    WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

    WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展

    WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式

    版权所有,文章来源:http://www.cnblogs.com/anding

  • 相关阅读:
    自学人工智能之数学篇,数学入门并不难
    2018-8-10-win10-uwp-使用资源在后台创建控件
    2019-9-2-win10-uwp-弹起键盘不隐藏界面元素
    2019-7-31-程序猿修养-日志应该如何写
    2018-11-19-WPF-在image控件用鼠标拖拽出矩形
    2019-8-31-C#-如何给-ValueTuple-返回值添加注释
    2019-11-12-浅谈-Windows-桌面端触摸架构演进
    2018-8-10-win10-uwp-打开文件管理器选择文件
    2018-8-10-win10-uwp-验证输入-自定义用户控件
    2019-8-31-dotnet-特性-DynamicallyInvokable-是用来做什么的
  • 原文地址:https://www.cnblogs.com/ljdong7/p/12115204.html
Copyright © 2011-2022 走看看