devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

WPF中ListView相关问题，ListView样式和模板，ListView背景颜色交替（奇偶行不同颜色）,ListView标题填充_wpf listview 行颜色

作者：我家小花儿 | 2024-05-05 06:45:40

赞

踩

wpf listview 行颜色

WPF中ListView相关问题，ListView背景颜色交替（奇偶行不同颜色），ListView标题填充

一、ListView样式和模板

    ListView的模板由三部分组成，分别为Thumb、GridViewColumnHeader、ListViewItem。其中Thumb在GridViewColumnHeader的模板中，参考以下自定义模板：

    1、GridViewColumnHeader

  1.     <Style  TargetType="{x:Type GridViewColumnHeader}">
  2.         <Setter Property="OverridesDefaultStyle" Value="True"/>
  3.         <Setter Property="Template">
  4.             <Setter.Value>
  5.                 <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
  6.                     <Grid Name="g" Background="#1578F6" >
  7.  
  8.                         <Border Name="bd" Padding="{TemplateBinding Padding}" MaxHeight="{TemplateBinding Height}">
  9.                             <!--<ContentPresenter Margin="5,4,1,3" 
  10.                                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>-->
  11.                             <ContentPresenter RecognizesAccessKey="True" 
  12.                                           Content="{TemplateBinding ContentControl.Content}" 
  13.                                           ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" 
  14.                                           ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" 
  15.                                           Name="HeaderContent" Margin="5,4,1,3" 
  16.                                            
  17.                                            
  18.                                           SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
  19.                         </Border>
  20.                         <Thumb Name="PART_HeaderGripper" Template="{StaticResource tmpForThumb}" HorizontalAlignment="Right" Margin="0,0,-1,0"/>
  21.                     </Grid>
  22.                     <ControlTemplate.Triggers>
  23.                         <Trigger Property="IsMouseOver" Value="True">
  24.                             <Setter TargetName="g" Property="Background" Value="#0A6CE7">
  25.  
  26.                             </Setter>
  27.                         </Trigger>
  28.                         <Trigger Property="IsPressed" Value="True">
  29.                             <Setter Property="Margin" Value="6,5,1,3" TargetName="HeaderContent"/>
  30.                         </Trigger>
  31.                     </ControlTemplate.Triggers>
  32.                 </ControlTemplate>
  33.             </Setter.Value>
  34.         </Setter>
  35.     </Style>

    其中的<Thumb Name="PART_HeaderGripper" Template="{StaticResource tmpForThumb}" HorizontalAlignment="Right" Margin="0,0,-1,0"/>绑定下面的Thumb模板，实现表头标题之间互相伸缩。

    2、Thumb

  1.     <ControlTemplate x:Key="tmpForThumb" TargetType="{x:Type Thumb}">
  2.         <Border>
  3.             <Border BorderThickness="1 0 1 0"  Name="rec" BorderBrush="Transparent">
  4.             </Border>
  5.         </Border>
  6.     </ControlTemplate>

    3、ListViewItem

  1.     <Style TargetType="{x:Type ListViewItem}">
  2.         <Style.Setters>
  3.             <Setter Property="Background">
  4.                 <Setter.Value>
  5.                     <Binding RelativeSource="{RelativeSource Self}" 
  6.                              Converter="{StaticResource myConverter}"/>
  7.                 </Setter.Value>
  8.             </Setter>
  9.             <Setter Property="SnapsToDevicePixels" Value="True"/>
  10.             <Setter Property="Template">
  11.                 <Setter.Value>
  12.                     <ControlTemplate TargetType="{x:Type ListViewItem}">
  13.                         <Border Padding="{TemplateBinding Control.Padding}"  
  14.                                 Background="{TemplateBinding Panel.Background}" 
  15.                                 Name="Bd" SnapsToDevicePixels="True">
  16.                             <GridViewRowPresenter HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" 
  17.                                                   VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" 
  18.                                                   SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"  
  19.                                                   Margin="3"/>
  20.                         </Border>
  21.                         <ControlTemplate.Triggers>
  22.                             <MultiTrigger>
  23.                                 <MultiTrigger.Conditions>
  24.                                     <Condition Property="IsSelected" Value="False"/>
  25.                                 </MultiTrigger.Conditions>
  26.                                 <Setter Property="Foreground" Value="#000000"/>
  27.                             </MultiTrigger>
  28.                             <MultiTrigger>
  29.                                 <MultiTrigger.Conditions>
  30.                                     <Condition Property="UIElement.IsMouseOver" Value="True">
  31.                                     </Condition>
  32.                                 </MultiTrigger.Conditions>
  33.                                 <Setter Property="Panel.Background" TargetName="Bd">
  34.                                     <Setter.Value>
  35.                                         <SolidColorBrush>#D9DFE8</SolidColorBrush>
  36.                                     </Setter.Value>
  37.                                 </Setter>
  38.                             </MultiTrigger>
  39.                             <MultiTrigger>
  40.                                 <MultiTrigger.Conditions>
  41.                                     <Condition Property="Selector.IsSelectionActive" Value="False">
  42.                                     </Condition>
  43.                                     <Condition Property="Selector.IsSelected" Value="True">
  44.                                     </Condition>
  45.                                 </MultiTrigger.Conditions>
  46.                                 <Setter Property="Panel.Background" TargetName="Bd">
  47.                                     <Setter.Value>
  48.                                         <SolidColorBrush>#3DDADADA</SolidColorBrush>
  49.                                     </Setter.Value>
  50.                                 </Setter>
  51.  
  52.                             </MultiTrigger>
  53.                             <MultiTrigger>
  54.                                 <MultiTrigger.Conditions>
  55.                                     <Condition Property="Selector.IsSelectionActive" Value="True">
  56.                                     </Condition>
  57.                                     <Condition Property="Selector.IsSelected" Value="True">
  58.                                     </Condition>
  59.                                 </MultiTrigger.Conditions>
  60.                                 <Setter Property="Panel.Background" TargetName="Bd">
  61.                                     <Setter.Value>
  62.                                         <SolidColorBrush>#3D26A0DA</SolidColorBrush>
  63.                                     </Setter.Value>
  64.                                 </Setter>
  65.  
  66.                             </MultiTrigger>
  67.                             <Trigger Property="IsSelected" Value="True">
  68.                                 <Trigger.Setters>
  69.                                     <Setter TargetName="Bd" Property="Background" Value="#8CB1E0"/>
  70.                                     <Setter Property="Foreground" Value="#FFFFFF"/>
  71.                                 </Trigger.Setters>
  72.                             </Trigger>
  73.                         </ControlTemplate.Triggers>
  74.                     </ControlTemplate>
  75.                 </Setter.Value>
  76.             </Setter>
  77.         </Style.Setters>
  78.     </Style>

    ListViewItem中需要注意的是模板中使用到的是ListViewRowPresenter这个内容控件。

    其中下面这段代码是用来设置列表背景间隔色，如果不用可以直接删除这段代码，因为绑定到一个自定义属性，没有C#代码这里会报错，会在下面的背景颜色交替部分详细讲解。 

  1. <Setter Property="Background">
  2.     <Setter.Value>
  3.         <Binding RelativeSource="{RelativeSource Self}" 
  4.                  Converter="{StaticResource myConverter}"/>
  5.     </Setter.Value>
  6. </Setter>

    将上面三段代码复制到资源里字典里后，由于没有给定Name，模板会自动应用在引用这个资源字典里所有的ListView上。效果如图：


