Home/ Questions/Q 8905579
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T02:25:52+00:00

I have a path, that is basically a triangle: <Path Data=M0,0 15,0 15,25 Fill={Binding

  • 0

I have a path, that is basically a triangle:

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

I want to have a data trigger(bound to a bool) that will start an animation that will collapse this triangle when the bool is true, and restore it when it’s false. I have yet to be able to figure out how to do this.

Specifically, collapse along this direction:
0,0 15,0 15,25
5,0 15,0 15,25
10,0 15,0 15,25
15,0 15,0 15,25

Thanks for any help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well I did it with little cheat called Expression Blend. But you can see how it’s done. There are always options.

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

    When you have storyboards, you can always change triggers.

    As you wanted based on bool value. For example like this:

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

    EDIT

    Please keep one more thing in your mind. If you want to apply your trigger dirrectly to element it can be only EventTrigger.
    If you want to use a Trigger or DataTrigger you have to put it into Style or ControlTemplate. That is why I added Control to my second example.

    • 0