ListView:在资源字典中定义ItemsPanelTemplate [英] ListView: define ItemsPanelTemplate in resource dictionary

问题描述

我有一个ListView，其布局看起来像Windows资源管理器视图(图标和一些详细信息)，绑定到ViewModel中的某个列表.

I have a ListView which layout looks like a Windows Explorer view (icon + some details), bound to a list somewhere in the ViewModel.

我在这里的目的是随时随地在浏览器视图或经典视图之间切换.

My aim here is to be able to switch between explorer view or classic view whenever we want.

我可以定义一个ItemsPanelTemplate来完成工作，以直接在ListView.ItemsPanel字段中正确显示布局.现在，我想在资源中对其进行定义，以便可以在不同的视图中使用它，尤其是在一个控件中，用户应该在资源管理器"视图或经典列表"视图之间进行选择(默认显示为列表)

I could define an ItemsPanelTemplate doing exactly the work to display correctly the layout, directly in the ListView.ItemsPanel field. Now, I'd like to define it in the resources so that I'll be able to use it in different views, and especially in one control, the user should have the choice between Explorer view or classic list view (the default rendering for a list)

您是怎么做到的?我无法在我的ResourceDictionary中定义任何ItemsPanelTemplate，并且如果我定义了DataTemplate，则它是不兼容的(虽然我认为遵循纯逻辑，ItemsPanelTemplate应该从DataTemplate继承，但实际上却不是)看起来像这样).

How'd you do that? I cannot define any ItemsPanelTemplate in my ResourceDictionary, and if I define a DataTemplate it is not compatible (while I thought that following pure logic, ItemsPanelTemplate should inherit from DataTemplate, but it actually doesn't look like so).

实际列表的代码段:

<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel
            Width="{Binding (FrameworkElement.ActualWidth),
                RelativeSource={RelativeSource 
                AncestorType=ScrollContentPresenter}}"
            ItemWidth="{Binding (ListView.View).ItemWidth,
                RelativeSource={RelativeSource AncestorType=ListView}}"
            ItemHeight="{Binding (ListView.View).ItemHeight,
                RelativeSource={RelativeSource AncestorType=ListView}}" 
            />
            <!--
            MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
            -->
    </ItemsPanelTemplate>
</ListView.ItemsPanel>

<ListView.ItemTemplate>
    <DataTemplate>
        <StackPanel
            Orientation="Horizontal" 
            Height="Auto" 
            Width="150" >
            <Image 
                Source="{Binding Path=Appli.AppType, Converter={StaticResource TypeToIconConverter}}"
                Margin="5"
                Height="50"
                Width="50" />
            <StackPanel 
                VerticalAlignment="Center"
                Width="90" >
                <TextBlock 
                    Text="{Binding Path=Appli.AppName}" 
                    FontSize="13" 
                    HorizontalAlignment="Left" 
                    TextWrapping="WrapWithOverflow"
                    Margin="0,0,0,1" />
                <TextBlock 
                    Text="{Binding Path=Appli.AppType}" 
                    FontSize="9" 
                    HorizontalAlignment="Left" 
                    Margin="0,0,0,1" />
            </StackPanel>
        </StackPanel>
    </DataTemplate>
</ListView.ItemTemplate>

将ItemTemplate保留在静态资源中很容易，但是现在ItemsPanelTemplate ...我什么也做不了.

Keeping the ItemTemplate in a static resource was easy to do, but now I can't do anything with the ItemsPanelTemplate...

有什么想法吗?我使用的是MVVM，因此，如果可能的话，我尽量不使用代码隐藏

Any ideas? I'm using MVVM so I'm trying ideally not to use code-behind if possible

推荐答案

您将为此使用整个ListView的样式.所以你会做:

You would use a style for the whole ListView for that. So you would do:

<Grid.Resources>
    <Style x:Key="ListViewStyle" TargetType="ListView">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <WrapPanel 
                        Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                        ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
                        ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" />
                        <!-- 
                        MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}" 
                        -->
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Grid.Resources>

<ListView
    SelectionMode="Single"
    VerticalAlignment="Stretch"
    HorizontalAlignment="Stretch"
    HorizontalContentAlignment="Center"
    VerticalContentAlignment="Bottom"
    ScrollViewer.VerticalScrollBarVisibility="Auto"
    ItemsSource="{Binding ListUserApps, UpdateSourceTrigger=PropertyChanged}"
    SelectedIndex="{Binding SelectedUserApp, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
    Background="White"
    Style="{StaticResource ListViewStyle}">

    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel
                Orientation="Horizontal"
                Height="Auto"
                Width="150">
                <Image
                    Source="{Binding Path=Appli.AppType, Converter={StaticResource TypeToIconConverter}}"
                    Margin="5"
                    Height="50"
                    Width="50"/>
                <StackPanel
                    VerticalAlignment="Center"
                    Width="90">

                    <TextBlock
                        Text="{Binding Path=Appli.AppName}"
                        FontSize="13"
                        HorizontalAlignment="Left"
                        TextWrapping="WrapWithOverflow"
                        Margin="0,0,0,1" />
                    <TextBlock
                        Text="{Binding Path=Appli.AppType}"
                        FontSize="9"
                        HorizontalAlignment="Left"
                        Margin="0,0,0,1" />

                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>

</ListView>

如果希望用户随后能够在资源管理器视图和经典视图之间切换，只需定义第二个样式并切换列表视图的样式即可.例如，可以使用一些VisualStates和"DataStateBehavior"来完成此操作.

If you want the user then be able to switch between explorer and classic view, just define a second Style and switch the style of the listview. This can be done for example with some VisualStates and a 'DataStateBehavior'.

或者，您可以为各个ItemsPanel创建带有一些DataTriggers和Setter的样式.

Alternatively you could create a style with some DataTriggers and Setters for the individual ItemsPanels.

这篇关于ListView:在资源字典中定义ItemsPanelTemplate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！