1

私は基本的に三角形であるパスを持っています:

<Path Data="M0,0 15,0 15,25" Fill="{Binding Background}"/>

boolがtrueのときにこの三角形を折りたたむアニメーションを開始し、falseのときに復元するデータトリガー(boolにバインド)が必要です。これを行う方法をまだ理解できていません。

具体的には、次の方向に沿って折りたたみます: 0,0 15,0 15,25 5,0 15,0 15,25 10,0 15,0 15,25 15,0 15,0 15,25

助けてくれてありがとう！

4

2 に答える 2

3

Expression Blend と呼ばれる小さなチートでそれを行いました。しかし、あなたはそれがどのように行われたかを見ることができます. 選択肢は常にあります。

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
    <Storyboard x:Key="CollapseTriangel">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path">
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.748"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0.195"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-0.007"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path">
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20.25"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="64.75"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="81"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="ExpandTriangel">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path">
            <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0.195"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="0.748"/>
            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path">
            <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="64.75"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="20.25"/>
            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
    <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="checkBox">
        <BeginStoryboard x:Name="CollapseTriangel_BeginStoryboard" Storyboard="{StaticResource CollapseTriangel}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="checkBox">
        <BeginStoryboard x:Name="ExpandTriangel_BeginStoryboard" Storyboard="{StaticResource ExpandTriangel}"/>
    </EventTrigger>
</Window.Triggers>

<Grid x:Name="LayoutRoot">
    <Path x:Name="path" Data="M159.5,239.5 L399.5,239.5 279.5,79.5 z" Fill="#FF0202FF" Margin="159.5,79.5,223.5,201.5" Stretch="Fill" Stroke="Black" RenderTransformOrigin="0.5,0.5">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <CheckBox x:Name="checkBox" Content="CheckBox" HorizontalAlignment="Left" Margin="80,0,0,201.5" VerticalAlignment="Bottom"/>
</Grid>
</Window>

ストーリーボードがある場合は、いつでもトリガーを変更できます。

ブール値に基づいて、必要に応じて。たとえば、次のようにします。

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
    <Storyboard x:Key="CollapseTriangel">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path">
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.748"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0.195"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-0.007"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path">
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20.25"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="64.75"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="81"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="ExpandTriangel">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path">
            <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0.195"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="0.748"/>
            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path">
            <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="64.75"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="20.25"/>
            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Control>
<Control.Template>
    <ControlTemplate>
            <Grid x:Name="LayoutRoot">
                <Path x:Name="path" Data="M159.5,239.5 L399.5,239.5 279.5,79.5 z" Fill="#FF0202FF" Margin="159.5,79.5,223.5,201.5" Stretch="Fill" Stroke="Black" RenderTransformOrigin="0.5,0.5">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
                <CheckBox x:Name="checkBox" Content="CheckBox" HorizontalAlignment="Left" Margin="80,0,0,201.5" VerticalAlignment="Bottom"/>
            </Grid>
        <ControlTemplate.Triggers>
            <Trigger SourceName="checkBox" Property="IsChecked" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard x:Name="CollapseTriangel_BeginStoryboard" Storyboard="{StaticResource CollapseTriangel}"/>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard x:Name="ExpandTriangel_BeginStoryboard" Storyboard="{StaticResource ExpandTriangel}"/>
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Control.Template>
</Control>
</Window>

編集

もう1つ心に留めておいてください。トリガーを要素に直接適用したい場合は、EventTrigger. orを使用したい場合は、TriggerorDataTriggerに入れる必要がありStyleますControlTemplate。Controlそのため、2 番目の例に追加しました。

于 2012-11-26T19:51:04.763 に答える
0

上記のコードの簡略版を次に示します。余分な不要なキーフレームを取り出し、使用されていない余分な変換も取り出しました。最後に、片側にスライドする余分なアニメーションを取り出し、RenderTransformOriginを1（元々は.5）に設定しました。すべてのクレジットは、元のソースのViktor La Croixに引き続き割り当てられます！

 <Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Width="640" Height="480">

<Window.Resources>
    <Storyboard x:Key="CollapseTriangel">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="path">
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="ExpandTriangel">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="path">
            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
    <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="checkBox">
        <BeginStoryboard x:Name="CollapseTriangel_BeginStoryboard" Storyboard="{StaticResource CollapseTriangel}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="checkBox">
        <BeginStoryboard x:Name="ExpandTriangel_BeginStoryboard" Storyboard="{StaticResource ExpandTriangel}"/>
    </EventTrigger>
</Window.Triggers>

<Grid x:Name="LayoutRoot">
    <Path x:Name="path" Data="M0,0 15,0 15,25" Fill="#FF0202FF" HorizontalAlignment="right" Stretch="Fill" Stroke="Black" RenderTransformOrigin="1,0.5">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <CheckBox x:Name="checkBox" Content="CheckBox" HorizontalAlignment="Left" Margin="80,0,0,201.5" VerticalAlignment="Bottom"/>
</Grid>

于 2012-11-26T20:47:53.557 に答える