none
WIN8风格的侧边栏的实现 RRS feed

  • 问题

  • HI,

         我想实现WIN8风格的侧边栏,就像是系统自带的搜索,动画从侧边弹出的一样,不知道如何实现,请帮助!


    maming 这是多么有趣的一件事情,如果这是说开发WIN8 APP的话

    2012年11月18日 4:03

答案

  • Hi,

    不知道你是需要做自定义的setting panel还是只是需要一个布局放在侧边栏。

    自定义setting panel可以参考http://code.msdn.microsoft.com/windowsapps/Adding-app-settings-using-61e55edf

    侧边栏的话,其实只是一个Popup,设置Popup的高度和屏幕相同,宽度设置你需要的尺寸,然后使用一个PopInThemeAnimation的动画完成弹出效果。


    Thanks! Damon.Tian

    2012年11月19日 4:02
  • 简单写了一个,你看下:

    <Page
        x:Class="App1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Page.Resources>
    
            <Storyboard x:Name="LoadPanel">
                <PopInThemeAnimation Storyboard.TargetName="Panel" Duration="0:0:5" SpeedRatio="1" FromHorizontalOffset="100"></PopInThemeAnimation>
            </Storyboard>
    
        </Page.Resources>
        
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Button Content="Show Popup" Click="Button_Click_1"/>
    
            <Popup x:Name="Panel">            
                <Grid Width="140" Height="400" Background="White"/>
            </Popup>
        </Grid>
    </Page>
    

    C#

            private void Button_Click_1(object sender, RoutedEventArgs e)
            {
                LoadPanel.Begin();
                Panel.IsOpen = true;
            }


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    • 已标记为答案 maming123 2012年11月21日 0:54
    2012年11月20日 6:39
    版主

全部回复

  • Hi,

    不知道你是需要做自定义的setting panel还是只是需要一个布局放在侧边栏。

    自定义setting panel可以参考http://code.msdn.microsoft.com/windowsapps/Adding-app-settings-using-61e55edf

    侧边栏的话,其实只是一个Popup,设置Popup的高度和屏幕相同,宽度设置你需要的尺寸,然后使用一个PopInThemeAnimation的动画完成弹出效果。


    Thanks! Damon.Tian

    2012年11月19日 4:02
  • 推荐这个库 Callisto http://timheuer.github.com/callisto/ 它包含一个Setting Pane


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年11月19日 5:45
    版主
  • HI,

      "侧边栏的话,其实只是一个Popup,设置Popup的高度和屏幕相同,宽度设置你需要的尺寸,然后使用一个PopInThemeAnimation的动画完成弹出效果。"

       其实我就是想先实现这个Popup的弹出动画效果,还想请教PopInThemeAnimation这个如何使用,还有METRO 自带的动画库如何使用?


    maming 这是多么有趣的一件事情,如果这是说开发WIN8 APP的话

    2012年11月19日 7:18
  • PopInThemeAnimation就是一个简单的动画库。

    比如你的自定义

    <Storyboard x:Name="LoadPanel"> <PopInThemeAnimation Storyboard.TargetName="Panel" Duration="0:0:5" SpeedRatio="1" FromHorizontalOffset="100"></PopInThemeAnimation> </Storyboard>

     

    你可以自己控制弹出效果的时间,速度等等一些属性。

    Thanks! Damon.Tian

    2012年11月19日 7:48
  • PopInThemeAnimation就是一个简单的动画库。

    比如你的自定义

    <Storyboard x:Name="LoadPanel"> <PopInThemeAnimation Storyboard.TargetName="Panel" Duration="0:0:5" SpeedRatio="1" FromHorizontalOffset="100"></PopInThemeAnimation> </Storyboard>

     

    你可以自己控制弹出效果的时间,速度等等一些属性。

    Thanks! Damon.Tian

    可以给一个完整的例子吗, 我对动画不熟悉,但总是想使用它。谢谢

    maming 这是多么有趣的一件事情,如果这是说开发WIN8 APP的话

    2012年11月19日 8:13
  • 简单写了一个,你看下:

    <Page
        x:Class="App1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Page.Resources>
    
            <Storyboard x:Name="LoadPanel">
                <PopInThemeAnimation Storyboard.TargetName="Panel" Duration="0:0:5" SpeedRatio="1" FromHorizontalOffset="100"></PopInThemeAnimation>
            </Storyboard>
    
        </Page.Resources>
        
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Button Content="Show Popup" Click="Button_Click_1"/>
    
            <Popup x:Name="Panel">            
                <Grid Width="140" Height="400" Background="White"/>
            </Popup>
        </Grid>
    </Page>
    

    C#

            private void Button_Click_1(object sender, RoutedEventArgs e)
            {
                LoadPanel.Begin();
                Panel.IsOpen = true;
            }


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    • 已标记为答案 maming123 2012年11月21日 0:54
    2012年11月20日 6:39
    版主
  • OK,试一下先,谢谢

    maming 这是多么有趣的一件事情,如果这是说开发WIN8 APP的话

    2012年11月21日 0:54