silverlight基本使用Visual State Manager
2012-12-26 10:12
232 查看
代码如下:
效果如下:
Normal状态:
Normal--->>>MouseOver:
MouseOver--->>>Pressed:
<UserControl x:Class="VsmState.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="800"> <Grid x:Name="LayoutRoot" Background="White"> <Grid.Resources> <Style x:Key="ButtonTemplete" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border x:Name="border" Width="300" Height="100" Opacity="1" BorderThickness="2" > <!--状态组合--> <VisualStateManager.VisualStateGroups> <!--单个状态组合--> <VisualStateGroup x:Name="commentstate"> <!--设置单个的状态组里不同状态切换时的动画时间--> <VisualStateGroup.Transitions> <VisualTransition From="Normal" To="MouseOver" GeneratedDuration="0:0:0.3"></VisualTransition> <VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:0.2"></VisualTransition> <VisualTransition From="MouseOver" To="Pressed" GeneratedDuration="0:0:0.2"></VisualTransition> <VisualTransition From="Pressed" To="MouseOver" GeneratedDuration="0:0:0.2"></VisualTransition> </VisualStateGroup.Transitions> <!--单个状态的动画,下面的x:Name不能写错哦,不然无效果--> <VisualState x:Name="Normal"></VisualState> <VisualState x:Name="MouseOver" > <Storyboard> <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Width" To="600"></DoubleAnimation> <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Height" To="120"></DoubleAnimation> <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="0.8"></DoubleAnimation> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="0.8"></DoubleAnimation> <ColorAnimation Storyboard.TargetName="BackgroundBrush" Storyboard.TargetProperty="Color" To="LightSkyBlue" /> <ColorAnimation Storyboard.TargetName="BorderBrush" Storyboard.TargetProperty="Color" To="Blue" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <!--内容设置.--> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> <!--背景色设置.--> <Border.Background> <SolidColorBrush x:Name="BackgroundBrush" Color="Gray"/> </Border.Background> <!--边框颜色设置.--> <Border.BorderBrush> <SolidColorBrush x:Name="BorderBrush" Color="Black"/> </Border.BorderBrush> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </Grid.Resources> <!--button引用ButtonTemplate模板.--> <Button HorizontalAlignment="Center" VerticalAlignment="Center" Content="I'm a Button" Style="{StaticResource ButtonTemplete}"/> </Grid> </UserControl>效果有点像android里面的选择器Seletor
效果如下:
Normal状态:
Normal--->>>MouseOver:
MouseOver--->>>Pressed:
相关文章推荐
- 【WIN10】VisualStateManager使用說明
- Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)
- Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)
- Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)
- 在wince中使用C++语言创建Silverlight的VisualState
- Silverlight的VisualStateManager
- silverlight基础6-VisualStateManager
- Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)
- Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)
- Silverlight的VisualStateManager
- Expression Blend实例中文教程(11) - 视觉管理器快速入门Visual State Manager(VSM)
- Silverlight学习点滴之三——DataGrid的基本使用
- WINCE6.0下用SilverLight技术的基本控件使用
- silverlight 生成图标的基本使用方式
- WINCE6.0下用SilverLight技术的基本控件使用
- Expression Blend实例中文教程(11) - 视觉管理器快速入门Visual State Manager(VSM)
- Microsoft visual studio 基本使用
- vuex2.0 基本使用(1) --- state
- Silverlight 2 的 DataGrid 基本使用方法
- Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)