Silverlight项目-滑入和滑出面板-如何? [英] Silverlight Project - Slide-in and out Panel - How?
问题描述
我不知道此功能到底是什么，但是我想在我的Silverlight项目中对此进行仿真.我是C#开发人员，现在正在使用Silverlight和Expression Studio(Blend)以获得更丰富的UX.假设我有一些用户控件，希望它们进入屏幕(滑入和滑出)，如我在以下站点中所示:
I don't know what exactly this feature is, but I would like to simulate this in my Silverlight project. I am a C# developer and am moving to Silverlight and Expression Studio (Blend) for richer UX. Let's say I have some user controls and would like them to come into the screen (slide-in and out) as shown in the following site I found:
http://www.templatemonster.com/silverlight-templates/28722.html
在菜单上，单击菜单项时，屏幕"向左滑动，然后一个新的屏幕"从左向右滑动.
On the menu, as one clicks on the menu item, the 'screen' slides to the left and then a new 'screen' slides in from the left to right.
我真的很想学习这些东西，但是不知道这些功能"叫什么?例如，在xaml世界中这些屏幕"被称为什么?另外，在xaml世界中所谓的滑入/滑出"是什么?有人可以指出我的好文章/白皮书吗?
I really want to learn this stuff, but don't know what these 'features' are called? For example what are these 'screens' called in the xaml world? Also, what is the 'slide-in/out' called in the xaml world? Can someone point me to a good article/whitepaper?
预先感谢您的任何建议.
Thanks in advance for any advice.
推荐答案
首先，Silverlight/WPF非常擅长于此类工作.框架人员在xaml的工程设计方面做得非常出色，以使其尽可能地灵活.
Firstly Silverlight/WPF is really good at this kind of stuff. The framework guys did a great job engineering xaml to be as flexible as possible.
诚然，在尝试这些事情之前，还有很多事情要做 像 ResourceDictionaries ，
That being said admittingly there’s a lot to get before attempting these sort of things like ResourceDictionaries, Triggers, Actions, Storyboards, Animation (Keyframe/Double...) , Templating, Styles but once you get these metaphors its way easier.
这里有一些引物.
- Keyframe animation is what this is mostly relying on with some
- Triggers and Actions to orchestrate the
- Visual States which is what the panel looks like 'Open' / 'Closed'
这里有一个示例供您将这些内容汇总在一起.
Heres a sample for you pulling this stuff together.
<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项目-滑入和滑出面板-如何?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
