1

trueプロパティが に戻ると、ブール値のプロパティが 30 から 0 ピクセルに戻ると、幅が 0 から 30 ピクセルにアニメーション化される画像があります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>

問題は、PropertyIsDeletingEnabledが最初に true に切り替わる前に、画像の幅が 30px で表示されることです。最初のセッターのコメントWitdhを外し、デフォルトで 0px (またはVisibilityto ) に設定すると、画像は起動時に表示されませんが、 からにHidden切り替えるとすぐに消えます。この場合、アニメーションは表示されません。IsDeletingEnabledtruefals

Visibilityを非表示にせずに、起動時にtoHiddenまたはWitdhto を 0px に設定する方法を知っている人はいDataTrigger.ExitActionますか?

4

1 に答える 1

0

Visibilityを 0 に設定するHidden場合、明示的に を設定する必要がありWidthますか? 幅がゼロの要素と非表示の要素は、画面上では同じように見えます。

あなたの終了アクションは「隠されている」のではなく、終了アクションの実行に加えて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>
于 2013-08-23T19:12:23.890 に答える