[源码下载]

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

作者:webabcd

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

  • VisualState 之 StateTrigger

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

  1. /*
  2. * 用于演示自定义 StateTrigger
  3. *
  4. *
  5. * StateTriggerBase - 自定义 StateTrigger 需要继承此基类
  6. * SetActive(Boolean IsActive) - 调用此方法,传递 true 则应用对应的 VisualState;传递 false 则取消对应的 VisualState
  7. *
  8. *
  9. * 此类的作用:当前的设备类型与指定的一致时,则触发对应的 VisualState
  10. * 注:如果 DeviceFamily 属性需要绑定的话,别忘了将其定义为依赖属性
  11. */
  12.  
  13. using Windows.UI.Xaml;
  14.  
  15. namespace Windows10.Controls.UI.VisualState
  16. {
  17. public class MyDeviceFamilyStateTrigger : StateTriggerBase
  18. {
  19. private string _deviceFamily;
  20.  
  21. public string DeviceFamily
  22. {
  23. get
  24. {
  25. return _deviceFamily;
  26. }
  27. set
  28. {
  29. _deviceFamily = value;
  30.  
  31. // 获取当前的设备类型,目前已知的返回字符串有:Windows.Mobile, Windows.Desktop, Windows.Xbox
  32. string currentDeviceFamily = Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily;
  33.  
  34. // 当前的设备类型与指定的一致则触发对应的 VisualState
  35. SetActive(_deviceFamily == currentDeviceFamily);
  36. }
  37. }
  38. }
  39. }

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

  1. /*
  2. * 用于演示自定义 StateTrigger
  3. *
  4. *
  5. * StateTriggerBase - 自定义 StateTrigger 需要继承此基类
  6. * SetActive(Boolean IsActive) - 调用此方法,传递 true 则应用对应的 VisualState;传递 false 则取消对应的 VisualState
  7. *
  8. *
  9. * 此类的作用:当指定的 FrameworkElement 触发 PointerPressedEvent 事件时,根据 PointerDeviceType 的不同触发不同的 VisualState
  10. * 注:如果 TargetElement 属性或 PointerType 属性需要绑定的话,别忘了将其定义为依赖属性
  11. */
  12.  
  13. using Windows.Devices.Input;
  14. using Windows.UI.Xaml;
  15. using Windows.UI.Xaml.Input;
  16.  
  17. namespace Windows10.Controls.UI.VisualState
  18. {
  19. public class MyInputTypeStateTrigger : StateTriggerBase
  20. {
  21. private FrameworkElement _targetElement;
  22. private PointerDeviceType _lastPointerType, _triggerPointerType;
  23. private PointerEventHandler _pointerEventHandler;
  24.  
  25. // 指定的 FrameworkElement
  26. public FrameworkElement TargetElement
  27. {
  28. get
  29. {
  30. return _targetElement;
  31. }
  32. set
  33. {
  34. if (_pointerEventHandler == null)
  35. {
  36. _pointerEventHandler = new PointerEventHandler(_targetElement_PointerPressed);
  37. }
  38.  
  39. if (_targetElement != null)
  40. {
  41. _targetElement.RemoveHandler(FrameworkElement.PointerPressedEvent, _pointerEventHandler);
  42. }
  43.  
  44. _targetElement = value;
  45.  
  46. // 监听 FrameworkElement 的 PointerPressedEvent 事件
  47. _targetElement.AddHandler(FrameworkElement.PointerPressedEvent, _pointerEventHandler, true);
  48.  
  49. // 这么写有问题,因为点击 button 时不会触发此事件
  50. // _targetElement.PointerPressed += _targetElement_PointerPressed;
  51. }
  52. }
  53.  
  54. private void _targetElement_PointerPressed(object sender, PointerRoutedEventArgs e)
  55. {
  56. _lastPointerType = e.Pointer.PointerDeviceType;
  57. UpdateTrigger();
  58. }
  59.  
  60. // 指定的 PointerDeviceType(Touch, Pen, Mouse)
  61. public PointerDeviceType PointerType
  62. {
  63. get
  64. {
  65. return _triggerPointerType;
  66. }
  67. set
  68. {
  69. _triggerPointerType = value;
  70. }
  71. }
  72.  
  73. public void UpdateTrigger()
  74. {
  75. // 指定的 FrameworkElement 触发 PointerPressedEvent 事件后,其 PointerDeviceType 如果和指定的 PointerDeviceType 一致,则触发对应的 VisualState
  76. SetActive(_triggerPointerType == _lastPointerType);
  77. }
  78. }
  79. }

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

  1. <Page
  2. x:Class="Windows10.Controls.UI.VisualState.StateTrigger"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:local="using:Windows10.Controls.UI.VisualState"
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8. mc:Ignorable="d"
  9.  
  10. xmlns:custom="using:Windows10.Controls.UI.VisualState" >
  11.  
  12. <!--
  13. 本例用于演示 StateTrigger 的应用,以及如何自定义 StateTrigger
  14. StateTrigger 的作用就是:当指定的条件达成时触发对应的 VisualState
  15. 内置的 StateTrigger 一共有两个,分别是 AdaptiveTrigger 和 StateTrigger,他们都继承自 StateTriggerBase
  16. -->
  17. <Page.Resources>
  18.  
  19. <Style x:Key="MyTextStyle" TargetType="TextBlock" BasedOn="{StaticResource MyTextBlockStyle}">
  20. <Setter Property="FontSize" Value="24"/>
  21. </Style>
  22.  
  23. <ControlTemplate x:Key="MyControlTemplate" TargetType="Button">
  24. <Border BorderBrush="Red" BorderThickness="1">
  25. <Grid Background="{TemplateBinding Background}">
  26. <ContentPresenter Foreground="Red" />
  27. </Grid>
  28. </Border>
  29. </ControlTemplate>
  30.  
  31. </Page.Resources>
  32.  
  33. <Grid x:Name="myGrid" Background="Transparent">
  34.  
  35. <StackPanel Name="myPanel" Orientation="Horizontal" Margin="10 0 10 10">
  36.  
  37. <TextBlock Text="TextBlock 1 " Name="myTextBlock1" Margin="10" />
  38. <TextBlock Text="TextBlock 2 " Name="myTextBlock2" Margin="10" />
  39. <TextBlock Text="TextBlock 3 " Name="myTextBlock3" Margin="10" />
  40.  
  41. <Button Name="myButton" Content="我是 Button" Margin="10" />
  42.  
  43. <CheckBox Name="chkIsActive" Content="IsActive" Margin="10" />
  44.  
  45. </StackPanel>
  46.  
  47. <!--注意:VisualState 不能放到 Page 下面,否则不工作-->
  48. <VisualStateManager.VisualStateGroups>
  49. <!--
  50. 给 VisualState 分组是很有必要的,每个 VisualStateGroup 正在使用的 VisualState 只能有一个
  51. -->
  52. <VisualStateGroup x:Name="WindowSizeStates">
  53. <VisualState>
  54. <VisualState.StateTriggers>
  55. <!--
  56. AdaptiveTrigger - 内置的 StateTrigger
  57. MinWindowWidth - 当窗口的宽度大于等于此值时触发(依赖属性)
  58. MinWindowHeight - 当窗口的高度大于等于此值时触发(依赖属性)
  59. -->
  60. <!--当窗口的的宽度大于等于 720 时,触发此 VisualState(这里没有对应的 VisualState,也就是都恢复为默认状态)-->
  61. <AdaptiveTrigger MinWindowWidth="720" />
  62. </VisualState.StateTriggers>
  63. </VisualState>
  64. <VisualState>
  65. <VisualState.StateTriggers>
  66. <!--当窗口的的宽度大于等于 0 时且小于 720 时,触发此 VisualState-->
  67. <AdaptiveTrigger MinWindowWidth="0" />
  68. </VisualState.StateTriggers>
  69. <VisualState.Setters>
  70. <Setter Target="myPanel.Orientation" Value="Vertical" />
  71. </VisualState.Setters>
  72. </VisualState>
  73. </VisualStateGroup>
  74.  
  75. <VisualStateGroup x:Name="ActiveStates">
  76. <VisualState>
  77. <VisualState.StateTriggers>
  78. <!--
  79. StateTrigger - 内置的 StateTrigger
  80. IsActive - 是否触发对应的 VisualState(依赖属性)
  81. -->
  82. <!--根据复选框 chkIsActive 的选中状态,来决定是否触发此 VisualState-->
  83. <StateTrigger IsActive="{Binding ElementName=chkIsActive, Path=IsChecked, Mode=OneWay}" />
  84. </VisualState.StateTriggers>
  85. <VisualState.Setters>
  86. <Setter Target="myTextBlock1.Style" Value="{StaticResource MyTextStyle}" />
  87. <Setter Target="myTextBlock2.Style" Value="{StaticResource MyTextStyle}" />
  88. <Setter Target="myTextBlock3.Style" Value="{StaticResource MyTextStyle}" />
  89. <Setter Target="myButton.Template" Value="{StaticResource MyControlTemplate}" />
  90. </VisualState.Setters>
  91. </VisualState>
  92. </VisualStateGroup>
  93.  
  94. <VisualStateGroup x:Name="DeviceFamilyStates">
  95. <VisualState>
  96. <VisualState.StateTriggers>
  97. <!--
  98. MyDeviceFamilyStateTrigger - 自定义的 StateTrigger
  99. DeviceFamily - 当设备类型为指定的值时触发(非依赖属性,如需绑定之类的特性的话,则要将其改为依赖属性)
  100. -->
  101. <!--当设备类型为 Windows.Desktop 时触发此 VisualState-->
  102. <custom:MyDeviceFamilyStateTrigger DeviceFamily="Windows.Desktop" />
  103. </VisualState.StateTriggers>
  104. <VisualState.Setters>
  105. <Setter Target="myGrid.Background" Value="#FF0000" />
  106. </VisualState.Setters>
  107. </VisualState>
  108. </VisualStateGroup>
  109.  
  110. <VisualStateGroup x:Name="InputTypeStates">
  111. <VisualState>
  112. <!--
  113. MyInputTypeStateTrigger - 自定义的 StateTrigger
  114. TargetElement - 需要监听 PointerPressedEvent 事件的 FrameworkElement 对象(非依赖属性,如需绑定之类的特性的话,则要将其改为依赖属性)
  115. PointerType - 监听的 FrameworkElement 触发 PointerPressedEvent 事件后,根据 PointerType 的类型来决定触发指定的 VisualState(非依赖属性,如需绑定之类的特性的话,则要将其改为依赖属性)
  116. -->
  117. <!--当触发了 myButton 的 PointerPressedEvent 事件后,如果其 PointerDeviceType 是 Mouse 类型,则触发此 VisualState-->
  118. <VisualState.StateTriggers>
  119. <!--对 {x:Bind myButton} 不理解的话,请参见“绑定”部分-->
  120. <custom:MyInputTypeStateTrigger TargetElement="{x:Bind myButton}" PointerType="Mouse" />
  121. </VisualState.StateTriggers>
  122. <VisualState.Setters>
  123. <Setter Target="myGrid.Background" Value="Orange" />
  124. </VisualState.Setters>
  125. </VisualState>
  126. </VisualStateGroup>
  127. </VisualStateManager.VisualStateGroups>
  128.  
  129. </Grid>
  130.  
  131. </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. ubuntu:activate root

    You must activate the usr of root,when using a pc with a new os of ubuntu. This command: sudo passwd ...

  2. ssh/openssh

    http://www.cnblogs.com/wwufengg/articles/ssh-openssh-detail.html http://www.cnblogs.com/jjkv3/archiv ...

  3. List.Foreach与C#的foreach的区别

    几年前参加面试时就被提问过,现在面试别人时也经常提到这个问题. 今天小试了一下.得出如下几点: 1. 首先,mscorlib里System.Collections.Generic. List<T ...

  4. Docker容器入门

    为什么要看docker 从去年起就或多或少的接受了docker的熏陶,主要还是Infoq在去年有很多关于docker的实践视频讲座,记得有一篇是<Docker在雪球的技术实践>,当时听的也 ...

  5. jQuery使用方法

    使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素. 选择表达式可以是CSS选择器: 1 $(document)//选择整个文档对象2 ...

  6. Atitit html5 Canvas 如何自适应屏幕大小

    Atitit  html5 Canvas 如何自适应屏幕大小     可以用JS监控屏幕大小,然后调整Canvas的大小.在代码中加入JS 1 2 3 4 5 6 7 $(window).resize ...

  7. iOS----Asset Catalog的用法

    文/余书懿(简书作者)原文链接:http://www.jianshu.com/p/7aa06ce22a7b著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 引言 Asset Catalo ...

  8. inoic start projectname sidemenu报错 - Error: Cannot find module 'lodash._baseslice'

    inoic start projectname sidemenu报错 - Error: Cannot find module 'lodash._baseslice' 在公司的电脑上出现过这个错误,后来 ...

  9. How Google TestsSoftware - Part Five

    Instead of distinguishingbetween code, integration and system testing, Google uses the language ofsm ...

  10. angularjs之插件ngRoute和ngAnimate

    使用ngRoute和ngAnimate配合使用,可以实现页面切换的效果. 如果有使用过swiper,就知道这个效果是怎么样的. 代码: <!DOCTYPE html> <html l ...