【細說windows8開發——UI篇】控件風格化--讓你的控件更漂亮

本篇的的主要內容


****本篇的代碼爲添加的代碼,不是完整的,直接在現成的文件中添加即可,均通過測試。

****歡迎問題反饋和交流  : [email protected]


  • 風格設置基礎
  • 顯式或隱式來使用風格
  • BasesOn的使用:我要用父親的屬性
  • 使用控件模版:打造個性的控件


風格設置基礎

通常我們爲一個控件設置完屬性後就可以通用到很多控件上去,比如我們現在就是爲3個button改變 BorderBrush, BorderThickness Foreground屬性,呈如下效果

我們可以在外部專門定義一個xaml文件,來描述控件的樣式,外部的xaml文件可以被很多文件引用合併(被稱爲資源字典)有點類似於外部css文件,同樣我們也可以把樣式定義在文件內,這樣只能在當前文件中使用。假如某個資源屬性在app.xaml和當前文件中用同樣的監製(key),那麼在當前文件中的樣式將會覆蓋app.xaml中的。


在Style定義中,我們需要一個TargetType屬性和一組Setter屬性,TargetType屬性是一個指定某種控件類型的字符串,控件只能繼承自FrameworkElement類,每一個Setter屬性都需要一個Property屬性和一個Value屬性,顧名思義哈,我就不多說了,下面舉個例子大家看看就成

<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="BorderThickness" Value="5" />
        <Setter Property="Foreground" Value="Blue" />
        <Setter Property="BorderBrush" >
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Red" Offset="0.25" />
                    <GradientStop Color="Blue" Offset="0.75" />
                    <GradientStop Color="LimeGreen" Offset="1.0" />
                </LinearGradientBrush>
            </Setter.Value>
            </Setter>
        </Style>
</Page.Resources>

我們注意在第三個Setter中,value並不是作爲一個屬性被賦值的,而是作爲一個標籤<Setter.Value>,這跟前兩個其實是一個意思,只不過這個需要一點複雜的效果,所以才用這種方式。大家可以理解一下這個意思。

上述代碼的效果如下:



顯式或隱式來使用風格

1、對於隱式風格,只用TargetType來修飾Style

2、對於顯式風格,我們還要加上x:Key屬性來確切的定位,其實意思就是加了一個名字。


沒有加key的控件講應用到所有的TargetType中去,但是加key的就需要顯示引用這個風格了,見下面這個例子。

<Page.Resources>
    <Style x:Key="PurpleStyle" TargetType="Button">
        <Setter Property="FontFamily" Value="Lucida Sans Unicode" />
        <Setter Property="FontStyle" Value="Italic" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Foreground" Value="MediumOrchid" />
    </Style>

    <Style TargetType="Button">
        <Setter Property="FontFamily" Value="Lucida Sans Unicode" />
        <Setter Property="FontStyle" Value="Italic" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="25" />
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Orange" />
    </Style>
</Page.Resources>
<Grid x:Name="LayoutRoot">
    <Button Content="Button" Height="23" Width="75" Style="{StaticResource PurpleStyle}" />
    <Button Content="Button" Height="23" Width="75" />
</Grid>

效果如下:

看,第一個是紫色的,因爲第一個button我們使用了

Style="{StaticResource PurpleStyle}"
明確的指出我們要用叫做  PurpleStyle這個屬性,而第二個就是沒媽的兒子一樣,只要是Button的屬性他就拿來用。


BasesOn的使用:我要用父親的屬性

看下面這個例子

<Page.Resources>
    <Style x:Key="BasicStyle" TargetType="ContentControl">
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="30" />
    </Style>
    <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Orange" />
    </Style>
    <Style x:Key="CheckBoxStyle" TargetType="CheckBox" BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Green" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Green" />
    </Style>
</Page.Resources>

<Grid Background="White">
    <Button Content="Button" Style="{StaticResource ButtonStyle}"/>
    <CheckBox Content="CheckBox"  Style="{StaticResource CheckBoxStyle}"/>
</Grid>

效果如下:



很厲害吧,我們定義了一個ContentControl的一個風格,而Button和CheckBox是繼承自這個控件的,所以可以利用BasedOn屬性來把這個風格給拿過來,拿過來的同時再做修改,當然屬性是覆蓋父類風格的。

微軟爲我們提供了 StandardStyles.xaml 這樣一個文件,在Common文件夾裏邊,我們可以引用它,關於它的使用我在後邊會說。這裏邊定義了很多win8風格的控件屬性,我們可以利用BasedOn屬性來繼承再做修改,效果很好的~!


使用控件模版:打造個性的控件

這部分大家可以參考MSDN上的一個教程,說的特別詳細,我就不在這裏贅述,當然效果也是非常好的,可以先運行下實例

運行此示例

教程:

http://msdn.microsoft.com/zh-cn/library/cc903963%28v=vs.95%29.aspx


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章