使用app.xaml中的模板切换列表视图

本文关键字：列表 视图 app xaml 使用 | 更新日期: 2023-09-27 18:26:06

我用一个图像+名称&lastname和仅显示图像的1（在列表视图中的Wrap面板中）。第一个：

  <ListView x:Name="lsvsomething" Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" GotFocus="lsv_GotFocus" SelectionChanged="lsv_selectionchanged" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListView.View>
                <GridView>
                    <GridViewColumn Width="auto">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Image HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Height="50" Source="{Binding image}" Stretch="Fill"/>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Width="auto" DisplayMemberBinding="{Binding name}">
                        <GridViewColumnHeader Content="name" Tag="name" Click="SortClick"/>
                    </GridViewColumn>
                    <GridViewColumn Width="auto" DisplayMemberBinding="{Binding lastname}">
                        <GridViewColumnHeader Content="lastname" Tag="lastname" Click="SortClick" />
                    </GridViewColumn>
                </GridView>
            </ListView.View>
    </ListView>

第二个（仅图像）：

 <ListView x:Name="lsvsomething" Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" GotFocus="lsv_GotFocus" SelectionChanged="lsv_selectionchanged" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.View>
                        <GridView>
                            <GridViewColumn Width="60">
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <Image HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Height="50" Source="{Binding image}" Stretch="Fill"/>
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                        </GridView>
                    </ListView.View>
  </ListView>

现在它们都有ListView.View，我想把它们放在app.xaml的"模板？"中，但我不知道如何做到这一点。第二个Listview也使用ItemsPanelTemplate使其成为一个包装面板。我找到了如何将其保存在app.xaml中（ItemsPanel="｛DynamicResource somename｝"）。但是，我在多个窗口上使用此列表视图，所以我想将它们都保存在app.xsaml文件中（为它们制作模板？）。然后我也应该能够在运行时切换它们。（项目源在"codebehind"中设置）

使用app.xaml中的模板切换列表视图

"template"确实不是精确的定义。我想您确实希望列表视图具有某种可重用性。选项很少

选项1（首选）将每个ListView放入UserControl中。这将是一个独立的XAML文件，其中<用户控制>元素，以及<列表视图>它唯一的子项（不需要面板，因为你只有一个元素。XAML看起来像：

<UserControl x:Class="SO.NameAndImageList"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="300"
    >
    <ListView ...>
        ...
    </ListView>
</UserControl>

要使用此UserControl，请定义"local"命名空间以指向您的代码，简而言之：

<Window ...
    xmlns:local"clr-namespace:SO">
    ...
    <local:NameAndImageList />
    ...
</Window>

选项2创建一个DataTemplate，它提供一个表示列表的自定义类型。

在代码中（在MVVM模型中，通常称为ViewModel），定义以下类型：

public class PersonCollection : ObservableCollection<Person> { }

您的类型派生自ObservableCollection of Person（包含该项的类），没有添加。这只是XAML可以理解的别名。然后，在app.xaml文件中，在<Application.Resources>部分，定义以下模板：

<DataTemplate TargetType="{x:Type local:PersonCollection}" x:Key="ImageAndNameTemplate">
    <ListBox ...>
        ...
    </ListBox>
</DataTemplate>

为了重用，只需将PersonCollection数据（通常，它将来自DataContext）放在任何面板中，或者使用ContentControl:中的绑定

<Window ... >
    <Window.DataContext>
        <!-- Instantiate the data. There are many other ways to do that -->
        <local:PersonCollection>
            <local:Person Name="..." Image="..." />
            <local:Person Name="..." Image="..." />
            <local:Person Name="..." Image="..." />
            ...
        </local:PersonCollection>
    </Window.DataContext>
    ...
    <ContentControl Content="{Binding}" ContentTemplate="{StaticResource ImageAndNameTemplate}" />
</Window>
相关文章：