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>

Silverlight项目 - 滑入式面板 - 如何？

1 个答案: