WPF: создание ListView с расширением ListItems - PullRequest
3 голосов
/ 14 марта 2011

Итак, я хочу список элементов, которые при выборе их раскрываются, чтобы показать больше информации (без переключателя).

Я полагаю, что есть несколько способов сделать это, но я начал с того, что у меня был ListView, связанный с коллекцией viewModels, а затем определил представление ViewModel как Expander. Проблема здесь заключалась в том, чтобы связать выбранный файл для расширения.

Я начал получать множество идей о том, как это можно сделать по-другому. Возможно, изменив ControlTemplate объекта ListView, чтобы его элементы были установлены в качестве моего собственного типа расширителя. Но я не уверен, насколько хорошо это работает, когда ItemsSource установлен для списка.

Проблема в том, что я не слишком уверен, что лучший способ здесь.

1 Ответ

6 голосов
/ 14 марта 2011

Вы можете легко выбрать DataTemplate из выбранных ListViewItem, установив ListView.ItemContainerStyle и используя соответствующие триггеры.

Вот пример того, как вы можете не только изменять визуальное дерево выбранного элемента, но и одновременно анимировать его свойства.

<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>
...