asked on

WPF Width Animation Toggle

I'm trying to teach myself xaml. I'm starting to understand it but there is still so much to learn. I have a simple user control that is supposed to grow and shrink itself when a button is clicked. I want that grow and shrink to be animated. So far I have the shrink working perfectly but I have no idea how to trigger the grow animation if the control is already shrunk. Basically, I need a way to toggle between shrink and grow depending on the current width of the control. Can anyone help me modify my xaml to be able to do this?

<UserControl.Resources>
        <Storyboard x:Key="ShrinkMe">
            <DoubleAnimation Duration="0:0:0.5" From="300" To="30" Storyboard.TargetName="OverallDimension" Storyboard.TargetProperty="(Border.Width)" AccelerationRatio="0.2" DecelerationRatio="0.8"/>
            <DoubleAnimation Duration="0:0:0.5" From="1" To="0" Storyboard.TargetName="PageControl" Storyboard.TargetProperty="(Grid.Opacity)" AccelerationRatio="0.2" DecelerationRatio="0.8"/>
        </Storyboard>
        <Storyboard x:Key="GrowMe">
            <DoubleAnimation Duration="0:0:0.5" From="30" To="300" Storyboard.TargetName="OverallDimension" Storyboard.TargetProperty="(Border.Width)" AccelerationRatio="0.2" DecelerationRatio="0.8"/>
            <DoubleAnimation Duration="0:0:0.5" From="0" To="1" Storyboard.TargetName="PageControl" Storyboard.TargetProperty="(Grid.Opacity)" AccelerationRatio="0.2" DecelerationRatio="0.8"/>
        </Storyboard>
    </UserControl.Resources>
    <Border Background="Green" Width="300" Name="OverallDimension">
        <Grid Background="White" Name="PageControl">
            <Grid.RowDefinitions>
                <RowDefinition Height="60"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="38"/>
            </Grid.RowDefinitions>
            <StackPanel Grid.Row="0" Background="Navy">

            </StackPanel>
            <StackPanel Grid.Row="2" Background="Black">

            </StackPanel>
            <Button x:Name="button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{StaticResource ShrinkMe}"/>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </Grid>
    </Border>

Open in new window

Chinmay Patel

Hi Russ,

I have been following the questions you have been asking and I understand you have somewhat idea of WPF and MVVM. Keeping that in mind, I will start.

What you are trying to achieve can be done in multiple ways. I will not write an essay about other ways their pros and cons. I will focus on two ways (IMHO) which makes sense in such scenarios.

1. Use a Command, and in the code based on the flag or a property of your View

        Storyboard animationSB = null;
If(flag)
{
animationSB = this.FindResource("GrowMe") as Storyboard;
}
else
{
animationSB = this.FindResource("ShrinkMe") as Storyboard;
}
If(animationSB != null)
{
animationSB.Begin();
}

Open in new window

The second approach will be almost similar to the above one. Instead of code, in your XAML you will use DataTrigger https://docs.microsoft.com/en-us/dotnet/api/system.windows.datatrigger?view=netframework-4.8.

If you want to experiment a bit more, you can use ToggleButton and bind its IsChecked Property for triggers OR can use it as a Flag in the method I have shown above.

Regards,
Chinmay.

Russ Suter

ASKER

Data triggers might be the way to go here. I want the button to look different between the two states anyway so a style template might be the way to go there. I'll look into that and get back to you.

I had already discovered the codebehind method you presented and did get that working but I'm thinking the data trigger approach might be the better one for my needs.

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.