Demo下載：http://yunpan.cn/cFjgPtWRHKH9H  访问密码 c4b7

顧名思義，視圖狀態管理器。

在WPF中，它的功能似乎更強大。在UWP中，閹割了GotElementState方法，導致它只能在控件內部使用。

這個東東一般用來突出某些操作，以提醒用戶。它原來是狀態A，後來用戶進行了某些操作，我們就會根據用戶的操作，判斷他想要做什麼，然後根據他的目的，顯示狀態B。最容易理解的例子就是按鈕，它普通狀態，鼠標放上去以後，變成了另一種狀態，點擊又是另一種狀態。

1.按鈕狀態

我們先來看看，按鈕有哪些狀態。首先我們來編輯一個按鈕模板：XAML面板中，添加一個按鈕，並在它上面右鍵->編輯模板->編輯副本，截圖如下：

然後，我們就可以得到一個按鈕的副本：

<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"><Grid.Background><SolidColorBrush x:Name="bkBrush" Color="LightGray" /></Grid.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 SystemControlDisabledBaseLowBrush}"/></ObjectAnimationUsingKeyFrames><ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"><DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/></ObjectAnimationUsingKeyFrames></Storyboard></VisualState>

　　　　　　　　　　　　　　　　　　　　<!------------- 我加的狀態 ---------------><VisualState x:Name="testState"><Storyboard><ColorAnimation To="Red" Storyboard.TargetName="bkBrush" Storyboard.TargetProperty="Color" Duration="0:0:2" EnableDependentAnimation="True" /></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>

在上面的代碼中，可以看到鼠標有 "Normal" "PointerOver" "Pressed" "Disabled" 四種狀態。意思一看就知道。

那麼這些狀態是怎麼執行的呢？由誰來執行呢？

為了解答這個問題，我添加了一個狀態 "testState"。我添加了一個按鈕，單擊來調用它。

private void button1_Click(object sender, RoutedEventArgs e){Windows.UI.Xaml.VisualStateManager.GoToState(button, "testState", true);}

一點擊button1,就使用 GoToState 調用另一個按鈕的狀態。具體效果看我Demo.

那麼我們能調用 PointerOver之類的狀態嗎？答案是肯定的。它由誰來調用，答案也呼之欲出，Button來調用。Button是一個控件，我們只要捕獲鼠標消息，然後在消息處理函數那裡調用 GoToState， 那這一切不就順理成章了嗎？

2.UserControl

所以我又寫了一個UserControl，當鼠標放上去時，改變它的背景顏色。

<UserControlx:Class="VisualStateManager.MyUserControl1"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:VisualStateManager"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"d:DesignHeight="300"d:DesignWidth="400"><UserControl.Resources><SolidColorBrush x:Name="RedBrush" Color="Red" /></UserControl.Resources><Grid x:Name="rootGrid" PointerEntered="rootGrid_PointerEntered" Background="Gray" PointerExited="rootGrid_PointerExited"><VisualStateManager.VisualStateGroups><VisualStateGroup><VisualStateGroup.States><VisualState x:Name="Normal" /><VisualState x:Name="PointerOver"><Storyboard><ObjectAnimationUsingKeyFrames Storyboard.TargetName="rootGrid" Storyboard.TargetProperty="Background"><DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RedBrush}" /></ObjectAnimationUsingKeyFrames></Storyboard></VisualState></VisualStateGroup.States></VisualStateGroup></VisualStateManager.VisualStateGroups></Grid>
</UserControl>

看Grid的消息響應：

PointerEntered="rootGrid_PointerEntered" Background="Gray" PointerExited="rootGrid_PointerExited"
        private void rootGrid_PointerEntered(object sender, PointerRoutedEventArgs e){Windows.UI.Xaml.VisualStateManager.GoToState(this, "PointerOver", true);}private void rootGrid_PointerExited(object sender, PointerRoutedEventArgs e){Windows.UI.Xaml.VisualStateManager.GoToState(this, "Normal", true);}

然後效果就出來了，鼠標一放上去，背景顏色變紅。SO EASY。

但是，如果你仔細看，Normal 狀態，發現它什麼也不做，那為什麼它什麼也不做會還原為原來的灰色背景呢？

3.狀態執行的細節

我們就必須要了解這個細節了：

1. 如果控件要转换到的新State有Storyboard，运行该Storyboard。如果控件的旧State有Storyboard，结束其运行。 
2. 如果控件已处于新state状态（即新旧State相同），则GoToState不执行任何操作并返回true。 
3. 如果新State在控件的ControlTemplate中不存在，则GoToState不执行任何操作并返回 false。

以上細節摘自：http://www.cnblogs.com/KeithWang/archive/2012/03/30/2425588.html

4.觸發器自動跳轉狀態

據我研究，微軟只提供了窗口大小改變，然後觸發狀態。。感覺功能很局限啊。不知道有沒有大神知道更多的，然後偷偷地告訴我。

這個東東，最常用的就是當窗口大小改變時，改變程式的界面佈局。假設有一個圖片瀏覽工具，當窗口寬度為100的時候，你只顯示一列。當窗口寬度為200的時候，你就顯示兩列。

