Анимация размера триггера при переключении

Question

Im пытается переключить анимацию по высоте, когда нажата кнопка «Показать детали»/«Скрыть детали», а затем вернуться к ее начальному значению при повторном нажатии кнопки.

У меня есть DataControls: DataForm с предопределенным стилем для начала, и я хочу, чтобы свойство «Height» оживляло большее значение при нажатии кнопки.

DataControl: Dataform выглядит следующим образом.

<DataControls:DataForm x:Name="DataEdit" 
          Grid.Row="1" 
          ItemsSource="{Binding}" 
          Style="{DynamicResource CommonDataFormStyle}" 
          ContentLoaded="OnContentLoaded" 
          Height="150"> 

Сама кнопка находится внутри DataForm следующим образом.

<DataControls:DataForm.ReadOnlyTemplate> 
    <DataTemplate>   
     <Grid> 
      <Grid.RowDefinitions>... 
       <StackPanel Grid.Column="0" Grid.Row="0">    
        <Button Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.ToggleDetailsCommand, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" x:Name="ToggleDetailsButton"          
          Content="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.ToggleDetailsButtonText}"/> 
... 

Я только получил эту работу по Usina ярлык под названием «Детали» и EventTrigger для RoutedEvent = «Label.MouseLeftButtonDown» на одной этикетке, чтобы детально. И еще один ярлык под названием «Скрыть детали», чтобы снова переключить анимацию.

У меня есть alsto, пытающийся надеть этот стиль на кнопку и с помощью datatriggers, пытающихся переключить анимацию. Это, однако, только анимирует высоту кнопки независимо от атрибута StoryBoard.Target = "{Binding ElementName = DataEdit}".

<Style TargetType="{x:Type Button}" x:Key="ExpandDetailsStyle" >    
     <Style.Triggers> 
      <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.IsOpened}" Value="true"> 
       <DataTrigger.EnterActions> 
        <StopStoryboard BeginStoryboardName="EndAnimation" /> 
        <BeginStoryboard Name="NewAnimation"> 
         <Storyboard> 
          <DoubleAnimation Storyboard.Target="{Binding ElementName=DataEdit}" Storyboard.TargetProperty="Height" From="150" To="300" Duration="0:0:0.1" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </DataTrigger.EnterActions> 
       <DataTrigger.ExitActions> 

       </DataTrigger.ExitActions> 

      </DataTrigger> 
      <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.IsOpened}" Value="false"> 
       <DataTrigger.EnterActions> 
        <StopStoryboard BeginStoryboardName="NewAnimation" /> 
        <BeginStoryboard Name="EndAnimation"> 
         <Storyboard> 
          <DoubleAnimation Storyboard.Target="{Binding ElementName=DataEdit}" Storyboard.TargetProperty="Height" From="300" To="150" Duration="0:0:0.1" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </DataTrigger.EnterActions> 
      </DataTrigger> 

     </Style.Triggers> 
    </Style> 

Также я довольно новичок в WPF, поэтому простите меня, если я что-то оставил здесь. Мне не удалось добавить новый пользовательский стиль в DataForm, так как он уже использует общий стиль, он не позволит мне использовать атрибут «BasedOn».

Самое близкое, что у меня есть, это анимация высоты кнопки, если бы я мог получить ее, чтобы анимировать свойство высоты DataForm.

Заранее спасибо

Answer 1

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

<UserControl.Resources> 
    <Storyboard x:Key="ExpandDetails"> 
     <DoubleAnimation Storyboard.TargetProperty="Height"              
                Storyboard.TargetName="DataEdit" 
                From="120" To="230" Duration="0:0:0.05" /> 
    </Storyboard> 
    <Storyboard x:Key="CollapsDetails"> 
     <DoubleAnimation Storyboard.TargetProperty="Height"              
               Storyboard.TargetName="DataEdit" 
               From="230" To="120" Duration="0:0:0.05" /> 
    </Storyboard>     
    <Style TargetType="{x:Type ToggleButton}" x:Key="ToggleButtonStyle"> 
     <Setter Property="Content" Value="Show Details"/> 
     <Style.Triggers> 
      <Trigger Property="IsChecked" Value="true"> 
       <Setter Property="Content" Value="Hide Details"/> 
      </Trigger> 
     </Style.Triggers> 
    </Style>  
</UserControl.Resources> 


<UserControl.Triggers> 
    <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="DetailsToggleButton"> 
     <BeginStoryboard Storyboard="{StaticResource ExpandDetails}"/> 
    </EventTrigger> 
    <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="DetailsToggleButton"> 
     <BeginStoryboard Storyboard="{StaticResource CollapsDetails}"/> 
    </EventTrigger> 
</UserControl.Triggers> 

Я не мог понять, как у кнопки внутри формы данных в этом случае из-за рамками было бы в нем не смог найти «DataEdit» DataForm с любым из моих известных методов связывания.

Так что это должно было быть размещено вне DataForm.

<ToggleButton x:Name="DetailsToggleButton" Style="{StaticResource ToggleButtonStyle}" /> 

Источники в мое решение:
WPF: how to fire an EventTrigger (or Animation) when binding changes?
WPF - Changing the content of a ToggleButton when checked