c# - WinStore : Slide a Grid on- and off-screen

Question

我有一个有几个嵌套网格的应用程序，如下所示:

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

我的 UserControl (MyMenu) 目前通过 ColumnDefintion 设置隐藏在屏幕右侧，但我觉得这不是一个好方法。

除此之外，我的主要内容应该有一个 Button，单击该按钮会导致 MyMenu UserControl 滑入(或滑出)屏幕。

我注意到我似乎无法为 GridLength 属性设置动画(它们的 Value 属性是只读的)，我也许可以使用 VisualStateManager 为 MyMenu 的 Margin.Left 设置动画。但这似乎不是正确的做法。

对于如何完成此任务的任何指导，我将不胜感激。

Answer 1

您绝对可以使用可视化状态管理器来启动 Storyboard。但是，当涉及到在屏幕上设置动画时，TranslateTransform 比 Margin 更适合。

首先，在您的控件上定义渲染转换:

<usercontrols:MyMenu x:Name="MenuControl">
    <usercontrols:MyMenu.RenderTransform>
        <!-- Start off screen -->
        <TranslateTransform X=-1000/>
    </usercontrols:MyMenu.RenderTransform>
</usercontrols:MyMenu>

然后在您的 Storyboard中，定位转换的 X 属性。路径有点棘手:

<Storyboard>
   <DoubleAnimation Storyboard.TargetName="MenuControl"
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X) "
        From="-1000"
        To="0"
        Duration="0:0:2"/>
</Storyboard>

基本上，您必须将 RenderTransform 是 TranslateTransform 作为属性路径的一部分。

最后，随心所欲地运行 Storyboard，Visual State Manager 当然是合理的。