又如微軟的視頻顯示中的那樣，在手機中，操作按鈕放在程式最下方，在PC上，操作按鈕放在最右邊。。這個時候可以使用這個東東。。我寫了一個當窗口寬度大於600時，自動拉伸按鈕長度的狀態：

        <VisualStateManager.VisualStateGroups><VisualStateGroup><VisualState><VisualState.StateTriggers><AdaptiveTrigger MinWindowWidth="600" /></VisualState.StateTriggers><VisualState.Setters><Setter Target="button1.Width" Value="500" /></VisualState.Setters></VisualState></VisualStateGroup></VisualStateManager.VisualStateGroups>

如果是改變按鈕的位置，如顯示在下方，改變到顯示到右方，可以看我的這篇博客：WIN10-UWP開發之控件。或許看微軟的示例。

好了，就寫到這裡了。

转载于:https://www.cnblogs.com/lin277541/p/4881188.html

【WIN10】VisualStateManager使用說明相关推荐

  1. GNU parted的指令說明[转]

    GNU parted的指令說明 http://www.phpweblog.net/killjin/archive/2007/09/14/1952.aspxParted是支很好用的程式,可以用來切割磁碟 ...

  2. 在delphi中嵌入腳本語言--(譯)RemObjects Pascal Script使用說明(1)(譯)

    在delphi中嵌入腳本語言--(譯)RemObjects Pascal Script使用說明(1)(譯) http://blog.csdn.net/truexf/article/details/15 ...

  3. 全幅與APS-C MTF曲線解讀說明

    原文出处 http://www.nikonclub.cc/nikon/lofiversion/index.php?t9987.html Clouder 2007/01/29 19:19:03 以下提到 ...

  4. php uv pv,PHP網站流量統計--[pv,uv,ip及$_SERVER]說明

    一.PV.UV.IP的英文解釋 PV(page view):頁面訪問量,每刷新一次就被記一次PV. UV(Unqie Vistor):獨立訪客,訪問您網站的一台電腦客戶端為一個訪客.24小時之內,同一 ...

  5. Chameleon 手動安裝說明 + Chameleon 2 RC5 Rev580

    原帖:http://bbs.pcbeta.com/viewthread.php?tid=797534 「前言」 [11/03] 因為有朋友對於轉換 BootThink 到 Chameleon 比較想瞭 ...

  6. batocera_Batocera新手上路手冊（二）：執行遊戲與基本操作說明

    ADVERTISEMENT 由於Batocera已經整合了萬能模擬器RetroArch以及必需的基本設定,可以省下一一安裝各種模擬器的功夫,使用起來相當便利,完成安裝後只需將遊戲檔案傳輸至隨身碟,就可 ...

  7. 使用Blackbird开源JavaScript库時，在IE6+、IE7下無法使用問題說明

    在新聞 [url]http://www.iteye.com/news/3832-goodbye-alert-the-use-of-new-information-pop-up-box[/url] 發布 ...

  8. 關於python 2.x中文字編碼的簡單說明

    關於python 2.x中文字編碼的簡單說明 關於python 2.x中文字編碼的簡單說明 from v2ex By 013231 at 2 天前, 154 次点击 剛剛看到有人在糾結文字編碼的問題, ...

  9. android 资源限定符,Android 適配時資源限定符的說明

    多說幾句: 之前由於沒有仔細研究適配,一直認為android不是有dpi么,只要保證mdpi等等的值設置好且正確就可以做到適配.但是在近期的項目中,需要適配平板和手機.計算了平板和手機,dpi都是屬於 ...

最新文章

  1. [转]英文版VS2010制作中文环境安装包
  2. centos 7安装
  3. 面试最后HR都要问一句有没有什么问题要问我?
  4. tensorflow综合示例3：对结构化数据进行分类：csv keras feature_column
  5. bzoj 1124 [POI2008]枪战Maf 贪心
  6. javaweb 导出文件名乱码的问题解决方案
  7. java钱_在Java中如何表示钱Money？
  8. mysql连接服务密码_Hydra爆破常见服务密码
  9. python读取大文件的坑_如何在Python中读取大文件的特定部分
  10. MySQL的基本语法(授权与备份)
  11. 卡函数or1200基于simple-spi的SD卡驱动
  12. arcgis-拓扑检查-model
  13. 《白帽子讲web安全》读书笔记_2021-07-16
  14. 2022年版中国电子信息产业趋势预测及投资战略规划分析报告
  15. 至强服务器性能排行,至强cpu天梯图,至强服务器cpu排行-
  16. 《战神》全剧情对话超详尽攻略
  17. sublime text3 主题-Boxy Theme
  18. 草稿草稿草稿22.10.9 “yuyu“ IO进程线程
  19. 敲击键盘后字符怎么出现在显示器
  20. Open3D-GUI系列（DLC1）着色器

热门文章

  1. Windows远程桌面的使用（Remote Desktop Connection）
  2. 嵌入式开发常用工具软件
  3. ooooo123123emabc
  4. 网贷，高利贷，套路贷为什么必须铲除？
  5. PHP 过滤器（Filter）
  6. 月息2%的贷款算高利贷吗？
  7. 鹤峰：美丽的茶乡—— 山水篇
  8. mybatis 连接池_应用框架之Mybatis数据源和连接池
  9. webcomponents安装了没有用_Web Components 入门实例教程
  10. linux命令 重定向%3e,linux输出信息调试信息重定向