正确实现自定义网格列表视图控件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了正确实现自定义网格列表视图控件相关的知识,希望对你有一定的参考价值。

我有一个应用程序,以类似的方式使用三个网格列表视图:

enter image description here

(实际上,“标准标签”是一个过滤器控件,但为了解决这个问题,我选择了最简单的视觉元素。)

我想我可以使用ControlTemplate将三个列表视图“重构”到相同的“样式”自定义列表视图中:

<Window x:Class="customlistview.StyledWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:local="clr-namespace:customlistview"
  mc:Ignorable="d"
  Title="StyledWindow" Height="300" Width="300">
<Window.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
    </ResourceDictionary.MergedDictionaries>

    <Style x:Key="StyledListView" TargetType="{x:Type ListView}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type ListView}">

            <Border x:Name="_Border" Background="#ADADAD">
              <Grid x:Name="_Grid" SnapsToDevicePixels="true">

                <Grid.RowDefinitions>
                  <RowDefinition Height="46*"/>
                  <RowDefinition  Height="auto" MaxHeight="25"/>
                </Grid.RowDefinitions>

                <ScrollViewer>
                  <ItemsPresenter x:Name="ContentsItems" Grid.Row="0"></ItemsPresenter>
                </ScrollViewer>
                <Label Grid.Row="1"  Background="#FF5C8F88">Standard Label</Label>
              </Grid>
            </Border>

          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </ResourceDictionary>
</Window.Resources>

<Grid x:Name="MainGrid" Margin="0,0,0,0">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>

  <ListView x:Name="ModulesList" Style="{StaticResource StyledListView}" ItemsSource="{Binding ModulesItems}" Grid.Row="0">
    <ListView.View>
      <GridView AllowsColumnReorder="true">
        <GridViewColumn Header="Module" Width="300" DisplayMemberBinding="{Binding ModuleName, TargetNullValue='N/A'}"/>
      </GridView>
    </ListView.View>
  </ListView>

  <ListView x:Name="ItemsAList" Style="{StaticResource StyledListView}" Grid.Row="1">
    <ListView.View>
      <GridView AllowsColumnReorder="true">
        <GridViewColumn Header="ItemsA" Width="300" DisplayMemberBinding="{Binding ItemA, TargetNullValue='N/A'}"/>
      </GridView>
    </ListView.View>
  </ListView>

  <ListView x:Name="ItemsBList" Style="{StaticResource StyledListView}" Grid.Row="2">
    <ListView.View>
      <GridView AllowsColumnReorder="true">
        <GridViewColumn Header="ItemsB" Width="300" DisplayMemberBinding="{Binding ItemB, TargetNullValue='N/A'}"/>
        <GridViewColumn Header="SpecificToB" Width="300" DisplayMemberBinding="{Binding SpecificToB, TargetNullValue='N/A'}"/>
      </GridView>
    </ListView.View>
  </ListView>

</Grid>

它工作,但我丢失了GridView列标题(并且背景颜色也发生了变化):

enter image description here

什么是在页面视图中添加页脚的正确方法?

这里是相关的代码:

StyledWindow.xaml.cs

using System.Collections.Generic;
using System.Windows;


namespace customlistview
{
   public class ModuleItem
   {
      public ModuleItem(string Name)
      {
         ModuleName = Name;
      }

      public string ModuleName { get; set; }
   }

   public class ItemAItem
   {
      public ItemAItem(string Name)
      {
         ItemA = Name;
      }

      public string ItemA { get; set; }
   }

   public class ItemBItem
   {
      public ItemBItem(string Name, string Specific)
      {
         ItemB = Name;
         SpecificToB = Specific;
      }

      public string ItemB { get; set; }
      public string SpecificToB { get; set; }
   }

   /// <summary>
   /// Interaction logic for MainWindow.xaml
   /// </summary>
   public partial class StyledWindow : Window
   {
      public List<ModuleItem> ModulesItems;
      public List<ItemAItem> ItemsAItems;
      public List<ItemBItem> ItemsBItems;

      public StyledWindow()
      {
         InitializeComponent();
         this.ModulesItems = new List<ModuleItem>();
         this.ItemsAItems = new List<ItemAItem>();
         this.ItemsBItems = new List<ItemBItem>();

         this.ModulesItems.Add(new ModuleItem("Mod1"));
         this.ModulesItems.Add(new ModuleItem("Mod2"));
         this.ModulesItems.Add(new ModuleItem("Mod3"));
         ModulesList.ItemsSource = ModulesItems;

         this.ItemsAItems.Add(new ItemAItem("ItemA1"));
         this.ItemsAItems.Add(new ItemAItem("ItemA2"));
         this.ItemsAItems.Add(new ItemAItem("ItemA3"));
         ItemsAList.ItemsSource = ItemsAItems;

         this.ItemsBItems.Add(new ItemBItem("ItemB1", "SpecificItemB1"));
         this.ItemsBItems.Add(new ItemBItem("ItemB2", "SpecificItemB2"));
         this.ItemsBItems.Add(new ItemBItem("ItemB3", "SpecificItemB3"));
         ItemsBList.ItemsSource = ItemsBItems;
      }
   }
}
答案

你曾经为ListView恕我直言添加“页脚”的方式并没有错。您的问题是不显示列的标题。有罪的是你在ScrollViewer中使用的ControlTemplate

在标准的ListView模板中,ScrollViewer恰恰是控制它的诀窍。事实上,对于ListViewScrollViewer,应用了一种奇特的风格(一种带有明确模板的样式,显示了列的标题)。

因此,解决方案是将相同的样式应用于ScrollViewer。我们很幸运,因为该样式使用定义良好的键,即const值GridView.GridViewScrollViewerStyleKey。所以你的模板将是:

<Border x:Name="_Border" Background="#ADADAD">
    <Grid  x:Name="_Grid" SnapsToDevicePixels="true">

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="auto" MaxHeight="25"/>
        </Grid.RowDefinitions>

        <ScrollViewer Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
            <ItemsPresenter x:Name="ContentsItems" Grid.Row="0" />
        </ScrollViewer>
        <Label Grid.Row="1" Background="#FF5C8F88">Standard Label</Label>
    </Grid>
</Border>

我希望它可以帮到你。

以上是关于正确实现自定义网格列表视图控件的主要内容,如果未能解决你的问题,请参考以下文章

如何正确实现可拖动的“抽屉”自定义 UIView

在片段中创建自定义列表视图时出错所需活动,找到片段

如何在片段内创建自定义列表视图

为片段制作自定义列表视图?

C#WPF - 创建自定义控件。不确定如何正确对齐文本

片段中的自定义列表视图。未找到布局