Question

我有一条路径，基本上是一个三角形：

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

我希望有一个数据触发器（绑定到bool），它将启动一个动画，当bool为true时将折叠此三角形，并在它为false时恢复它。我还没弄清楚如何做到这一点。

具体而言，沿着这个方向崩溃： 0,0 15,0 15,25 5,0 15,0 15,25 10,0 15,0 15,25 15,0 15,0 15,25

感谢您的帮助！

Answer 1

嗯，我做了一个叫做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>

如果您有故事板，则可以随时更改触发器。

正如您所希望的那样基于bool值。例如：

<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>

修改

请记住一件事。如果要将触发器直接应用于元素，则只能EventTrigger。如果您想使用Trigger或DataTrigger，则必须将其放入Style或ControlTemplate。这就是我在第二个例子中添加Control的原因。

Answer 2

以下是我上面代码的简化版本。我拿出了额外不需要的关键帧，并取出了未使用的额外转换。最后，我拿出了额外的动画，将它滑动到一边，而只是将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>

动画WPF路径的单个点

2 个答案: