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

作者：junwong 2013-04-17 14:19:51

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

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

<phone:PhoneApplicationPage.Resources>   
    <!--不帶key的樣式，應(yīng)用于所有TextBlock元素-->   
    <Style TargetType="TextBlock">   
        <Setter Property="FontSize" Value="40"/>   
        <Setter Property="Foreground" Value="Yellow"/>   
    </Style>    
    <!--帶key的樣式，只有引用該資源的元素才應(yīng)用-->   
    <Style x:Key="MyTextBoxStyle" TargetType="TextBox">   
        <Setter Property="FontSize" Value="40"/>   
        <Setter Property="Foreground" Value="Blue"/>   
        <Setter Property="InputScope">   
            <Setter.Value>   
                <InputScope>   
                    <InputScopeName NameValue="Number"/>   
                </InputScope>   
            </Setter.Value>   
        </Setter>   
    </Style>   
</phone:PhoneApplicationPage.Resources>   
    <Grid x:Name="LayoutRoot" Background="Transparent">   
    <Grid.RowDefinitions>   
        <RowDefinition Height="Auto"/>   
        <RowDefinition Height="*"/>   
    </Grid.RowDefinitions>   
   
        <TextBlock Grid.Row="0" x:Name="PageTitle" Text="樣式示例" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>   
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,10,12,0">   
        <Grid.RowDefinitions>   
            <RowDefinition Height="auto"/>   
            <RowDefinition Height="auto"/>   
            <RowDefinition Height="auto"/>   
            <RowDefinition Height="auto"/>   
            <RowDefinition Height="auto"/>   
        </Grid.RowDefinitions>   
        <Grid.ColumnDefinitions>   
            <ColumnDefinition Width="2*"/>   
            <ColumnDefinition Width="3*"/>   
        </Grid.ColumnDefinitions>   
        <TextBlock Grid.Column="0" Grid.Row="0" Text="文本一："/>   
        <TextBlock Grid.Column="0" Grid.Row="1" Text="文本二："/>   
        <TextBlock Grid.Column="0" Grid.Row="2" Text="文本三："/>   
        <TextBlock Grid.Column="0" Grid.Row="3" Text="文本四："/>   
        <TextBlock Grid.Column="0" Grid.Row="4" Text="文本五："/>   
        <TextBox Grid.Column="1" Grid.Row="0" Style="{StaticResource MyTextBoxStyle}" />   
        <TextBox Grid.Column="1" Grid.Row="1" Style="{StaticResource MyTextBoxStyle}" />   
        <TextBox Grid.Column="1" Grid.Row="2" Style="{StaticResource MyTextBoxStyle}" />   
        <TextBox Grid.Column="1" Grid.Row="3"/>   
        <TextBox Grid.Column="1" Grid.Row="4"/>   
    </Grid>   
</Grid>

樣式在資源中有兩種聲明方式，一種是帶鍵值，一種是不帶鍵值的。
1、帶key的樣式，不會(huì)自動(dòng)應(yīng)用到元素/控件上，除非元素的Style屬性引用了該資源的鍵；
2、不帶鍵的樣式資源，將自動(dòng)應(yīng)用于當(dāng)前頁(yè)面（如果資源聲明在當(dāng)前頁(yè)）中的所有同類型的元素。

所以，在上例中，你會(huì)看到左邊的一列TextBlock，它們都沒有顯式設(shè)置Style屬性，但它們都一致引用了第一個(gè)樣式，因?yàn)樵摌邮绞遣粠фI的。
而右面的一列TextBox，由于后面兩個(gè)沒有顯式設(shè)置Style屬性，故它們保持默認(rèn)樣式。

控件模板并不常用，除非你對(duì)控件的外觀的行為特效有較高的要求，因?yàn)槲覀儾荒馨芽氐耐庥^弄得太花了，這樣反而降低用戶體驗(yàn)，簡(jiǎn)潔明了的東西其實(shí)是讓人看的最舒服的。
要自定義控件模板，首先要了解一下狀態(tài)。
如果你以前做過WPF開發(fā)你會(huì)知道，在.NET 3.5的時(shí)候，自定義控件模板，針對(duì)控件狀態(tài)的改變所做出的應(yīng)對(duì)策略是通過觸發(fā)器來完成的，但到了.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è)好理解了，比如我們要組裝一輛汽車，需要哪些部件，輪胎放哪個(gè)位置，車門怎么放置等。對(duì)于復(fù)雜的控件，有可以有 N個(gè)控件或UI元素組成，由于WPF是把UI和代碼邏輯完全分開的，但有些時(shí)候我們也希望與UI元素進(jìn)行交互，如某UI元素是否透明，是否被移動(dòng)了，或者模板中的按鈕可能要觸發(fā)其單擊事件等，為了方便后臺(tái)代碼能夠找到這些部件，所以在控件開發(fā)的時(shí)候會(huì)為這些特定部件統(tǒng)一命名。

