WPF: Анимация ширины элемента управления поочередно с начальным значением

Question

У меня есть изображение, ширина которого должна быть анимирована от 0 до 30 пикселей, когда значение boolean изменится на true назад с 30 до 0 пикселей, если свойство вернется к false. В общем, это работает с этим XAML кодом:

<Image.Style> 
     <Style TargetType="{x:Type Image}"> 

     <!-- <Setter Property="Width" Value="0"/> --> 

     <Style.Triggers>     
      <DataTrigger Binding="{Binding ElementName=AIM, Path=IsDeletingEnabled}" Value="True"> 
      <Setter Property="Visibility" Value="Visible"/> 

      <DataTrigger.EnterActions> 
       <BeginStoryboard> 
       <Storyboard> 
        <!-- Animate the Width of the Image from 0 to 30px within 300ms--> 
        <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="30" Duration="0:0:0.3"/> 
       </Storyboard> 
       </BeginStoryboard> 
      </DataTrigger.EnterActions> 

      <DataTrigger.ExitActions> 
       <BeginStoryboard> 
       <Storyboard> 
        <!-- Animate the Width of the Image from 30 to 0px within 300ms--> 
        <DoubleAnimation Storyboard.TargetProperty="Width" From="30" To="0" Duration="0:0:0.3" /> 
       </Storyboard> 
       </BeginStoryboard> 
      </DataTrigger.ExitActions> 

      </DataTrigger> 
     </Style.Triggers> 
     </Style> 
    </Image.Style> 
    </Image> 

Проблема заключается в том, что перед Property IsDeletingEnabled переключается на истинный первый раз, изображение семы WITDH является 30px, и это видно. Когда я раскомментировал первый сеттер и установил Witdh по умолчанию 0px (или Visibility - Hidden), изображение не отображается при запуске, но сразу же исчезает после переключения IsDeletingEnabled от true10 до fals. В этом случае анимация не видна.

Имеет anywone решения, как я могу установить Visibility к Hidden или Witdh к 0px при запуске, не скрывая DataTrigger.ExitAction?

Answer 1

Вам нужно установить Visibility в Hidden, если вы устанавливаете Width на 0? Элемент нулевой ширины и скрытый элемент выглядят одинаково на экране.

Ваше действие выхода не является «скрытым», то, что происходит, DataTrigger «отменяет» <Setter Property="Visibility" Value="Visible"/> в дополнение к запуску действия выхода. Но так как видимость имеет непосредственный эффект, вы не видите действие выхода, которое выполняется.

Ваше действие ввода должно быть как Visibility=Visible, так и начать расширяющуюся анимацию. Ваше действие выхода должно выполнить сокращающуюся анимацию, , но дождитесь установки Visibility=Visible до окончания ее завершения. Вы можете сделать это с помощью анимации ObjectAnimationUsingKeyFrames:

<Image.Style> 
    <Style TargetType="Image"> 

     <Setter Property="Visibility" Value="Hidden"/> 
     <Setter Property="Width" Value="0"/> 

     <Style.Triggers> 

      <DataTrigger Binding="{Binding IsShown}" Value="True"> 
       <DataTrigger.EnterActions> 
        <BeginStoryboard> 
         <Storyboard> 
          <!-- Animate the Width of the Image from 0 to 30px within 300ms--> 
          <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="30" Duration="0:0:0.3"/> 
          <!-- Set the Image to Visible immediately --> 
          <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Visibility)"> 
           <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
            <DiscreteObjectKeyFrame.Value> 
             <Visibility>Visible</Visibility> 
            </DiscreteObjectKeyFrame.Value> 
           </DiscreteObjectKeyFrame> 
          </ObjectAnimationUsingKeyFrames> 
         </Storyboard> 
        </BeginStoryboard> 
       </DataTrigger.EnterActions> 

       <DataTrigger.ExitActions> 
        <BeginStoryboard> 
         <Storyboard> 
          <!-- Animate the Width of the Image from 30 to 0px within 300ms--> 
          <DoubleAnimation Storyboard.TargetProperty="Width" From="30" To="0" Duration="0:0:0.3" /> 
          <!-- After 300ms, hide the Image --> 
          <ObjectAnimationUsingKeyFrames BeginTime="0:0:0.3" Storyboard.TargetProperty="(UIElement.Visibility)"> 
           <DiscreteObjectKeyFrame KeyTime="0:0:0"> 
            <DiscreteObjectKeyFrame.Value> 
             <Visibility>Hidden</Visibility> 
            </DiscreteObjectKeyFrame.Value> 
           </DiscreteObjectKeyFrame> 
          </ObjectAnimationUsingKeyFrames> 
         </Storyboard> 
        </BeginStoryboard> 
       </DataTrigger.ExitActions> 

      </DataTrigger> 

     </Style.Triggers> 
    </Style> 
</Image.Style>