Как я могу анимировать высоту ListView при добавлении элементов через ItemsSource?

Question

У меня есть ListView, который настроен с помощью MinHeight и MaxHeight. Конечная высота определяется количеством элементов внутри списка.

В настоящий момент, когда список добавлен в свойство ItemsSource ListView, высота переместится к конечной высоте. Есть ли способ оживить это изменение высоты, чтобы оно было гладким?

Answer 1

Вот пример того, что делает то, что вы хотите (как я понимаю). Я назову это «быстрым и грязным» и не претендую на то, чтобы задуматься над этим.

public class CustomListView : ListView 
    { 
     public bool IsAttached 
     { 
      get { return (bool)GetValue(IsAttachedProperty); } 
      set { SetValue(IsAttachedProperty, value); } 
     } 

     // Using a DependencyProperty as the backing store for IsAttached. 
     // This enables animation, styling, binding, etc... 
     public static readonly DependencyProperty IsAttachedProperty = 
      DependencyProperty.Register("IsAttached", 
       typeof(bool), 
       typeof(CustomListView), 
       new UIPropertyMetadata(false)); 
    } 

    public class ViewModel : INotifyPropertyChanged 
    { 
     public void PopulateItems() 
     { 
      Items = new List<string>(); 

      for (var i = 0; i < 200; i++) 
      { 
       Items.Add("The quick brown fox jumps over the lazy dog."); 
      } 
      InvokePropertyChanged(new PropertyChangedEventArgs("Items")); 

      IsAttached = true; 
      InvokePropertyChanged(new PropertyChangedEventArgs("IsAttached")); 
     } 

     public List<string> Items { get; private set; } 
     public bool IsAttached { get; private set; } 

     public event PropertyChangedEventHandler PropertyChanged; 

     private void InvokePropertyChanged(PropertyChangedEventArgs e) 
     { 
      var changed = PropertyChanged; 

      if (changed != null) 
      { 
       changed(this, e); 
      } 
     } 
    } 

<Window x:Class="AnimateHeight.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:AnimateHeight" 
    Title="Window1" Height="300" Width="300"> 
    <StackPanel> 
     <Button Width="100" Content="Add Items" Click="OnClickAddItems"/> 
     <local:CustomListView x:Name="VariableListView" ItemsSource="{Binding Items}" IsAttached="{Binding IsAttached}" > 
      <local:CustomListView.Style> 
       <Style TargetType="{x:Type local:CustomListView}"> 
        <Setter Property="MinHeight" Value="50" /> 
        <Setter Property="MaxHeight" Value="50" /> 
        <Style.Triggers> 
         <Trigger Property="IsAttached" Value="true"> 
          <Trigger.EnterActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <DoubleAnimation 
              Storyboard.TargetProperty="(ListView.MaxHeight)" 
              To="150" 
              Duration="0:0:5"/> 
            </Storyboard> 
           </BeginStoryboard> 
          </Trigger.EnterActions> 
         </Trigger> 
        </Style.Triggers> 
       </Style> 
      </local:CustomListView.Style> 
     </local:CustomListView> 
    </StackPanel> 
</Window> 

    /// <summary> 
    /// Interaction logic for Window1.xaml 
    /// </summary> 
    public partial class Window1 : Window 
    { 
     public Window1() 
     { 
      InitializeComponent(); 

      DataContext = new ViewModel(); 
     } 

     private void OnClickAddItems(object sender, RoutedEventArgs e) 
     { 
      ((ViewModel)DataContext).PopulateItems(); 
     } 
    } 

UPDATE: Вы должны быть в состоянии скопировать это в .cs и .xaml файлы и запустить его в качестве примера приложения. Подводя итог тому, что я делаю: установите свойство MaxHeight на что-то искусственно низкое, в моем случае я просто установил его на то же значение, что и MinHeight. Затем вы можете создать раскадровку, которая оживляет MaxHeight до ее реального значения, что дает вам плавный эффект перехода. Трюк указывает, когда начинать анимацию, я использую свойство зависимостей в подклассе ListView только потому, что это, казалось, самый простой вариант для реализации в спешке. Мне просто нужно привязать свойство зависимостей к значению в моей модели ViewModel, и я могу запустить анимацию, изменив это значение (поскольку я не знаю простого способа запуска анимации на основе изменения в ListView ItemsSource сверху моей головы).