1

WPF XAML を使用してアニメーションを行う方法のコツをつかもうとしています。適切な条件に基づいてアニメーションをトリガーするのに苦労しており、助けが必要です。

笑いのために、キャンバス上の別の場所に移動することで押されようとする試みをかわすボタンを含むページを作成したいと思います。これが私の希望するアニメーションの図です： ここに画像の説明を入力

私は単に XAML を使用して (コード ビハインドを使用せずに) 問題を解決したいと考えていますが、適切な XAML を宣言するだけでは解決できない理由の説明がコードに添付されている場合は、コードを使用するソリューションを受け入れます。

これは私がこれまでに持っているものです:

 <Page x:Class="myApp.SecondPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d" 
  xmlns:c="clr-namespace:myApp"
  d:DesignHeight="300" d:DesignWidth="500"
Title="SecondPage" Height="300" Width="500">
<Page.Resources>        
    <PathGeometry x:Key="AnimationPath" Figures="M 0,0 C -130,-100 -130,-60 -130,-0"/>
    <Style x:Key="secondButton" TargetType="Button">
        <Setter Property="Content" Value="Button"></Setter>
        <Style.Triggers>
            <MultiTrigger >
                <MultiTrigger.Conditions>
                    <Condition  Property="IsMouseOver" Value="True"></Condition>
 <!--Doesn't work --><Condition Property="TranslateTransform.X" Value="0"></Condition>
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingPath x:Name="XAnim"
                                   FillBehavior="HoldEnd"
                                   Storyboard.TargetProperty="RenderTransform.X"
                                   PathGeometry="{StaticResource AnimationPath}"
                                   Source="X" 
                                   Duration="0:0:.2"  
                                   />
                            <DoubleAnimationUsingPath x:Name="YAnim"
                                   FillBehavior="HoldEnd"
                                   Storyboard.TargetProperty="RenderTransform.Y"                                       
                                   PathGeometry="{StaticResource AnimationPath}"
                                   Source="Y" 
                                   Duration="0:0:.2"  
                                  />                             
                        </Storyboard>

                    </BeginStoryboard>

                </MultiTrigger.EnterActions>
            </MultiTrigger>
        </Style.Triggers>
    </Style>
</Page.Resources>

    <Grid>
    <Canvas HorizontalAlignment="Stretch" Name="MyCanvas" VerticalAlignment="Stretch" IsManipulationEnabled="True">
      <Button  Style="{StaticResource secondButton}" Canvas.Left="150" Canvas.Top="240" Height="48" x:Name="theButton" Width="115" FontSize="18" ForceCursor="False">
            <Button.RenderTransform>
                <TranslateTransform x:Name="AnimatedTranslateTransform"/>
            </Button.RenderTransform>
        </Button>
    </Canvas>
</Grid>

2 番目のマルチトリガー条件では、(正しいストーリーボードを開始するために) ボタンがどこにあるかを確認しようとしています。ボタンが左側にあるか右側にあるかを評価する条件でどのプロパティと値を使用するかを理解できないようです。TranslateTransform.Xプロパティが機能しません。助言がありますか？

4

1 に答える 1

4

MultiDataTriggerTransform を通過するには、ここで作業する必要があります。

<Style x:Key="secondButton" TargetType="Button">
    <Style.Triggers>
        <!-- ... -->
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}"
                        Value="True" />
                <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=RenderTransform.X}"
                        Value="0"/>
            </MultiDataTrigger.Conditions>
            <!-- ... -->
        </MultiDataTrigger>
    </Style.Triggers>
</Style>

(通常の MultiTrigger では、即時のプロパティにしかアクセスできProperty="TranslateTransform.X"ません。それは間違っているだけでProperty="RenderTransform.X"なく、存在しない添付プロパティとしてさらに評価されます)

Transform に名前を付けたので、2 番目の条件のElementName代わりにバインディングを使用することもできます。RelativeSource

<Condition Binding="{Binding ElementName=AnimatedTranslateTransform, Path=X}"
           Value="0"/>
于 2011-05-28T21:13:23.950 に答える