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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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.