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

Question

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

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

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

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

提前感谢您的任何建议。

Answer 1

首先，Silverlight/WPF 是 ， 非常擅长这种东西。框架人员在设计 xaml 以尽可能灵活方面做得很好。
诚然，在尝试这些事情之前，有很多事情要做
像 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>