|
|
概述
Silverlight 2 Beta 1版本發(fā)布了，無(wú)論從Runtime還是Tools都給我們帶來(lái)了很多的驚喜，如支持框架語(yǔ)言Visual Basic, Visual C#, IronRuby, IronPython，對(duì)JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學(xué)Silverlight 2系列》文章帶您快速進(jìn)入Silverlight 2開(kāi)發(fā)。
本文為系列文章第九篇，主要介紹如何使用控件模板定制控件的觀感。Silverlight提供了極其強(qiáng)大的功能，允許用戶完全定制控件的外觀。
定制控件內(nèi)容
在Silverlight中，WatermarkedTextBox控件可以為用戶的輸入提供一段提示信息，如果只是簡(jiǎn)單的一點(diǎn)文字信息，有時(shí)候未免顯得單調(diào)，如果加上相應(yīng)的圖片說(shuō)明效果會(huì)更好，如下圖所示的一個(gè)簡(jiǎn)單的用戶登錄界面：
這樣看起來(lái)界面顯的就生動(dòng)多了，XAML聲明如下：
<Canvas Background="#46461F"> <WatermarkedTextBox x:Name="UserName" Canvas.Top="30" Canvas.Left="50" Width="320" Height="48"> <WatermarkedTextBox.Watermark> <StackPanel Width="320" Height="48" Orientation="Horizontal"> <Image Source="admin.png" HorizontalAlignment="Left"></Image> <TextBlock Text="請(qǐng)輸入用戶名" VerticalAlignment="Center" Foreground="#999999"/> </StackPanel> </WatermarkedTextBox.Watermark> </WatermarkedTextBox> <WatermarkedTextBox x:Name="Password" Canvas.Top="110" Canvas.Left="50" Width="320" Height="48" HorizontalAlignment="Left"> <WatermarkedTextBox.Watermark> <StackPanel Width="320" Height="48" Orientation="Horizontal"> <Image Source="lock.png" HorizontalAlignment="Left"></Image> <TextBlock Text="請(qǐng)輸入密碼" VerticalAlignment="Center" Foreground="#999999"/> </StackPanel> </WatermarkedTextBox.Watermark> </WatermarkedTextBox> <Button Canvas.Top="180" Canvas.Left="100" Width="120" Height="48"> <Button.Content> <StackPanel Orientation="Horizontal"> <Image Source="apply.png" HorizontalAlignment="Left"></Image> <TextBlock Text="登 錄" VerticalAlignment="Center" Margin="10 0 0 0"></TextBlock> </StackPanel> </Button.Content> </Button></Canvas>
很多控件都有Content或者Text屬性，我們完全可以充分發(fā)揮自己的想象力去進(jìn)行定制，定制后控件仍然具有原來(lái)的功能行為，如上面的示例，當(dāng)輸入用戶名控件獲得焦點(diǎn)時(shí)文字和圖片都將消失：
使用控件模板定制控件
前面的示例中我們只是定制了控件的內(nèi)容，Silverlight允許我們完全對(duì)控件進(jìn)行定制，而不僅僅是內(nèi)容。下面的示例中我們定制一個(gè)漸變色的圓角矩形按鈕。首先我們?cè)贏pp.xaml中創(chuàng)建一個(gè)RoundButton樣式，改寫(xiě)按鈕的Template屬性：
<Style x:Key="RoundButton" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid x:Name="RootElement"> <Rectangle Width="200" Height="80" RadiusX="15" RadiusY="15"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0"> <GradientStop Color="#FFFFFF" Offset="0.0" /> <GradientStop Color="#EC04FA" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> <Rectangle.Stroke> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FCB2FD" Offset="0" /> <GradientStop Color="#FFFFFF" Offset="1" /> </LinearGradientBrush> </Rectangle.Stroke> </Rectangle> <TextBlock Text="提 交" FontSize="26" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </ControlTemplate> </Setter.Value> </Setter></Style>
其中的漸變等內(nèi)容在Graphics相關(guān)內(nèi)容里將會(huì)寫(xiě)到。現(xiàn)在在XAML中使用該樣式：
<Canvas Background="#46461F"> <Button x:Name="button1" Style="{StaticResource RoundButton}" Canvas.Top="80" Canvas.Left="150"/></Canvas>
運(yùn)行后就可以看到下面的效果：
創(chuàng)建模板
上面的示例中，控件的文字以及控件的大小都是固定的，我們希望在開(kāi)發(fā)人員使用中再設(shè)定，可以在控件模板中通過(guò)使用 {TemplateBinding ControlProperty} 的標(biāo)識(shí)擴(kuò)展句法來(lái)綁定到控件的屬性來(lái)實(shí)現(xiàn)，使用ContentPresenter控件可以靈活的設(shè)置各個(gè)屬性。修改RoundButton樣式如下所示：
<Style x:Key="RoundButton" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid x:Name="RootElement"> <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" RadiusX="15" RadiusY="15"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0"> <GradientStop Color="#FFFFFF" Offset="0.0" /> <GradientStop Color="#EC04FA" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> <Rectangle.Stroke> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#EC04FA" Offset="0" /> <GradientStop Color="#FFFFFF" Offset="1" /> </LinearGradientBrush> </Rectangle.Stroke> </Rectangle> <ContentPresenter Content="{TemplateBinding Content}" FontSize="{TemplateBinding FontSize}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Foreground="{TemplateBinding Foreground}"> </ContentPresenter> </Grid> </ControlTemplate> </Setter.Value> </Setter></Style>
這樣在使用RoundButton時(shí)我們可以設(shè)定控件的文本及控件的大小：
<Canvas Background="#46461F"> <Button x:Name="button1" Style="{StaticResource RoundButton}" Canvas.Top="80" Canvas.Left="50" Content="提 交" FontSize="26" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="White" Width="200" Height="60"/> <Button x:Name="button2" Style="{StaticResource RoundButton}" Canvas.Top="80" Canvas.Left="260" Content="取 消" FontSize="26" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="White" Width="100" Height="100"/></Canvas>
結(jié)束語(yǔ)
本文簡(jiǎn)單的介紹了如何定制控件的內(nèi)容以及通過(guò)控件模板完全定制控件，你可以從這里下載本文示例代碼。
NET技術(shù)：一步一步學(xué)Silverlight ：使用控件模板，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
