正确实现自定义网格列表视图控件
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了正确实现自定义网格列表视图控件相关的知识,希望对你有一定的参考价值。
我有一个应用程序,以类似的方式使用三个网格列表视图:
(实际上,“标准标签”是一个过滤器控件,但为了解决这个问题,我选择了最简单的视觉元素。)
我想我可以使用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列标题(并且背景颜色也发生了变化):
什么是在页面视图中添加页脚的正确方法?
这里是相关的代码:
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
恰恰是控制它的诀窍。事实上,对于ListView
的ScrollViewer
,应用了一种奇特的风格(一种带有明确模板的样式,显示了列的标题)。
因此,解决方案是将相同的样式应用于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>
我希望它可以帮到你。
以上是关于正确实现自定义网格列表视图控件的主要内容,如果未能解决你的问题,请参考以下文章