背水一战 Windows 10 (7) - 控件 UI: VisualState, VisualStateManager, 控件的默认 UI
作者：webabcd
介绍
背水一战 Windows 10 之 控件 UI
- VisualState 和 VisualStateManager
- 控件的默认 Style, ControlTemplate, VisualState
示例
1、演示“VisualState 和 VisualStateManager”相关知识点
Controls/UI/VisualState/VisualStateDemo.xaml
<Page
x:Class="Windows10.Controls.UI.VisualState.VisualStateDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.UI.VisualState"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Grid Background="Transparent">
<Grid.Resources> <!--
在 ControlTemplate 中定义 VisualState 和 VisualStateManager
-->
<ControlTemplate x:Key="ControlTemplate1" TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<!--
VisualStateGroup - 用于分组 VisualState
-->
<VisualStateGroup x:Name="CommonStates"> <!--
Normal - 正常状态 注意：
1、本例所列出的 VisualState 的名称都是 Button 控件拥有的，不同的控件的 VisualState 名称和种类可能会不一样
2、写自定义控件时，需要通过 VisualStateManager.GoToState() 来转换 VisualState
-->
<VisualState x:Name="Normal" /> <!--
Disabled - 无效状态
--> <VisualState x:Name="Disabled" /> <!--
PointerOver - 鼠标经过时的状态（详细的过渡效果在后面的 VisualStateGroup.Transitions 中定义）
-->
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="borderBrush"
Storyboard.TargetProperty="Color"
To="Green" />
</Storyboard>
</VisualState> <!--
Pressed - 鼠标按下时的状态
-->
<VisualState x:Name="Pressed">
<VisualState.Storyboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="grid">
<DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{StaticResource ButtonPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState.Storyboard>
<VisualState.Setters>
<!--
这部分是 uwp 新增的特性，以前只能通过 Storyboard 来实现
-->
<Setter Target="grid.Width" Value="100" />
</VisualState.Setters>
<VisualState.StateTriggers>
<!--
这部分是 uwp 新增的特性
关于 StateTriggers 请参见 /Controls/UI/VisualState/StateTrigger.xaml
-->
</VisualState.StateTriggers>
</VisualState> <!--
VisualTransition - VisualState 变化时的过渡效果（要结合相应的 VisualState 中的 Storyboard 使用）
From - 变化前的 VisualState 的 Name
To - 变化后的 VisualState 的 Name
GeneratedDuration - 一个状态变化到另一个状态的所需时间
GeneratedEasingFunction - 一个状态变化到另一个状态的缓动效果
-->
<VisualStateGroup.Transitions>
<VisualTransition To="PointerOver" GeneratedDuration="0:0:1">
<VisualTransition.GeneratedEasingFunction>
<ElasticEase EasingMode="EaseInOut" />
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
</VisualStateGroup> <VisualStateGroup x:Name="MyStates">
<VisualState x:Name="MyState1" />
<VisualState x:Name="MyState2"/>
<VisualState x:Name="MyState3"/>
</VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="border" BorderThickness="10">
<Border.BorderBrush>
<SolidColorBrush x:Name="borderBrush" Color="Red" />
</Border.BorderBrush>
<Grid Name="grid" Background="{TemplateBinding Background}" Width="500" Height="200">
<ContentPresenter Name="contentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="24.667"
Foreground="{TemplateBinding Foreground}" />
</Grid>
</Border>
</Grid>
</ControlTemplate> </Grid.Resources> <StackPanel Margin="10 0 10 10"> <TextBlock Name="lblMsg" TextWrapping="Wrap" Margin="5" /> <Button Name="btnDemo" Content="我是 Button（用于演示 VisualState 和 VisualStateManager）" Margin="5" Background="Blue" Foreground="White" Template="{StaticResource ControlTemplate1}" /> <Button Name="btnVisualStateManager" Content="将上面的按钮的 VisualState 转到 PointerOver" Click="btnVisualStateManager_Click" Margin="5" /> </StackPanel> </Grid>
</Page>
Controls/UI/VisualState/VisualStateDemo.xaml.cs
/*
* 演示“VisualState 和 VisualStateManager”相关知识点
*/ using System;
using System.Collections.Generic;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows10.Common; namespace Windows10.Controls.UI.VisualState
{
public sealed partial class VisualStateDemo : Page
{
public VisualStateDemo()
{
this.InitializeComponent();
} private void btnVisualStateManager_Click(object sender, RoutedEventArgs e)
{
/*
* bool GoToState(Control control, string stateName, bool useTransitions) - 转换 VisualState
* control - 需要转换 VisualState 的控件
* stateName - 目标 VisualState 的名称
* useTransitions - 是否使用 VisualTransition 进行过渡
*/ // 将 VisualState 转到指定的状态（每个 VisualStateGroup 分别指定一个其内的 VisualState）
VisualStateManager.GoToState(btnDemo, "PointerOver", true);
VisualStateManager.GoToState(btnDemo, "MyState3", false); /*
* VisualStateManager.GetVisualStateGroups(FrameworkElement obj) - 获取指定 FrameworkElement 中的 VisualStateGroup 集合
* 注：本例中的 VisualState 定义在 btnDemo 的控件模板中的第一个 Grid 中
*
* VisualStateGroup - VisualState 组（每个 VisualStateManager 下可以有多个 VisualStateGroup）
* Name - 获取此 VisualStateGroup 的名字
* CurrentState - 获取此 VisualStateGroup 的当前使用的 VisualState（每个 VisualStateGroup 正在使用的 VisualState 只能有一个）
* States - 获取此 VisualStateGroup 中的 VisualState 集合
* Transitions - 获取此 VisualStateGroup 中的 VisualTransition 集合
* CurrentStateChanging, CurrentStateChanged - 此 VisualStateGroup 中的正在使用的 VisualState 发生变化时触发的事件
*
* VisualState - VisualState
* Name - 获取此 VisualState 的名字
* Setters - 获取此 VisualState 中的 Setter 集合
* StateTriggers - 获取此 VisualState 中的 StateTrigger 集合
* Storyboard - 获取此 VisualState 中的 Storyboard 对象
*/ lblMsg.Text = "";
Grid grid = Helper.GetVisualChild<Grid>(btnDemo);
IList<VisualStateGroup> visualStateGroups = VisualStateManager.GetVisualStateGroups(grid);
foreach (VisualStateGroup visualStateGroup in visualStateGroups)
{
lblMsg.Text += visualStateGroup.Name + " " + visualStateGroup.CurrentState.Name;
lblMsg.Text += Environment.NewLine;
}
}
}
}
2、演示如何获取控件的默认 Style, ControlTemplate, VisualState
Controls/UI/DefaultUI.xaml
<Page
x:Class="Windows10.Controls.UI.DefaultUI"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.UI"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Grid Background="Transparent">
<StackPanel Margin="10 0 10 10"> <TextBlock TextWrapping="Wrap" Margin="5">
<Run>如何获取控件的默认 Style, ControlTemplate, VisualState 呢？</Run>
<LineBreak />
<Run>1、在 msdn 上找: https://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/mt299122.aspx</Run>
<LineBreak />
<Run>2、在 Visual Studio 的设计界面，右键选择控件，然后选择“编辑控件”或“编辑模板”或“编辑其他模板”，然后选择“编辑副本”</Run>
<LineBreak />
<Run>3、打开这个 C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic\generic.xaml 文件，然后在里面找</Run>
</TextBlock> <TextBlock TextWrapping="Wrap" Margin="5">
<Run>如果遇到复杂的控件，如何确定我要编辑的其内部的控件的类型呢？</Run>
<LineBreak />
<Run>运行你的程序，然后在“实时可视化树（Live Visual Tree）”中找</Run>
</TextBlock> </StackPanel>
</Grid> <Page.Resources>
<!--
这个就是 Button 的默认样式
-->
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
<Setter Property="Padding" Value="8,4,8,4"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="UseSystemFocusVisuals" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources> </Page>
OK
[源码下载]