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设置隐藏在屏幕右侧，但我觉得这不是一个很好的方法。

除此之外，我的主要内容应该有一个按钮，当点击它时，会导致MyMenu UserControl滑入（或滑出）屏幕。

我注意到我似乎无法为GridLength属性设置动画（它们的Value属性是只读的），我可能可以使用VisualStateManager来动画MyMenu的Margin.Left。但是似乎似乎是正确的方式。

我非常感谢有关如何处理此任务的任何指导。

Answer 1

您绝对可以使用Visual State Manager启动故事板。但是，当涉及到屏幕上的动画制作时，TranslateTransform比Margin更适合。

首先，在控件上定义渲染变换：

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

然后在故事板中，定位转换的X属性。路径有点棘手：

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

基本上，您必须将RenderTransform <{1}}作为属性路径的一部分。

最后，无论你喜欢运行故事板，Visual State Manager当然是合理的。

Answer 2

您提到的要设置动画的属性与布局更新相关联，这意味着每次更改都需要从可视树中的其他元素进行布局计算，当我们处于20-60fps动画的上下文时，这些元素可能会很慢。这就是为什么WinRT-XAML以不同的方式处理它们并且它需要使用EnableDependentAnimation标记来标记动画以启用它。在这种情况下你通常应该做的是将RenderTransform应用于你想要滑动的元素，使用TranslateTransform进行实际翻译并让动画定位变换的X }或Y属性。

Answer 3

不确定这是否是你想要的，但如果你想要一个简单的方法来点击一个按钮来做幻灯片效果，那就是：

创建一个“slide_menu”按钮，添加一个启用proprety为false的计时器。

将窗口菜单调整为您想要的最小尺寸（隐藏时），并将最大尺寸（宽度或高度）放入代码中，此处为300。

private void tm_Tick(object sender, EventArgs e) //the tick event of the timer
    {
        if (this.Height >= 300) // here is my windows that is 300 height when slided.
            this.tm.Enabled = false; // disables the timer when max size is reached.
        else
            this.Height += 12; //choose a value that fits you. (the more you add to it, the faster it will slide to the reach maximum point"
    }

    private void slide_dwn_Click(object sender, EventArgs e)
    {
        this.tm.Enabled = true; //enables the timer when clicking on the button
    }

您也可以从水平视图中进行操作，只需在代码中按宽度更改高度。

另外不要忘记将计时器的间隔更改为1以获得平滑效果，您可以在设计表单的计时器中找到它。

希望这会有所帮助。

WinStore：在屏幕上和屏幕外滑动网格

3 个答案: