Расширяемый ListViewItem

Question

Я работаю над универсальным приложением Windows, где у меня есть ListView с DataTemplate. Я хочу, чтобы расширение ListView расширялось, когда я нажимаю (выбирает) элемент, высота выбранного элемента увеличивается с анимацией. Я попытался использовать StoryBoard для этой миссии, но я потерпел неудачу. Я также нашел это answer и сделал то, что хочу, но без анимации. Это ListView:

<ListView Name="lstviewMyMissions" HorizontalAlignment="Center" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled" ItemTemplate="{StaticResource MinimzedTemplate}" IsItemClickEnabled="False" ItemClick="lstviewMyMissions_ItemClick" SelectionMode="Single" SelectionChanged="lstviewMyMissions_SelectionChanged" Visibility="Visible"> 
      <ListView.ItemContainerStyle> 
       <Style TargetType="ListViewItem"> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate TargetType="ListViewItem"> 
           <Grid> 
            <VisualStateManager.VisualStateGroups> 
             <VisualStateGroup x:Name="CommonStates"> 
              <VisualState x:Name="Normal"/> 
             </VisualStateGroup> 
             <VisualStateGroup x:Name="SelectionStates"> 
              <VisualState x:Name="Unselected"> 
               <Storyboard> 
                <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/> 
               </Storyboard> 
              </VisualState> 
              <VisualState x:Name="SelectedUnfocused"> 
               <Storyboard> 
                <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/> 
               </Storyboard> 
              </VisualState> 
             </VisualStateGroup> 
            </VisualStateManager.VisualStateGroups> 
            <Border x:Name="myback" Background="Transparent"> 
             <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> 
            </Border> 
           </Grid> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 
      </ListView.ItemContainerStyle> 
      <ListView.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="1"/> 
       </ItemsPanelTemplate> 
      </ListView.ItemsPanel> 
     </ListView> 

и это DataTemplate:

<DataTemplate x:Key="MinimzedTemplate"> 
     <Border Name="tstBorder" BorderThickness="1" Width="380" Height="100" CornerRadius="10" Background="White" FlowDirection="RightToLeft"> 
      <Grid Height="100"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="auto"/> 
        <RowDefinition Height="auto"/> 
       </Grid.RowDefinitions> 
       <TextBlock HorizontalAlignment="Right" Text="{Binding TaskDate}" Style="{StaticResource TextFontFamily}"/> 
       <Grid Grid.Row="1"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="5"/> 
         <ColumnDefinition Width="40"/> 
         <ColumnDefinition Width="10"/> 
         <ColumnDefinition Width="auto"/> 
        </Grid.ColumnDefinitions> 
        <Image Grid.Column="1" Source="/Design/Phone/mo3amla_da5leya_icon.png" VerticalAlignment="Center" HorizontalAlignment="Center"/> 
        <StackPanel Orientation="Vertical" Grid.Column="3" VerticalAlignment="Center"> 
         <StackPanel Orientation="Horizontal"> 
          <TextBlock Text="Number" Style="{StaticResource TextFontFamily}"/> 
          <StackPanel Width="15"/> 
          <TextBlock Text="{Binding TaskNo}" Style="{StaticResource TextFontFamily}"/> 
         </StackPanel> 
         <StackPanel Orientation="Horizontal"> 
          <TextBlock Text="Type" Style="{StaticResource TextFontFamily}"/> 
          <TextBlock Text="{Binding procedureType}" Style="{StaticResource TextFontFamily}"/> 
         </StackPanel> 
        </StackPanel> 
       </Grid> 
      </Grid> 
     </Border> 
    </DataTemplate> 

Вопрос: как я могу увеличить высоту ListViewItem с анимацией, когда пользователь нажимает на нее?

Answer 1

Просто используйте диспетчер визуальных состояний и настройте соответствующие состояния. Мне удалось добиться этого со следующими фрагментами кода:

<Style TargetType="ListViewItem"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ListViewItem"> 
        <Grid> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="SelectionStates"> 
           <VisualState x:Name="Selected"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                     Storyboard.TargetName="Rect" 
                     Storyboard.TargetProperty="Height"> 
              <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="50"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <CubicEase /> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Unselected"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                     Storyboard.TargetName="Rect" 
                     Storyboard.TargetProperty="Height"> 
              <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="25"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <CubicEase /> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 

         <Border x:Name="Rect" 
           Height="25" 
           Background="Transparent" 
           BorderBrush="Red" 
           BorderThickness="1"> 
          <ContentPresenter x:Name="contentPresenter" 
               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
               VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
               Content="{TemplateBinding Content}" 
               ContentTemplate="{TemplateBinding ContentTemplate}" /> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Надеюсь, это поможет.

С наилучшими пожеланиями,

Назар