【WIN10】VisualStateManager使用說明

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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/258223.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/258223.shtml
英文地址,請注明出處:http://en.pswp.cn/news/258223.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

mysql against包含英文_在MySQL中使用MATCH和AGAINST選擇特定列中包含字符串的行

讓我們首先創建一個表-mysql> create table DemoTable1833(Name varchar(20));修改表-Mysql> alter table DemoTable1833 ADD FULLTEXT(Name);Records: 0 Duplicates: 0 Warnings: 1使用插入命令在表中插入一些記錄-mysql> insert into DemoTable1833 values(John D…

Hadoop偽分布配置與基于Eclipse開發環境搭建

國內私募機構九鼎控股打造APP&#xff0c;來就送 20元現金領取地址&#xff1a;http://jdb.jiudingcapital.com/phone.html內部邀請碼&#xff1a;C8E245J &#xff08;不寫邀請碼&#xff0c;沒有現金送&#xff09;國內私募機構九鼎控股打造&#xff0c;九鼎投資是在全國股份…

百度地圖JavaScript API覆蓋物旋轉時出現偏移

在項目中&#xff0c;調用百度地圖JavaScript API&#xff0c;做覆蓋物的旋轉再添加到地圖上&#xff0c;結果出現偏移了。 調試過程中的效果圖&#xff1a; 發現圖片的旋轉并不是按車子的中心來的&#xff0c;而是之外的一個點。最后發現犯了一個很細節的錯&#xff1a; <s…

英利1500伏光伏組件系列亮相美國

2016年4月21日&#xff0c;英利宣布其公用事業規模太陽能光伏生產線YGE-U1500系列亮相美國。 近日&#xff0c;美國保險商實驗室&#xff08;UL&#xff09;對新型光伏板系列進行認證&#xff0c;可用于最大系統電壓為1500伏的項目。 部署英利多晶硅YGE-U 1500光伏組件系列可為…

eclipse 關閉時progress information彈框_Spring開發環境搭建(Eclipse)

開發環境搭建&#xff0c;主要包含2部分:Java安裝Eclipse安裝為易于學習&#xff0c;我們只安裝這2個部分&#xff0c;對于一般開發學習也足夠了。如果你有其他要安裝的&#xff0c;酌情添加。Java安裝我們使用Java8&#xff1a;下載JDK32位下載x86版本&#xff0c;64位下載x64…

紫薯銅鑼燒

材料&#xff1a; 全麥粉 三勺 雞蛋 一只 毅力低脂純牛奶 半盒 紫薯 蜂蜜 一勺 做法&#xff1a; 1. 雞蛋打開&#xff0c;加入半盒牛奶&#xff0c;分三次加入三勺全麥面粉&#xff0c;每次加入都要上下攪拌&#xff0c;面粉要過篩&#xff0c;最后加入半勺蜂蜜 2.紫薯蒸熟壓…

共享單車,信息安全應未雨綢繆

前日&#xff0c;摩拜單車首現泉州&#xff0c;一時間泉州的共享單車市場呈現出“三國殺”局面。據了解&#xff0c;目前三個平臺收取的押金金額每人在199元至300元不等&#xff0c;且都約定押金可原路退還&#xff0c;但積沙成塔&#xff0c;成千上萬用戶繳納的押金就相當可觀…

mysql不同字段full join_Mysql實現full join的替換方法

目前mysql還不支持full join&#xff0c;只能使用left join、union、right join來實現。但使用這個方法解決多次full join的話代碼量非常龐大&#xff0c;一直在思考有沒有其他替代方法。今天解決一個問題的時候突然想到了一個替代方法&#xff1a;使用行列轉換。這個方法有一定…

C語言經典面試題目(轉的,不過寫的的確好!)

第一部分&#xff1a;基本概念及其它問答題 1、關鍵字static的作用是什么&#xff1f; 這個簡單的問題很少有人能回答完全。在C語言中&#xff0c;關鍵字static有三個明顯的作用&#xff1a; 1). 在函數體&#xff0c;一個被聲明為靜態的變量在這一函數被調用過程中維持其值不變…

mysql 四大基礎操作_mysql數據庫的基本操作

mysql數據庫的基本操作首先我們要把mysql裝好mkdir chen/mount.cifs //192.168.100.23/LNMP chen/[rootlocalhost ~]# yum -y install \gcc \gcc-c \ncurses \ncurses-devel \bison \cmake[rootlocalhost ~]# useradd -s /sbin/nologin mysql[rootlocalhost ~]# cd chen/[rootl…

如何選擇合適的監視器?

1、可視面積 在購買液晶監視器的時候&#xff0c;最先考慮的就是“面子”大小。對于液晶監視器來說&#xff0c;其面板的大小就是可視面積的大小&#xff0c;這一點與CRT監視器有些不同。同樣參數規格的監視器&#xff0c;LCD要比CRT的可視面積更大一些&#xff0c;一般15英寸L…

匯編工具安裝三:已經配置好的匯編開發工具!

下載地址&#xff1a;http://download.csdn.net/detail/sunylat/9189543 MASM32&#xff1a;在32位操作系統正確安裝后的MASM32&#xff0c;完全可以在64位中正常工作。 RadASM&#xff1a;已經配置好的RadASM&#xff0c;可以直接使用MASM編譯器&#xff0c;可以直接開發匯編…

mysql中sex設置男女_MYSQL常用命令(3)

MYSQL常用命令(3)白玉 IT哈哈1、建表命令&#xff1a;create table ( [,.. ]);create table MyClass(id int(4) not null primary key auto_increment,name char(20) not null,sex int(4) not null default 0,degree double(16,2));2、獲取表結構命令&#xff1a; desc 表名&am…

對easyUI中課堂源碼編輯改進建議

在孫宇老師講得Easyui第10講完后&#xff0c;基本的增刪該查做出來了&#xff0c;但是編輯存在一個問題&#xff1b;行內樣式編輯修改&#xff0c;如果當用戶沒有修改數據&#xff0c;孫宇老師講得時候直接return&#xff0c;這樣做是不合理的&#xff1b;第二次再使用右鍵編輯…

一個理性戰勝感性的成功案例:P2P投資和活期理財,糾結中提煉出來的1個數學問題...

我經常是投資了P2P&#xff0c;然后用錢&#xff0c;因而損失了一部分收益。這是一個讓我糾結的問題&#xff0c;為了解決這個問題&#xff0c;我不再憑感覺&#xff0c;而是從現實情況&#xff0c;提煉出來1個數學題&#xff0c;解答我的疑惑。這是一個理性戰勝感性的成功案例…

阻礙物聯網騰飛幾大難題盤點 看能想出什么對策

按照思科的說法&#xff0c;到2020年&#xff0c;全球將有超過500億臺聯網設備&#xff0c;而據專家估計&#xff0c;在未來五年中&#xff0c;IoT將對全球經濟產生3.5萬億美元的影響。不只是冰箱&#xff0c;我們還會看到家庭能源系統、安全設備、娛樂產品、游戲、交互式穿戴設…

2014年9月6日

第一題&#xff0c;神題不可做。 第二題&#xff0c;傻逼題裸裸的轉移。。顯而易見。 1 #include<iostream>2 #include<cstdio>3 #include<cstring>4 using namespace std;5 double a[20][20];6 double dp[2000010];7 int main()8 {9 // freopen("b.…

[Labview資料] labview事件結構學習

編程的主要目的是為了實現用戶的某種功能&#xff0c;用戶通過用鼠標、鍵盤、程序內部等觸發某種程序動作&#xff0c;從而達到某種結果&#xff0c;這些操作都被稱作為事件&#xff0c;LabVIEW中相應這些事件最常用的結構就是“事件結構”。事件結構內容豐富&#xff0c;基本上…

干不掉的釘釘:從哪來,往哪去?

作為阿里巴巴最有經驗的產品經理之一&#xff0c;陳航習慣了“立項、開發、回到起點”的循環&#xff0c;但最近的一次“回到起點”&#xff0c;卻讓他記憶猶新。 那是在2014年5月26日&#xff0c;陳航帶著一支不到10人的團隊從阿里巴巴的西溪園區&#xff0c;搬進了位于杭州文…

mysql起止時間怎么寫_【Mysql 學習】日期函數函數

--curdate()返回當前日期mysql> select curdate();------------| curdate() |------------| 2011-01-01 |------------1 row in set (0.00 sec)--curtime()返回當前時間mysql> select curtime();-----------| curtime() |-----------| 09:23:15 |-----------1 row in s…