[源码下载]

背水一战 Windows 10 (8) - 控件 UI: StateTrigger

作者:webabcd

介绍
背水一战 Windows 10 之 控件 UI

  • VisualState 之 StateTrigger

示例
1、自定义 StateTrigger
Controls/UI/VisualState/MyDeviceFamilyStateTrigger.cs

/*
 * 用于演示自定义 StateTrigger
 *
 *
 * StateTriggerBase - 自定义 StateTrigger 需要继承此基类
 *     SetActive(Boolean IsActive) - 调用此方法,传递 true 则应用对应的 VisualState;传递 false 则取消对应的 VisualState
 *
 *
 * 此类的作用:当前的设备类型与指定的一致时,则触发对应的 VisualState
 * 注:如果 DeviceFamily 属性需要绑定的话,别忘了将其定义为依赖属性
 */

using Windows.UI.Xaml;

namespace Windows10.Controls.UI.VisualState
{
    public class MyDeviceFamilyStateTrigger : StateTriggerBase
    {
        private string _deviceFamily;

        public string DeviceFamily
        {
            get
            {
                return _deviceFamily;
            }
            set
            {
                _deviceFamily = value;

                // 获取当前的设备类型,目前已知的返回字符串有:Windows.Mobile, Windows.Desktop, Windows.Xbox
                string currentDeviceFamily = Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily;

                // 当前的设备类型与指定的一致则触发对应的 VisualState
                SetActive(_deviceFamily == currentDeviceFamily);
            }
        }
    }
}

2、自定义 StateTrigger
Controls/UI/VisualState/MyInputTypeStateTrigger.cs

/*
 * 用于演示自定义 StateTrigger
 *
 *
 * StateTriggerBase - 自定义 StateTrigger 需要继承此基类
 *     SetActive(Boolean IsActive) - 调用此方法,传递 true 则应用对应的 VisualState;传递 false 则取消对应的 VisualState
 *
 *
 * 此类的作用:当指定的 FrameworkElement 触发 PointerPressedEvent 事件时,根据 PointerDeviceType 的不同触发不同的 VisualState
 * 注:如果 TargetElement 属性或 PointerType 属性需要绑定的话,别忘了将其定义为依赖属性
 */

using Windows.Devices.Input;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Input;

namespace Windows10.Controls.UI.VisualState
{
    public class MyInputTypeStateTrigger : StateTriggerBase
    {
        private FrameworkElement _targetElement;
        private PointerDeviceType _lastPointerType, _triggerPointerType;
        private PointerEventHandler _pointerEventHandler;

        // 指定的 FrameworkElement
        public FrameworkElement TargetElement
        {
            get
            {
                return _targetElement;
            }
            set
            {
                if (_pointerEventHandler == null)
                {
                    _pointerEventHandler = new PointerEventHandler(_targetElement_PointerPressed);
                }

                if (_targetElement != null)
                {
                    _targetElement.RemoveHandler(FrameworkElement.PointerPressedEvent, _pointerEventHandler);
                }

                _targetElement = value;

                // 监听 FrameworkElement 的 PointerPressedEvent 事件
                _targetElement.AddHandler(FrameworkElement.PointerPressedEvent, _pointerEventHandler, true);

                // 这么写有问题,因为点击 button 时不会触发此事件
                // _targetElement.PointerPressed += _targetElement_PointerPressed;
            }
        }

        private void _targetElement_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            _lastPointerType = e.Pointer.PointerDeviceType;
            UpdateTrigger();
        }

        // 指定的 PointerDeviceType(Touch, Pen, Mouse)
        public PointerDeviceType PointerType
        {
            get
            {
                return _triggerPointerType;
            }
            set
            {
                _triggerPointerType = value;
            }
        }

        public void UpdateTrigger()
        {
            // 指定的 FrameworkElement 触发 PointerPressedEvent 事件后,其 PointerDeviceType 如果和指定的 PointerDeviceType 一致,则触发对应的 VisualState
            SetActive(_triggerPointerType == _lastPointerType);
        }
    }
}

3、演示 StateTrigger 的应用
Controls/UI/VisualState/StateTrigger.xaml

