在實(shí)際開(kāi)發(fā)應(yīng)用中，Silverlight默認(rèn)控件樣式并不能滿足我們所有的需求，特別是對(duì)華麗界面的構(gòu)造，需要對(duì)現(xiàn)有控件進(jìn)行皮膚重寫(xiě)。WPF/Silverlight中使用xaml描述界面，類(lèi)似Css，它們同樣有Style和Template。目前微軟開(kāi)源工具包中集成的均是復(fù)雜類(lèi)型控件，如何修改它們的樣式確實(shí)難倒了不少朋友，那么本節(jié)以分析為主，結(jié)合對(duì)常用的NumericUpDown控件向大家講解如何對(duì)現(xiàn)有控件進(jìn)行樣式重寫(xiě)。

　　首先打開(kāi)工具包中的示例項(xiàng)目：

　　接著找到NumericUpDownSample.xaml這個(gè)示例頁(yè)面并打開(kāi)：

　　為什么要這樣做？要重寫(xiě)某個(gè)控件首先必須要知道它是如何構(gòu)造的，當(dāng)然如果您有深厚的功力，您完全可以看著源碼從基類(lèi)開(kāi)始一層層寫(xiě)下來(lái)，不過(guò)這絕對(duì)是一件吃力不討好的事情，因?yàn)镸S已經(jīng)給我們提供了非常詳細(xì)的Sample：

　　每種控件都有提供了很多樣式供我們參考，如果你相中了其中某個(gè)，直接可以從NumericUpDownSample.xaml中拷貝出全部相關(guān)內(nèi)容即可，但如果還是不滿意呢？例如我想將加減值按鈕換成可以懸停變換的圖片又該如何處理？

　　這時(shí)我們需要做的是抽取其中任意一個(gè)被重寫(xiě)過(guò)樣式的NumericUpDown及其所牽連的所有代碼，例如上圖中紅色圈中的那個(gè)，找到它的主體代碼如下：

　　<inputToolkit:NumericUpDown Grid.Row="1"Grid.Column="0" Style="{StaticResource ButtonSpinnerHorizontalStyle}" Margin="5" Height="90" FontSize="50"/>

　　很顯然，它的樣式加載的是靜態(tài)資源中的ButtonSpinnerHorizontalStyle，那么接下來(lái)我們查找該靜態(tài)資源并去掉其中的vsm:VisualStateManager和Border等無(wú)關(guān)緊要的內(nèi)容，剩下控件的主要樣式如下：

<Style x:Key="ButtonSpinnerHorizontalStyle" TargetType="inputToolkit:NumericUpDown">

……

<Setter Property="Template">

<Setter.Value>

&lt;ControlTemplate TargetType=&quot;inputToolkit:NumericUpDown">

<Grid>

……

<inputToolkit:ButtonSpinner x:Name="Spinner" …… Template="{StaticResource ButtonSpinnerHorizontalTemplate}"&gt;

<TextBox BorderThickness="0" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" MinWidth="20" x:Name="Text" AcceptsReturn="False" Text="{TemplateBinding Value}" TextAlignment="Right" TextWrapping="NoWrap"/>

</inputToolkit:ButtonSpinner>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

　　原來(lái)NumericUpDown是由一個(gè)包含TextBox的ButtonSpinner構(gòu)成，而B(niǎo)uttonSpinner加載的樣式模板為ButtonSpinnerHorizontalTemplate，接下來(lái)我們?cè)俅握业紹uttonSpinnerHorizontalTemplate，同樣的把不必要的部分去掉，關(guān)鍵代碼如下：

<ControlTemplate x:Key="ButtonSpinnerHorizontalTemplate" TargetType="inputToolkit:ButtonSpinner">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="20"/>

<ColumnDefinition Width="20"/>

</Grid.ColumnDefinitions>

……

<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" Grid.Column="0"/>

<RepeatButton IsTabStop=&quot;False" Template="{StaticResource IncreaseButtonTemplate}" x:Name="IncreaseButton" ClickMode="Press" Grid.Column="1"/>

<RepeatButton IsTabStop="False" Template="{StaticResource DecreaseButtonTemplate}" x:Name="DecreaseButton" ClickMode="Press" Grid.Column="2"/>

</Grid>

</ControlTemplate>

　　它的構(gòu)造由3部分組成：用于輸入數(shù)字的內(nèi)容區(qū)域ContentPresenter，以及加值按鈕IncreaseButton和減值按鈕DecreaseButton。至此，NumericUpDown控件的具體結(jié)構(gòu)才浮出水面。再下來(lái)我們還是按照上面的規(guī)律忽略無(wú)關(guān)緊要的代碼，不理會(huì)TemplateBinding而是直接找到StaticResource對(duì)應(yīng)的Template，以IncreaseButtonTemplate為例，它的關(guān)鍵代碼如下：

<ControlTemplate x:Key="IncreaseButtonTemplate" TargetType="RepeatButton">

<Grid x:Name="Root">

<Rectangle x:Name="Background" ……>

<Rectangle.Fill>

……

</Rectangle.Fill>

</Rectangle>

</Grid>

</ControlTemplate>

　　現(xiàn)在清楚了吧，原來(lái)NumericUpDown控件的加減按鈕的原形是RepeatButton，而RepeatButton的原形則是Rectangle，那么我們只需修改Rectangle.Fill的內(nèi)容，即可改變NumericUpDown加減按鈕的樣式，這里我使用兩張圖片作為鼠標(biāo)進(jìn)入和離開(kāi)Rectangle時(shí)的Fill填充對(duì)象，那么修改后的代碼如下：

<ControlTemplate x:Key="IncreaseButtonTemplate" TargetType=";RepeatButton">

<Grid x:Name="Root">

<Rectangle x:Name="Background&quot; Width="16" Height="16" MouseEnter="Background_MouseEnter" MouseLeave="Background_MouseLeave">

<Rectangle.Fill>

<ImageBrush ImageSource="Images/0.png" />

</Rectangle.Fill>

</Rectangle>

</Grid>

</ControlTemplate>

//加載圖片

private BitmapSource GetImage(string imageName) {

return new BitmapImage(new Uri(string.Format(@&quot;/Silverlight;component/Images/{0}", imageName), UriKind.Relative));

}

private void Background_MouseEnter(object sender, MouseEventArgs e) {

Rectangle rect = sender as Rectangle;

rect.Fill = new ImageBrush() { ImageSource = GetImage("2.png") };

}

private void Background_MouseLeave(object sender, MouseEventArgs e) {

Rectangle rect = sender as Rectangle;

rect.Fill = new ImageBrush() { ImageSource = GetImage("0.png") };

}