背水一战 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
[源码下载]

时间: 2024-10-17 16:07:26

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

背水一战 Windows 10 (64) - 控件(WebView): 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(WebView) 加载指定 HttpMethod 的请求 自定义请求的 http header app 与 js 的交互 示例1.演示 WebView 如何加载指定 HttpMethod 的请求以及如何自定义请求的 http headerWebApi/Controllers/WebViewPostController.cs /* * 用于 WebView 演示“如何加载指定 HttpMethod 的请求,以及如何自

背水一战 Windows 10 (54) - 控件(集合类): ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingStackPanel, WrapGrid

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类 - ItemsControl 的布局控件) OrientedVirtualizingPanel VirtualizingStackPanel WrapGrid 示例1.OrientedVirtualizingPanel(基类) 的示例Controls/CollectionControl/ItemsControlDemo/LayoutControl/OrientedVirtualizingPanelDemo.

背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar

原文:背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) AppBar CommandBar 示例1.AppBar 的示例Controls/NavigationControl/AppBarDemo.xaml <Page x:Class="Windows10.Controls.NavigationControl.AppBarDemo" xml

背水一战 Windows 10 (41) - 控件(导航类): Frame

原文:背水一战 Windows 10 (41) - 控件(导航类): Frame [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) Frame 示例Controls/NavigationControl/FrameDemo.xaml <Page x:Class="Windows10.Controls.NavigationControl.FrameDemo" xmlns="http://schemas.microsoft.com/w

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

原文:背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹出类) ToolTip Popup PopupMenu 示例1.ToolTip 的示例Controls/FlyoutControl/ToolTipDemo.xaml <Page x:Class="Windows10.Controls.FlyoutControl.ToolTipDemo&q

背水一战 Windows 10 (28) - 控件(文本类): TextBox, PasswordBox

原文:背水一战 Windows 10 (28) - 控件(文本类): TextBox, PasswordBox [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) TextBox PasswordBox 示例1.TextBox 的示例 1Controls/TextControl/TextBoxDemo1.xaml <Page x:Class="Windows10.Controls.TextControl.TextBoxDemo1" xmln

背水一战 Windows 10 (27) - 控件(文本类): TextBlock

原文:背水一战 Windows 10 (27) - 控件(文本类): TextBlock [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) TextBlock 示例1.TextBlock 的示例 1Controls/TextControl/TextBlockDemo1.xaml <Page x:Class="Windows10.Controls.TextControl.TextBlockDemo1" xmlns="http://

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

原文:背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹出类) FlyoutBase Flyout MenuFlyout 示例1.FlyoutBase(基类) 的示例Controls/FlyoutControl/FlyoutBaseDemo.xaml <Page x:Class="Windows10.Controls.FlyoutC

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

原文:背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(选择类) Selector ComboBox 示例1.Selector(基类) 的示例Controls/SelectionControl/SelectorDemo.xaml <Page x:Class="Windows10.Controls.SelectionControl.SelectorDemo&q