自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Windows Phone開(kāi)發(fā)(16):樣式和控件模板

作者：junwong
移動(dòng)開(kāi)發(fā)
Windows Phone是微軟發(fā)布的一款手機(jī)操作系統(tǒng)，它將微軟旗下的Xbox Live游戲、Xbox Music音樂(lè)與獨(dú)特的視頻體驗(yàn)整合至手機(jī)中。

在前面資源一文中也提過(guò)樣式，樣式就如同我們做HTML頁(yè)排版時(shí)常用到的CSS樣式表，它是對(duì)于特定婁型的可視化元素，應(yīng)該可以直接說(shuō)是針對(duì)控件的一種可 重用的屬性設(shè)置列表，這樣對(duì)于需要設(shè)置相同屬性值的同類型的多個(gè)控件來(lái)講是大大提高效率，我們不必要為每個(gè)控件做重復(fù)的動(dòng)作。
下面是一個(gè)TextBox的樣式示例，我們希望通過(guò)引用資源中的樣式，使得頁(yè)面上的所有TextBox控件都具有統(tǒng)一的外觀，而且都只能輸入數(shù)字。

  1. <phone:PhoneApplicationPage.Resources>   
  2.     <!--不帶key的樣式，應(yīng)用于所有TextBlock元素-->   
  3.     <Style TargetType="TextBlock">   
  4.         <Setter Property="FontSize" Value="40"/>   
  5.         <Setter Property="Foreground" Value="Yellow"/>   
  6.     </Style>    
  7.     <!--帶key的樣式，只有引用該資源的元素才應(yīng)用-->   
  8.     <Style x:Key="MyTextBoxStyle" TargetType="TextBox">   
  9.         <Setter Property="FontSize" Value="40"/>   
  10.         <Setter Property="Foreground" Value="Blue"/>   
  11.         <Setter Property="InputScope">   
  12.             <Setter.Value>   
  13.                 <InputScope>   
  14.                     <InputScopeName NameValue="Number"/>   
  15.                 </InputScope>   
  16.             </Setter.Value>   
  17.         </Setter>   
  18.     </Style>   
  19. </phone:PhoneApplicationPage.Resources>   
  20.     <Grid x:Name="LayoutRoot" Background="Transparent">   
  21.     <Grid.RowDefinitions>   
  22.         <RowDefinition Height="Auto"/>   
  23.         <RowDefinition Height="*"/>   
  24.     </Grid.RowDefinitions>   
  25.    
  26.         <TextBlock Grid.Row="0" x:Name="PageTitle" Text="樣式示例" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>   
  27.     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,10,12,0">   
  28.         <Grid.RowDefinitions>   
  29.             <RowDefinition Height="auto"/>   
  30.             <RowDefinition Height="auto"/>   
  31.             <RowDefinition Height="auto"/>   
  32.             <RowDefinition Height="auto"/>   
  33.             <RowDefinition Height="auto"/>   
  34.         </Grid.RowDefinitions>   
  35.         <Grid.ColumnDefinitions>   
  36.             <ColumnDefinition Width="2*"/>   
  37.             <ColumnDefinition Width="3*"/>   
  38.         </Grid.ColumnDefinitions>   
  39.         <TextBlock Grid.Column="0" Grid.Row="0" Text="文本一："/>   
  40.         <TextBlock Grid.Column="0" Grid.Row="1" Text="文本二："/>   
  41.         <TextBlock Grid.Column="0" Grid.Row="2" Text="文本三："/>   
  42.         <TextBlock Grid.Column="0" Grid.Row="3" Text="文本四："/>   
  43.         <TextBlock Grid.Column="0" Grid.Row="4" Text="文本五："/>   
  44.         <TextBox Grid.Column="1" Grid.Row="0" Style="{StaticResource MyTextBoxStyle}" />   
  45.         <TextBox Grid.Column="1" Grid.Row="1" Style="{StaticResource MyTextBoxStyle}" />   
  46.         <TextBox Grid.Column="1" Grid.Row="2" Style="{StaticResource MyTextBoxStyle}" />   
  47.         <TextBox Grid.Column="1" Grid.Row="3"/>   
  48.         <TextBox Grid.Column="1" Grid.Row="4"/>   
  49.     </Grid>   
  50. </Grid>   
樣式在資源中有兩種聲明方式，一種是帶鍵值，一種是不帶鍵值的。
1、帶key的樣式，不會(huì)自動(dòng)應(yīng)用到元素/控件上，除非元素的Style屬性引用了該資源的鍵；
2、不帶鍵的樣式資源，將自動(dòng)應(yīng)用于當(dāng)前頁(yè)面（如果資源聲明在當(dāng)前頁(yè)）中的所有同類型的元素。
所以，在上例中，你會(huì)看到左邊的一列TextBlock，它們都沒(méi)有顯式設(shè)置Style屬性，但它們都一致引用了第一個(gè)樣式，因?yàn)樵摌邮绞遣粠фI的。
而右面的一列TextBox，由于后面兩個(gè)沒(méi)有顯式設(shè)置Style屬性，故它們保持默認(rèn)樣式。

