CODEWITHSUNDEEP
wpfxamlanimationwpf-animation
Sonhja
Sonhja

Reputation: 8458

Animate width WPF left sided

I have a Gridwhich I'm able to animate the following way:

Normal state image right

When I click on the image, I can animate the template of my button with a Storyboard to grow as much as I want as a result like this:

enter image description here

That would be the result more or less. The animation looks like this:

 <Storyboard x:Key="ExpandPanelRight">
    <DoubleAnimation
        Storyboard.TargetName="ExpandablePanel"
        Storyboard.TargetProperty="Width"
        BeginTime="0:0:0"
        From="0" To="450" Duration="0:0:0.5"></DoubleAnimation>
</Storyboard>

As you can see, no problem while growing the grid from left to right, but what I really want is the opposite: expand the Grid from right to left:

enter image description here

How will it be?? I can't find the answer.

Upvotes: 1

Views: 1214

Answers (1)

Sheridan
Sheridan

Reputation: 69987

All you need to do is to align your bin Image to the right edge of your ExpandablePanel. Once you have done that then the Image will stick to the right hand side as the Width of the Panel increases. your Storyboard and DoubleAnimation code can remain the same. Your code should look something like this:

<Border CornerRadius="10" Background="Blue">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <TextBlock Text="Expanding...." VerticalAlignment="Center" />
        <Image Source="Images/Bin.png" VerticalAlignment="Center" HorizontalAlignment="Right" />
    </Grid>
</Border>

Upvotes: 1

Related Questions