二、ListView背景颜色交替（奇偶行不同颜色）

    1、添加一个BackgroundConverter的cs文件，继承IValueConverter接口，复制下面代码：

  1. class BackgroundConverter: IValueConverter
  2.     {
  3.         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  4.         {
  5.             ListViewItem item = (ListViewItem)value;
  6.             ListView listView =
  7.                 ItemsControl.ItemsControlFromItemContainer(item) as ListView;
  8.             // Get the index of a ListViewItem
  9.             int index =
  10.                 listView.ItemContainerGenerator.IndexFromContainer(item);
  11.  
  12.             if (index % 2 == 0)
  13.             {
  14.                 return Brushes.LightSteelBlue;
  15.             }
  16.             else
  17.             {
  18.                 return Brushes.White;
  19.             }
  20.         }
  21.  
  22.         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  23.         {
  24.             throw new NotImplementedException();
  25.         }
  26.     }

    一般继承IValueConverter后会提示生成Convert和ConvertBack两个方法，其中需要注意的是Brushes类是System.Windows.Media这个名称空间的。我将这个BackgroundConverter类保存到Contorl文件夹里，在下面引用时需要注意。

    2、在ListView的资源字典里引用

xmlns:c="clr-namespace:demo.Control"

    并且在<ResourceDictionary>控件中添加以下代码，将BackgroundConverter作为资源使用：

<c:BackgroundConverter x:Key="myConverter"/>

    3、最后在ListViewItem样式中添加以下代码，也就是上面的那段代码

  1. <Setter Property="Background">
  2.     <Setter.Value>
  3.         <Binding RelativeSource="{RelativeSource Self}" 
  4.                  Converter="{StaticResource myConverter}"/>
  5.     </Setter.Value>
  6. </Setter>

    效果如图：

三、ListView标题填充

    由于GridViewColumn并不能设置Width="*"，达不到填充的效果，需要自定义Width的大小，但往往布局看起来就不好看了，这是使用了网上的方法，连接忘记收藏了。使用Grid控件来设置Width="*"，然后跟GridViewColumn的Width绑定以实现填充的效果。复制下面代码，需要注意的是Grid的Visibility要设置Hidden属性，隐藏起来。

  1. <!--This is the hidden helper Grid which does the resizing -->
  2. <Grid Visibility="Hidden" Grid.Column="1">
  3.     <Grid.ColumnDefinitions>
  4.         <ColumnDefinition Name="re_col1" Width="{Binding ElementName=col1, Path=ActualWidth}"/>
  5.         <ColumnDefinition Name="col2" Width="*"/>
  6.         <ColumnDefinition Width="10"/>
  7.     </Grid.ColumnDefinitions>
  8.     <!--This is the hidden helper Field which is used to bind to, using the "Fill" column of the helper grid-->
  9.     <Grid Grid.Column="1" x:Name="helperField"/>
  10. </Grid>

    而在原来的ListView写入以下代码：

  1. <ListView x:Name="lvTestListViewStyle" Foreground="#FFFFFF">
  2.     <ListView.View>
  3.         <GridView x:Name="gv" AllowsColumnReorder="True">
  4.             <GridViewColumn x:Name="col1" DisplayMemberBinding="{Binding Path=Name}" Header="姓名" Width="100"/>
  5.             <GridViewColumn DisplayMemberBinding="{Binding Path=Phone}" Header="联系电话" 
  6.                             Width="{Binding ElementName=col2, Path=ActualWidth}"/>
  7.         </GridView>
  8.     </ListView.View>
  9. </ListView>

    但经过我测试，这个方法很有局限，在窗口初始时如果不是最大化的状态可以很完好实现表头填充的效果，但一旦窗口最大化表头并不会跟着窗口变大而变化，而是会保持原来的宽度。如果窗口没做最大化的功能能避免这个问题，或者窗口初始化就是最大化的状态也可以避免这个问题，就是有点蠢。

    效果如图：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/537692
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号