控件模板并不常用，除非你對(duì)控件的外觀的行為特效有較高的要求，因?yàn)槲覀儾荒馨芽氐耐庥^弄得太花了，這樣反而降低用戶體驗(yàn)，簡(jiǎn)潔明了的東西其實(shí)是讓人看的最舒服的。
要自定義控件模板，首先要了解一下?tīng)顟B(tài)。
如果你以前做過(guò)WPF開(kāi)發(fā)你會(huì)知道，在.NET 3.5的時(shí)候，自定義控件模板，針對(duì)控件狀態(tài)的改變所做出的應(yīng)對(duì)策略是通過(guò)觸發(fā)器來(lái)完成的，但到了.NET 4，就有了狀態(tài)的概念，而Silverlight 3也引入這概念，這樣使得控件的狀態(tài)管理更方便也更靈活了。
還有一點(diǎn)就是狀態(tài)有分組的，每個(gè)組里面的狀態(tài)是互斥的，也就是不能同時(shí)發(fā)生，每個(gè)時(shí)刻只允許組內(nèi)一個(gè)狀態(tài)發(fā)生，但不同組之間的狀態(tài)是不沖突的。
了解了狀態(tài)后，還有一概念，就是部件，這個(gè)好理解了，比如我們要組裝一輛汽車(chē)，需要哪些部件，輪胎放哪個(gè)位置，車(chē)門(mén)怎么放置等。對(duì)于復(fù)雜的控件，有可以有 N個(gè)控件或UI元素組成，由于WPF是把UI和代碼邏輯完全分開(kāi)的，但有些時(shí)候我們也希望與UI元素進(jìn)行交互，如某UI元素是否透明，是否被移動(dòng)了，或者 模板中的按鈕可能要觸發(fā)其單擊事件等，為了方便后臺(tái)代碼能夠找到這些部件，所以在控件開(kāi)發(fā)的時(shí)候會(huì)為這些特定部件統(tǒng)一命名。
那么，怎么知道一個(gè)控件的模板中有哪些狀態(tài)，有哪些特定的部件呢？從控件類的定義所附加的Attribute特性來(lái)獲取，如，Button控件的狀態(tài)和部個(gè)有：
  1. // 摘要:   
  2. //     表示按鈕控件。   
  3. [TemplateVisualState(Name = "Unfocused", GroupName = "FocusStates")]   
  4. [TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")]   
  5. [TemplateVisualState(Name = "Focused", GroupName = "FocusStates")]   
  6. [TemplateVisualState(Name = "Pressed", GroupName = "CommonStates")]   
  7. [TemplateVisualState(Name = "Normal", GroupName = "CommonStates")]   
  8. [TemplateVisualState(Name = "MouseOver", GroupName = "CommonStates")]   
  9. public class Button : ButtonBase   
Button控件是內(nèi)容控件，它并不復(fù)雜，所以沒(méi)有部件。
下面，我們就以Button為例為它自定義一個(gè)模板，注意，定義模板寫(xiě)XAML比較花時(shí)間，你可以選擇使用設(shè)計(jì)工具Express Blend來(lái)完成，當(dāng)然了，在學(xué)習(xí)的時(shí)候，最好還是動(dòng)手寫(xiě)一下。
  1. <phone:PhoneApplicationPage.Resources>   
  2.     <ControlTemplate x:Key="Template1" TargetType="ButtonBase">   
  3.         <Grid>   
  4.             <!--狀態(tài)組-->   
  5.             <VisualStateManager.VisualStateGroups>   
  6.                 <VisualStateGroup x:Name="CommonStates">   
  7.                     <VisualState x:Name="Normal"/>   
  8.                     <VisualState x:Name="MouseOver"/>   
  9.                     <VisualState x:Name="Pressed">   
  10.                         <Storyboard>   
  11.                             <DoubleAnimation   
  12.                                 Storyboard.TargetName="pressed"   
  13.                                 Storyboard.TargetProperty="Opacity"   
  14.                                 To="1" Duration="0:0:0.5"/>   
  15.                         </Storyboard>   
  16.                     </VisualState>   
  17.                     <VisualState x:Name="Disabled">   
  18.                         <Storyboard>   
  19.                             <DoubleAnimation   
  20.                                 Storyboard.TargetName="disable"   
  21.                                 Storyboard.TargetProperty="Opacity"   
  22.                                 To="0.5" Duration="0:0:0.5"/>   
  23.                         </Storyboard>   
  24.                     </VisualState>   
  25.                 </VisualStateGroup>   
  26.                 <VisualStateGroup x:Name="FocusStates">   
  27.                     <VisualState x:Name="Focused">   
  28.                         <Storyboard>   
  29.                             <DoubleAnimation   
  30.                                 Storyboard.TargetName="focussbd"   
  31.                                 Storyboard.TargetProperty="Opacity"   
  32.                                 To="0.88"/>   
  33.                         </Storyboard>   
  34.                     </VisualState>   
  35.                 </VisualStateGroup>   
  36.             </VisualStateManager.VisualStateGroups>   
  37.             <Border BorderBrush="{TemplateBinding BorderBrush}"   
  38.                     BorderThickness="{TemplateBinding BorderThickness}">   
  39.                 <Grid x:Name="background" Background="{TemplateBinding Background}">   
  40.                     <Rectangle x:Name="pressed" Opacity="0" RadiusX="2" RadiusY="2">   
  41.                         <Rectangle.Fill>   
  42.                             <LinearGradientBrush   
  43.                                 StartPoint=".5,0"   
  44.                                 EndPoint=".5,1">   
  45.                                 <GradientStop Color="SkyBlue" Offset=".1"/>   
  46.                                 <GradientStop Color="Blue" Offset=".9"/>   
  47.                             </LinearGradientBrush>   
  48.                         </Rectangle.Fill>   
  49.                     </Rectangle>   
  50.                     <ContentPresenter x:Name="ContentPresenter"   
  51.                                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"   
  52.                                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"   
  53.                                       Margin="{TemplateBinding Padding}"   
  54.                                       Content="{TemplateBinding Content}"   
  55.                                       ContentTemplate="{TemplateBinding ContentTemplate}"/>   
  56.                     <Rectangle x:Name="disable" Opacity="0" Fill="Gray" RadiusX="2" RadiusY="2"/>   
  57.                     <Border x:Name="focussbd" BorderBrush="LightGreen" BorderThickness="2" CornerRadius="2" Opacity="0"/>   
  58.                 </Grid>   
  59.             </Border>   
  60.         </Grid>   
  61.     </ControlTemplate>   
  62. </phone:PhoneApplicationPage.Resources>   
  63.     <Grid x:Name="ContentPanel"  Margin="12,0,12,0">   
  64.         <Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="135,155,0,0" Name="button1" VerticalAlignment="Top" Width="160" Template="{StaticResource Template1}" />   
  65.     </Grid>   

控件模板有時(shí)候很難一兩句話講清楚，別看它好像很多東西，其實(shí)很簡(jiǎn)單，它無(wú)非包括兩個(gè)東西——狀態(tài)和UI元素，至于怎么個(gè)布局法，完全取決于你希望怎么設(shè)計(jì)了。

如果你說(shuō)有什么辦法可以幫助學(xué)習(xí)和研究控件模板，當(dāng)然有的，前面說(shuō)了，就是Express Blend這是一個(gè)很好用的設(shè)計(jì)工具，你把它當(dāng)作圖形處理軟件也可以，它會(huì)根你的設(shè)計(jì)自動(dòng)生成XAML，很好用。
Windows Phone SDK帶的這個(gè)工具是免費(fèi)的，你在開(kāi)發(fā)的過(guò)程中千萬(wàn)不要小氣哦，大膽地去用吧，不用錢(qián)又這么強(qiáng)大的東東，你不能浪費(fèi)。
責(zé)任編輯：閆佳明 來(lái)源： oschina
Windows Phone開(kāi)發(fā)Windows Phone樣式和控件模板
相關(guān)推薦

2013-04-17 13:27:04

Windows PhoWindows Pho

2013-04-17 11:00:17

Windows PhoWindows Pho

2013-04-17 11:10:02

Windows PhoWindows Pho

2010-06-11 16:01:26

Windows Pho

2010-08-10 13:21:41

Windows PhoWindows Pho

2012-02-02 16:37:51

Silverlight常用控件

2012-08-09 13:39:22

Windows Pho

2012-08-13 09:56:45

Windows Pho

2012-06-06 13:48:34

Windows Pho

2010-12-01 13:40:13

樞軸控件Windows Pho

2010-12-01 13:55:29

地圖插件Windows Pho

2013-04-12 11:02:50

WWindowsPho

2013-04-19 10:14:24

2013-04-17 09:47:10

Windows PhoWindows Pho

2010-08-12 10:09:57

Windows PhoPanoramaPivot

2013-07-30 12:37:56

Windows PhoWindows Pho

2010-04-21 17:07:54

Windows Pho

2010-12-01 09:50:21

全景視圖Windows Pho

2013-04-17 16:58:32

Windows PhoMediaElemen

2011-06-07 12:42:15

Windows Pho
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)