WPF：创建具有扩大ListItems的一个ListView [英] WPF: Creating a ListView with expanding ListItems

问题描述

所以，我想的项目列表，当你选择他们，他们会展开以显示更多信息（无切换按钮）。

So I want a list of items that when you select them they expand to show more info (no toggleButton).

我算起来也有多种方法可以做到这一点，但我开始在是，我不得不必然的ViewModels的集合的ListView控件，然后定义视图模型视图扩展。这里的问题是结合所选择的一个来扩展

I figure there are multiple ways to do this but what I started at was that I had a ListView bound to the collection of viewModels and then defined the ViewModel view as Expander. Problem here was binding the selected one to be expanded.

我开始对如何可以这样做不同的多个观点。也许改装ListView控件的ControlTemplate中有它设置为我自己的类型扩展的项目。但我不知道有多好当的ItemsSource设置为列表中的作品。

I started getting multiple ideas on how this could be done differently. Perhaps modding the ControlTemplate of the ListView to have it's items set as my own type of expander. But I'm not sure how well that works when the ItemsSource is set for the list.

问题是我也不太清楚是什么在这里最好的办法就是

Problem is I'm not too sure what the best way here is.

推荐答案

您可以轻松地选择的DataTemplate 选定 ListViewItem的通过设置 ListView.ItemContainerStyle 并使用适当的触发器。

You can easily select the DataTemplate of the selected ListViewItem by setting ListView.ItemContainerStyle and using appropriate triggers.

下面是一个如何你不仅可以改变所选项目的可视化树，也同时它的动画特性，以及一个例子。

Here's an example of how you can not only change the visual tree of the selected item, but also animate its properties at the same time as well.

<ListView ItemsSource="{Binding ...}">
  <ListView.Resources>
    <!-- this is what unselected items will look like -->
    <DataTemplate x:Key="DefaultItemTemplate">
      <TextBlock FontSize="12" Margin="0,0,10,0" Text="Unselected" />
    </DataTemplate>

    <DataTemplate x:Key="SelectedItemTemplate">
      <Border BorderBrush="Red" BorderThickness="2" Padding="5">
        <TextBlock FontSize="12" Margin="0,0,10,0" Text="Selected" />
      </Border>
    </DataTemplate>
  </ListView.Resources>

  <ListView.ItemContainerStyle>
    <Style TargetType="ListBoxItem">

      <!-- set properties for all items -->       
      <Setter Property="Margin" Value="0,2,0,2" />
      <Setter Property="Padding" Value="0,2,0,2" />
      <Setter Property="ContentTemplate" Value="{StaticResource DefaultItemTemplate}" />
      <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
          <!-- change what the selected item looks like -->
          <Setter Property="ContentTemplate" Value="{StaticResource SelectedItemTemplate}" />

          <!-- animate it as well -->
          <Trigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="MinHeight" To="80" Duration="0:0:1" />
              </Storyboard>
            </BeginStoryboard>
          </Trigger.EnterActions>
          <Trigger.ExitActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="MinHeight" To="0" Duration="0:0:1" />
              </Storyboard>
            </BeginStoryboard>
          </Trigger.ExitActions>

        </Trigger>
      </Style.Triggers>
    </Style>
  </ListView.ItemContainerStyle>
</ListView>

这篇关于WPF：创建具有扩大ListItems的一个ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！