<Page
    x:Class="Windows10.Controls.UI.VisualState.StateTrigger"
    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"

    xmlns:custom="using:Windows10.Controls.UI.VisualState" >

    <!--
        本例用于演示 StateTrigger 的应用,以及如何自定义 StateTrigger
        StateTrigger 的作用就是:当指定的条件达成时触发对应的 VisualState
        内置的 StateTrigger 一共有两个,分别是 AdaptiveTrigger 和 StateTrigger,他们都继承自 StateTriggerBase
    -->
    <Page.Resources>

        <Style x:Key="MyTextStyle" TargetType="TextBlock" BasedOn="{StaticResource MyTextBlockStyle}">
            <Setter Property="FontSize" Value="24"/>
        </Style>

        <ControlTemplate x:Key="MyControlTemplate" TargetType="Button">
            <Border BorderBrush="Red" BorderThickness="1">
                <Grid Background="{TemplateBinding Background}">
                    <ContentPresenter Foreground="Red" />
                </Grid>
            </Border>
        </ControlTemplate>

    </Page.Resources>

    <Grid x:Name="myGrid" Background="Transparent">

        <StackPanel Name="myPanel" Orientation="Horizontal" Margin="10 0 10 10">

            <TextBlock Text="TextBlock 1 " Name="myTextBlock1" Margin="10" />
            <TextBlock Text="TextBlock 2 " Name="myTextBlock2" Margin="10" />
            <TextBlock Text="TextBlock 3 " Name="myTextBlock3" Margin="10" />

            <Button Name="myButton" Content="我是 Button" Margin="10" />

            <CheckBox Name="chkIsActive" Content="IsActive" Margin="10" />

        </StackPanel>

        <!--注意:VisualState 不能放到 Page 下面,否则不工作-->
        <VisualStateManager.VisualStateGroups>
            <!--
                给 VisualState 分组是很有必要的,每个 VisualStateGroup 正在使用的 VisualState 只能有一个
            -->
            <VisualStateGroup x:Name="WindowSizeStates">
                <VisualState>
                    <VisualState.StateTriggers>
                        <!--
                            AdaptiveTrigger - 内置的 StateTrigger
                                MinWindowWidth - 当窗口的宽度大于等于此值时触发(依赖属性)
                                MinWindowHeight - 当窗口的高度大于等于此值时触发(依赖属性)
                        -->
                        <!--当窗口的的宽度大于等于 720 时,触发此 VisualState(这里没有对应的 VisualState,也就是都恢复为默认状态)-->
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!--当窗口的的宽度大于等于 0 时且小于 720 时,触发此 VisualState-->
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="myPanel.Orientation" Value="Vertical" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>

            <VisualStateGroup x:Name="ActiveStates">
                <VisualState>
                    <VisualState.StateTriggers>
                        <!--
                            StateTrigger - 内置的 StateTrigger
                                IsActive - 是否触发对应的 VisualState(依赖属性)
                        -->
                        <!--根据复选框 chkIsActive 的选中状态,来决定是否触发此 VisualState-->
                        <StateTrigger IsActive="{Binding ElementName=chkIsActive, Path=IsChecked, Mode=OneWay}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="myTextBlock1.Style" Value="{StaticResource MyTextStyle}" />
                        <Setter Target="myTextBlock2.Style" Value="{StaticResource MyTextStyle}" />
                        <Setter Target="myTextBlock3.Style" Value="{StaticResource MyTextStyle}" />
                        <Setter Target="myButton.Template" Value="{StaticResource MyControlTemplate}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>

            <VisualStateGroup x:Name="DeviceFamilyStates">
                <VisualState>
                    <VisualState.StateTriggers>
                        <!--
                            MyDeviceFamilyStateTrigger - 自定义的 StateTrigger
                                DeviceFamily - 当设备类型为指定的值时触发(非依赖属性,如需绑定之类的特性的话,则要将其改为依赖属性)
                        -->
                        <!--当设备类型为 Windows.Desktop 时触发此 VisualState-->
                        <custom:MyDeviceFamilyStateTrigger DeviceFamily="Windows.Desktop" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="myGrid.Background" Value="#FF0000" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>

            <VisualStateGroup x:Name="InputTypeStates">
                <VisualState>
                    <!--
                        MyInputTypeStateTrigger - 自定义的 StateTrigger
                            TargetElement - 需要监听 PointerPressedEvent 事件的 FrameworkElement 对象(非依赖属性,如需绑定之类的特性的话,则要将其改为依赖属性)
                            PointerType - 监听的 FrameworkElement 触发 PointerPressedEvent 事件后,根据 PointerType 的类型来决定触发指定的 VisualState(非依赖属性,如需绑定之类的特性的话,则要将其改为依赖属性)
                    -->
                    <!--当触发了 myButton 的 PointerPressedEvent 事件后,如果其 PointerDeviceType 是 Mouse 类型,则触发此 VisualState-->
                    <VisualState.StateTriggers>
                        <!--对 {x:Bind myButton} 不理解的话,请参见“绑定”部分-->
                        <custom:MyInputTypeStateTrigger TargetElement="{x:Bind myButton}" PointerType="Mouse" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="myGrid.Background" Value="Orange" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    </Grid>

