Animation a Silverlight UI element width from 0 to auto, smoothly

I have a Silverlight UI with a slide-out panel. When a button is clicked, I’d like the panel to animate out smoothly, with the width going from 0 to Auto. Is there a way to do this (ideally with pure XAML)?

Add Comment
3 Answer(s)

why dont you just animate the maxwidth? Dont think you’ll be able to animate to auto

Answered on July 11, 2016.
Add Comment

WOW that really made me think 🙂 but I believe that I found a workaround that you can use. You will need a Converter but it’s the only code you need in C# – the rest is in pure XAML.

I have reconstructed some XAML based on your input:

<Grid
    VerticalAlignment="Center"
    HorizontalAlignment="Left"
    Background="Lime"
    x:Name="m_Grid">
    <Grid.RenderTransform>
        <CompositeTransform
            TranslateX="{Binding ActualWidth, Converter={StaticResource InverseTranslateXConverter}, ElementName=m_Grid}" />
    </Grid.RenderTransform>
    <Button
        x:Name="m_Button"
        Margin="50"
        Content="Hello World" />
</Grid>

So what I do is actually is just to wrap the slider inside a grid and set the TranslateX property to the ActualWidth of the content * -1 (done using a converter):

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
    double d = 0;
    if (double.TryParse(value.ToString(), out d))
    {
        return d * -1;
    }

    return value;
}

To show it (slide in) I use a simple animation:

<UserControl.Resources>
<Storyboard
    x:Name="Storyboard1">
    <DoubleAnimation
        x:Name="m_Animation"
        Duration="0:0:0.2"
        To="0"
        Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
        Storyboard.TargetName="m_Grid"
        d:IsOptimized="True" />
</Storyboard>

It’s not pretty but it works 🙂

[EDIT] Just removed the outergrid – it was unnessesary.

Answered on July 11, 2016.
Add Comment

It is not possible to animate Auto values, but as a workaround you can use VisualStateManager and FluidLayout with the following steps:
– Add a state group in Expression Blend
– Add the initial state
– Add the final state
– Change the visisbility to Collapsed in Blend
– Enable FluidLayout
– Write code to switch between states
– This will animate both width, height, and opacity of the element while showing it using a custom VisualStateManager
– You can write your own custom state manager to control the transition between discrete states

Answered on July 11, 2016.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.