备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式

2015-11-30 2839
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式一．前言 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。
原文: 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>
View Code

　　最后一个就是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>
View Code

使用示例：  

        <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

个人能力有限，本文内容仅供学习、探讨，欢迎指正、交流。

文章标签：
C#
虚拟化
前端开发
数据安全/隐私保护
大数据
关键词：
wpf样式
wpf datagrid
wpf自定义控件
wpf listview
wpf样式listview
杰克.陈
目录
相关文章
追逐时光者
|
7天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
追逐时光者
29 0
老码识途
|
4月前
|
C#
浅谈WPF之装饰器实现控件锚点
使用过visio的都知道，在绘制流程图时，当选择或鼠标移动到控件时，都会在控件的四周出现锚点，以便于修改大小，移动位置，或连接线等，那此功能是如何实现的呢？在WPF开发中，想要在控件四周实现锚点，可以通过装饰器来实现，今天通过一个简单的小例子，简述如何在WPF开发中，应用装饰器，仅供学习分享使用，如有不足之处，还请指正。
老码识途
59 1
Rick_1/2
|
8月前
|
C# Windows
WPF技术之图形系列Polygon控件
WPF Polygon是Windows Presentation Foundation (WPF)框架中的一个标记元素，用于绘制多边形形状。它可以通过设置多个点的坐标来定义多边形的形状，可以绘制任意复杂度的多边形。
Rick_1/2
449 0
Rick_1/2
|
8月前
|
C# Windows
WPF技术之RichTextBox控件
WPF RichTextBox是Windows Presentation Foundation (WPF)中提供的一个强大的文本编辑控件，它可以显示富文本格式的文本，支持多种文本处理操作。
Rick_1/2
343 0
老码识途
|
4月前
|
前端开发 C# 容器
浅谈WPF之控件拖拽与拖动
使用过office的visio软件画图的小伙伴都知道，画图软件分为两部分，左侧图形库，存放各种图标，右侧是一个画布，将左侧图形库的图标控件拖拽到右侧画布，就会生成一个新的控件，并且可以自由拖动。那如何在WPF程序中，实现类似的功能呢？今天就以一个简单的小例子，简述如何在WPF中实现控件的拖拽和拖动，仅供学习分享使用，如有不足之处，还请指正。
老码识途
105 2
老码识途
|
2月前
|
C#
浅谈WPF之样式与资源
WPF通过样式，不仅可以方便的设置控件元素的展示方式，给用户呈现多样化的体验，还简化配置，避免重复设置元素的属性，以达到节约成本，提高工作效率的目的，样式也是资源的一种表现形式。本文以一个简单的小例子，简述如何设置WPF的样式以及资源的应用，仅供学习分享使用，如有不足之处，还请指正。
老码识途
40 0
老码识途
|
2月前
|
前端开发 C#
浅谈WPF之DataGrid动态生成列
在日常开发中，DataGrid作为二维表格，非常适合数据的展示和统计。通常情况下，一般都有固定的格式和确定的数据列展示，但是在某些特殊情况下，也可能会需要用到动态生成列。本文以一些简单的小例子，简述在WPF开发中，如何动态生成DataGrid的行和列，仅供学习分享使用，如有不足之处，还请指正。
老码识途
91 2
Rick_1/2
|
8月前
|
数据挖掘 数据处理 C#
WPF技术之DataGrid控件
WPF DataGrid是一种可以显示和编辑数据的界面控件。它可以作为表格形式展示数据，支持添加、删除、修改、排序和分组操作。
Rick_1/2
173 0
追逐时光者
|
8天前
|
C# 开发者 C++
一套开源、强大且美观的WPF UI控件库
一套开源、强大且美观的WPF UI控件库
追逐时光者
125 0
老码识途
|
5月前
|
算法 C# UED
浅谈WPF之控件模板和数据模板
WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计，同时还推出了以模板为核心的新一代设计理念。在WPF中，通过引入模板，将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类：数据模板【Data Template】和控件模板【Control Template】。
老码识途
94 8
为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
解决方案技术解决方案
文档与社区文档开发者社区天池大赛培训与认证
权益中心免费试用高校计划企业扶持计划推荐返现计划
支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
关注阿里云
关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
阿里云APP阿里云微信
联系我们：4008013260
法律声明Cookies政策廉正举报安全举报联系我们加入我们
阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
© 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
浙公网安备 33010602009975号浙B2-20080101-4