</Page>

OK
[源码下载]

背水一战 Windows 10 (8) - 控件 UI: StateTrigger的更多相关文章

  1. 背水一战 Windows 10 (7) - 控件 UI: VisualState, VisualStateManager, 控件的默认 UI

    [源码下载] 背水一战 Windows 10 (7) - 控件 UI: VisualState, VisualStateManager, 控件的默认 UI 作者:webabcd 介绍背水一战 Wind ...

  2. 背水一战 Windows 10 (6) - 控件 UI: 字体的自动继承的特性, Style, ControlTemplate

    [源码下载] 背水一战 Windows 10 (6) - 控件 UI: 字体的自动继承的特性, Style, ControlTemplate 作者:webabcd 介绍背水一战 Windows 10 ...

  3. 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog

    [源码下载] 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog 作者:webabcd 介绍背水一战 Windows 10 之 控 ...

  4. 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu

    [源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹 ...

  5. 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout

    [源码下载] 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout 作者:webabcd 介绍背水一战 Windows 10 之 ...

  6. 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing

    [源码下载] 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing 作者:webabcd 介绍背水一 ...

  7. 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch

    [源码下载] 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch 作者:webabcd 介绍背水一 ...

  8. 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox

    [源码下载] 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(选择类) Sel ...

  9. 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton

    [源码下载] 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButt ...

随机推荐

  1. iOS 陀螺仪,加速度计

    atan2(x, y)反正切函数  x是对边  y临边 data.acceleration  加速度值,当手机水平放置时值为(0,0,-1),当手机竖直放置时值为(0,-1,0),判断手机拿起状态可以 ...

  2. 在virtualbox中安装CentOS-7

    当初才接触linux的时候,因为条件限制,只能在虚拟机中安装linux系统使用,由于是小白,爬了好多坑.于是决定写一篇关于在虚拟机中安装linux系统的博客.一是为了巩固自己的知识,二是希望能够对新手 ...

  3. Java多线程与并发库高级应用-同步集合

    ArrayBlockingQueue LinkedBlockingQueue 数组是连续的一片内存 链表是不连续的一片内存  传统方式下用Collections工具类提供的synchronizedCo ...

  4. 由SecureCRT引发的思考和学习

    由SecureCRT引发的思考和学习 http://mp.weixin.qq.com/s?__biz=MzAxOTAzMDEwMA==&mid=2652500597&idx=1& ...

  5. [转] Python包和类的基本用法

    http://blog.csdn.net/liukang325/article/details/46724365 建立一个文件夹filePackage 在filePackage 文件夹内创建 __in ...

  6. [游戏模版6] Win32 graph

    >_<:there in the MyPaint(...) function respectively use Ellipse(...) draw ellipse, use RoundRe ...

  7. gerrit添加新用户

    默认gerrit的web服务端口为8080,通过apache的反向代理就可以使用标准的80(HTTP)来访问gerrit的web界面,在apache的配置文件httpd.conf添加如下反向代理和HT ...

  8. hdu4255筛素数+广搜

    Mr. B has recently discovered the grid named "spiral grid".Construct the grid like the fol ...

  9. Cookie 与Session 的区别(转载)

    原地址: http://www.cnblogs.com/shiyangxt/archive/2008/10/07/1305506.html 两个都可以用来存私密的东西,同样也都有有效期的说法. 区别在 ...

  10. 手把手教你玩转SOCKET模型之重叠I/O篇(上)

    “身为一个初学者,时常能体味到初学者入门的艰辛,所以总是想抽空作点什么来尽我所能的帮助那些需要帮助的人.我也希望大家能把自己的所学和他人一起分享,不要去鄙视别人索取时的贪婪,因为最应该被鄙视的是不肯付 ...