那么，怎么知道一個(gè)控件的模板中有哪些狀態(tài)，有哪些特定的部件呢？從控件類的定義所附加的Attribute特性來獲取，如，Button控件的狀態(tài)和部個(gè)有：

// 摘要:   
//     表示按鈕控件。   
[TemplateVisualState(Name = "Unfocused", GroupName = "FocusStates")]   
[TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")]   
[TemplateVisualState(Name = "Focused", GroupName = "FocusStates")]   
[TemplateVisualState(Name = "Pressed", GroupName = "CommonStates")]   
[TemplateVisualState(Name = "Normal", GroupName = "CommonStates")]   
[TemplateVisualState(Name = "MouseOver", GroupName = "CommonStates")]   
public class Button : ButtonBase

Button控件是內(nèi)容控件，它并不復(fù)雜，所以沒有部件。

下面，我們就以Button為例為它自定義一個(gè)模板，注意，定義模板寫XAML比較花時(shí)間，你可以選擇使用設(shè)計(jì)工具Express Blend來完成，當(dāng)然了，在學(xué)習(xí)的時(shí)候，最好還是動(dòng)手寫一下。

<phone:PhoneApplicationPage.Resources>   
    <ControlTemplate x:Key="Template1" TargetType="ButtonBase">   
        <Grid>   
            <!--狀態(tài)組-->   
            <VisualStateManager.VisualStateGroups>   
                <VisualStateGroup x:Name="CommonStates">   
                    <VisualState x:Name="Normal"/>   
                    <VisualState x:Name="MouseOver"/>   
                    <VisualState x:Name="Pressed">   
                        <Storyboard>   
                            <DoubleAnimation   
                                Storyboard.TargetName="pressed"   
                                Storyboard.TargetProperty="Opacity"   
                                To="1" Duration="0:0:0.5"/>   
                        </Storyboard>   
                    </VisualState>   
                    <VisualState x:Name="Disabled">   
                        <Storyboard>   
                            <DoubleAnimation   
                                Storyboard.TargetName="disable"   
                                Storyboard.TargetProperty="Opacity"   
                                To="0.5" Duration="0:0:0.5"/>   
                        </Storyboard>   
                    </VisualState>   
                </VisualStateGroup>   
                <VisualStateGroup x:Name="FocusStates">   
                    <VisualState x:Name="Focused">   
                        <Storyboard>   
                            <DoubleAnimation   
                                Storyboard.TargetName="focussbd"   
                                Storyboard.TargetProperty="Opacity"   
                                To="0.88"/>   
                        </Storyboard>   
                    </VisualState>   
                </VisualStateGroup>   
            </VisualStateManager.VisualStateGroups>   
            <Border BorderBrush="{TemplateBinding BorderBrush}"   
                    BorderThickness="{TemplateBinding BorderThickness}">   
                <Grid x:Name="background" Background="{TemplateBinding Background}">   
                    <Rectangle x:Name="pressed" Opacity="0" RadiusX="2" RadiusY="2">   
                        <Rectangle.Fill>   
                            <LinearGradientBrush   
                                StartPoint=".5,0"   
                                EndPoint=".5,1">   
                                <GradientStop Color="SkyBlue" Offset=".1"/>   
                                <GradientStop Color="Blue" Offset=".9"/>   
                            </LinearGradientBrush>   
                        </Rectangle.Fill>   
                    </Rectangle>   
                    <ContentPresenter x:Name="ContentPresenter"   
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"   
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"   
                                      Margin="{TemplateBinding Padding}"   
                                      Content="{TemplateBinding Content}"   
                                      ContentTemplate="{TemplateBinding ContentTemplate}"/>   
                    <Rectangle x:Name="disable" Opacity="0" Fill="Gray" RadiusX="2" RadiusY="2"/>   
                    <Border x:Name="focussbd" BorderBrush="LightGreen" BorderThickness="2" CornerRadius="2" Opacity="0"/>   
                </Grid>   
            </Border>   
        </Grid>   
    </ControlTemplate>   
</phone:PhoneApplicationPage.Resources>   
    <Grid x:Name="ContentPanel"  Margin="12,0,12,0">   
        <Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="135,155,0,0" Name="button1" VerticalAlignment="Top" Width="160" Template="{StaticResource Template1}" />   
    </Grid>

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

如果你說有什么辦法可以幫助學(xué)習(xí)和研究控件模板，當(dāng)然有的，前面說了，就是Express Blend這是一個(gè)很好用的設(shè)計(jì)工具，你把它當(dāng)作圖形處理軟件也可以，它會(huì)根你的設(shè)計(jì)自動(dòng)生成XAML，很好用。

Windows Phone SDK帶的這個(gè)工具是免費(fèi)的，你在開發(fā)的過程中千萬不要小氣哦，大膽地去用吧，不用錢又這么強(qiáng)大的東東，你不能浪費(fèi)。

責(zé)任編輯：閆佳明來源： oschina

Windows Phone開發(fā)Windows Phone樣式和控件模板