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

Question

我不知道这个功能到底是什么，但我想在我的 Silverlight 项目中模拟它。我是一名 C# 开发人员，正在转向 Silverlight 和 Expression Studio (Blend) 以获得更丰富的用户体验。假设我有一些用户控件，并希望它们进入屏幕（滑入和滑出），如我发现的以下站点所示：

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

在菜单上，点击菜单项时，“屏幕”会滑动向左，然后一个新的“屏幕”从左向右滑入。

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

预先感谢您的任何建议。

Answer 1

首先，Silverlight/WPF非常擅长这类事情。框架人员在设计 xaml 方面做得非常出色，使其尽可能灵活。

话虽这么说，在尝试这些事情之前，确实有很多事情要做
就像 ResourceDictionaries，触发器，操作，故事板，动画（关键帧/双...) ，模板，样式
但一旦你掌握了这些隐喻，事情就变得容易多了。

这是带有一些入门读物的纲要。

• 关键帧动画就是这个主要依赖于一些
• 触发器和操作来编排
• 视觉状态，即面板的“打开”/“关闭”外观。

这是一个示例，供您将这些内容组合在一起。

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