内容溢出的催促故事板动画

时间:2013-12-05 08:13:44

标签: c# xaml windows-phone-8

我想创建一个带有非典型导航菜单的应用程序。这个屏幕显示了我到目前为止所做的事情。

enter image description here

当我浏览我的应用时,当前内容淡出并滑出,新内容淡入。这是我的故事板:

<Storyboard x:Name="MainSlideIn">
    <DoubleAnimation Storyboard.TargetName="MainContentPane"
                        Storyboard.TargetProperty="Opacity"
                        From="0.0" To="1.0" Duration="0:0:0.2"
                        BeginTime="0:0:0.2"/>
</Storyboard>
<Storyboard x:Name="MainSlideOut">
    <DoubleAnimation Storyboard.TargetName="MainContentPaneHelper"
                        Storyboard.TargetProperty="Opacity"
                        From="1.0" To="0.0" Duration="0:0:0.3"/>
    <DoubleAnimation Storyboard.TargetName="MainContentPaneTransform"
                        Storyboard.TargetProperty="TranslateX"
                        From="0" To="-50" Duration="0:0:0.4" />

这很好用。只要内容适合我的容器。否则它总是抽搐。这是第二页:

enter image description here

这就是我改变内容并开始讲故事的方式:

if (_currentMenuItem == null || _currentMenuItem != MenuItem)
{
    if(_currentMenuItem!= null)
        _currentMenuItem.Background = TransparentBrush;
    _currentMenuItem = MenuItem;
    _currentMenuItem.Background = MenuItemAccentBrush;

    // Yes I know that this isn't the best way^^
    // But it works
    int i = -1;
    if (MainContentPane.Content is Overview)
        i = 0;
    else if (MainContentPane.Content is Todayview)
        i = 1;
    else if (MainContentPane.Content is Tasksview)
        i = 3;

    MainContentPane.Opacity = 0;
    MainContentPaneHelper.Content = null;
    MainContentPane.Content = control;

    switch (i)
    {
        case 0:
            MainContentPaneHelper.Content = _overview;
            break;
        case 1:
            MainContentPaneHelper.Content = _today;
            break;
        case 3:
            MainContentPaneHelper.Content = _tasks;
            break;
    }

    MainSlideIn.Begin();
    MainSlideOut.Begin();
}

更新2:

这是我的容器:

<Grid x:Name="LayoutRoot" 
      Margin="70,0,0,0">

    <ContentControl x:Name="MainContentPane" VerticalAlignment="Top" HorizontalAlignment="Left">
    </ContentControl>
    <ContentControl x:Name="MainContentPaneHelper" VerticalAlignment="Top" HorizontalAlignment="Left">
        <ContentControl.RenderTransform>
            <CompositeTransform x:Name="MainContentPaneTransform" TranslateX="0"/>
        </ContentControl.RenderTransform>
    </ContentControl>
</Grid>

0 个答案:

没有答案