Silverlight项目 - 滑入和滑出面板 - 如何？

Question

我不知道这个功能到底是什么，但我想在我的Silverlight项目中模拟这个功能。我是C＃开发人员，正在转向Silverlight和Expression Studio（Blend）以获得更丰富的用户体验。比方说，我有一些用户控件，并希望他们接触到屏幕（滑动输入和输出）作为显示在下面的网站，我发现：

http://www.templatemonster.com/silverlight-templates/28722.html

在菜单上，作为一个点击的菜单项，'屏幕'向左滑动，然后一个新的'屏幕'从左向右滑动。

我真的很想学这些东西，但不知道这些'功能'被称为什么？例如，在xaml世界中调用的这些“屏幕”是什么？另外，xaml世界中的“滑入/滑出”是什么？有人能指点我一篇好文章/白皮书吗？

在此先感谢您的任何建议。

Answer 1

首先Silverlight/WPF是真的是擅长这类东西。框架人员做了很好的工程，使得xaml尽可能地灵活。

话虽这么说admittingly有很多的尝试，这些样的东西 像ResourceDictionaries，Triggers，Actions，Storyboards，动画（关键帧/ Double ...），模板，Styles 之前得到，但一旦你得到这些比喻其方式更容易。

继承人与一些引物的破败。

• Keyframe animation正是这主要是依靠一些
• Triggers and Actions编排的
• Visual States这是面板的样子“打开” /“关闭”

继承人的样本为了你把这些东西拉在一起

<Grid x:Name="LayoutRoot"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="CentrePanelStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="00:00:00"> 
        <Storyboard> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Width)"> 
          <EasingDoubleKeyFrame KeyTime="00:00:00" Value="350"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualTransition> 
       <VisualTransition GeneratedDuration="00:00:00.3000000" To="Open"> 
        <Storyboard> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Width)"> 
          <EasingDoubleKeyFrame KeyTime="00:00:00" Value="350"> 
           <EasingDoubleKeyFrame.EasingFunction> 
            <PowerEase EasingMode="EaseIn"/> 
           </EasingDoubleKeyFrame.EasingFunction> 
          </EasingDoubleKeyFrame> 
          <EasingDoubleKeyFrame KeyTime="00:00:00.6000000" Value="800"> 
           <EasingDoubleKeyFrame.EasingFunction> 
            <QuarticEase EasingMode="EaseInOut"/> 
           </EasingDoubleKeyFrame.EasingFunction> 
          </EasingDoubleKeyFrame> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualTransition> 
       <VisualTransition From="Open" GeneratedDuration="00:00:00.3000000" To="Closed"> 
        <VisualTransition.GeneratedEasingFunction> 
         <BounceEase EasingMode="EaseOut"/> 
        </VisualTransition.GeneratedEasingFunction> 
        <Storyboard> 
         <DoubleAnimation Duration="00:00:00.6000000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Width)" BeginTime="00:00:00"> 
          <DoubleAnimation.EasingFunction> 
           <QuarticEase EasingMode="EaseInOut"/> 
          </DoubleAnimation.EasingFunction> 
         </DoubleAnimation> 
        </Storyboard> 
       </VisualTransition> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Open"> 
       <Storyboard> 
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Width)"> 
         <EasingDoubleKeyFrame KeyTime="00:00:00" Value="800"/> 
        </DoubleAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Closed"/> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Rectangle VerticalAlignment="Stretch" 
       HorizontalAlignment="Stretch" 
       Fill="#A1808080" /> 
    <Grid Name="CentrePanel" VerticalAlignment="Center" HorizontalAlignment="Center" Width="800" Height="500"> 
     <Border CornerRadius="3" 
       Background="LightGray" HorizontalAlignment="Left"> 
      <Grid x:Name="grid" Width="350" Margin="2"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="*" /> 
        <RowDefinition Height="40" /> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="350" /> 
        <ColumnDefinition Width="*" /> 
       </Grid.ColumnDefinitions> 

       <Rectangle Fill="Beige" /> 
       <Rectangle Grid.Column="1" Fill="#FFDDDCF5" /> 

       <Button 
        Content="Close" 
        Width="79" 
        HorizontalAlignment="Left" Margin="94,130,0,0" Height="33" VerticalAlignment="Top" > 
        <i:Interaction.Triggers> 
         <i:EventTrigger EventName="Click"> 
          <ic:GoToStateAction StateName="Closed"/> 
         </i:EventTrigger> 
        </i:Interaction.Triggers> 
       </Button> 

       <Button Content="Open" Width="81" 
        HorizontalAlignment="Left" Margin="92,85,0,0" Height="32" VerticalAlignment="Top" > 
        <i:Interaction.Triggers> 
         <i:EventTrigger EventName="Click"> 
          <ic:GoToStateAction StateName="Open"/> 
         </i:EventTrigger> 
        </i:Interaction.Triggers> 
       </Button> 
      </Grid> 

     </Border> 
    </Grid>   


</Grid>