本篇的的主要內容
****本篇的代碼爲添加的代碼,不是完整的,直接在現成的文件中添加即可,均通過測試。
****歡迎問題反饋和交流 : [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