免费一级毛片,欧美成人一区二区三区,亚洲免费人成在线视频观看

概述

Silverlight 2 Beta 1版本發布了，無論從Runtime還是Tools都給我們帶來了很多的驚喜，如支持框架語言Visual Basic, Visual C#, IronRuby, IronPython，對JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學Silverlight 2系列》文章帶您快速進入Silverlight 2開發。

本文為系列文章第九篇，主要介紹如何使用控件模板定制控件的觀感。Silverlight提供了極其強大的功能，允許用戶完全定制控件的外觀。

定制控件內容

在Silverlight中，WatermarkedTextBox控件可以為用戶的輸入提供一段提示信息，如果只是簡單的一點文字信息，有時候未免顯得單調，如果加上相應的圖片說明效果會更好，如下圖所示的一個簡單的用戶登錄界面：

這樣看起來界面顯的就生動多了，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="請輸入用戶名" 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="請輸入密碼" 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屬性，我們完全可以充分發揮自己的想象力去進行定制，定制后控件仍然具有原來的功能行為，如上面的示例，當輸入用戶名控件獲得焦點時文字和圖片都將消失：

使用控件模板定制控件

前面的示例中我們只是定制了控件的內容，Silverlight允許我們完全對控件進行定制，而不僅僅是內容。下面的示例中我們定制一個漸變色的圓角矩形按鈕。首先我們在App.xaml中創建一個RoundButton樣式，改寫按鈕的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>

其中的漸變等內容在Graphics相關內容里將會寫到。現在在XAML中使用該樣式：

<Canvas Background="#46461F">    <Button x:Name="button1" Style="{StaticResource RoundButton}"            Canvas.Top="80" Canvas.Left="150"/></Canvas>

運行后就可以看到下面的效果：

創建模板

上面的示例中，控件的文字以及控件的大小都是固定的，我們希望在開發人員使用中再設定，可以在控件模板中通過使用 {TemplateBinding ControlProperty} 的標識擴展句法來綁定到控件的屬性來實現，使用ContentPresenter控件可以靈活的設置各個屬性。修改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時我們可以設定控件的文本及控件的大小：

<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>