Animation: Silverlight user interface element width from 0 to automatic, smooth

Question

I have a Silverlight user interface with a drawer. When the button is pressed, I want the panel to smoothly animate, with a width of 0 to Auto. Is there a way to do this (ideally with pure XAML)?

Answer 1

It is impossible to revive automatic values, but as a workaround, you can use VisualStateManager and FluidLayout with the following steps: - Add a group of states to Expression Blend - Add an initial state - Add an end state - Change the visibility to Collapsed in Blend - Turn on FluidLayout - Write code to switch between states - In this case, both the width, height and opacity of the element will be displayed, showing it using the custom VisualStateManager - you can write your own state manager to control transition between discrete states

Answer 2

why aren't you just animating maxwidth? Do not think that you can revive the car

Answer 3

WOW really made me think :), but I believe I found a workaround that you can use. You will need a converter, but this is the only code you need in C # - the rest is in pure XAML.

I restored 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 I'm really really just to wrap the slider inside the grid and set the TranslateX property to ActualWidth of the content * -1 (done using the 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 (paste), I use 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> 

This is not very, but it works :)

[EDIT] Just deleted outergrid - it was impenetrable.