I've got an app that has a few nested Grids, like so:
<Grid x:Name="ContainerGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
[main content here, including a button to show/hide the menu]
</Grid>
<Grid Grid.Column="1" x:Name="MenuGrid">
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="0*" />
<usercontrols:MyMenu Grid.Column="1" />
</Grid>
</Grid>
I've got my UserControl (MyMenu) currently hidden off the right side of the screen via ColumnDefintion setting, but I don't feel like that's a good way to do it.
Add to that the idea that my main content should have a Button that, when clicked, will cause the MyMenu UserControl to slide in (or out) of the screen.
I've noticed that I can't seem to animate GridLength properties (their Value properties are read-only), and I might be able to use a VisualStateManager to animate the Margin.Left of the MyMenu. But that doesn't seem like the right way to do it.
I'd greatly appreciate any guidance on how to approach this task.
You can definitely use the Visual State Manager to start a storyboard. However, when it comes to animating stuff across a screen, TranslateTransform
is far better suited than Margin
.
First, define the render transform on your control:
<usercontrols:MyMenu x:Name="MenuControl">
<usercontrols:MyMenu.RenderTransform>
<!-- Start off screen -->
<TranslateTransform X=-1000/>
</usercontrols:MyMenu.RenderTransform>
</usercontrols:MyMenu>
Then in your storyboard, target the X property of the transform. The path is a little tricky:
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MenuControl"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X) "
From="-1000"
To="0"
Duration="0:0:2"/>
</Storyboard>
Basically, you have to put the fact that the RenderTransform
is a TranslateTransform
as part of the property path.
Finally, run the storyboard however you like, the Visual State Manager is certainly reasonable.