STEP 1 Silverlight 2シリーズ(9):コントロールテンプレートを使用します.

23015 ワード

著作権声明:オリジナル作品は、転載を許可します.転載する時は必ずハイパーリンクで文章を表記してください.
元の出所、作者の情報と本声明.さもなくば法律責任を追及します.
http://terrylee.blog.51cto.com/342737/67243
概要
Silverlight 2 Beta 1のバージョンが発表されました.RuntimeからもToolsからも多くの驚きをもたらしてくれました.フレームワーク言語Visual Baic、Visual C炜、IronRuby、Irpyton、JSON、Web Service、WCF及びSocketsへのサポートなど、一連の新しい特性があります.「一歩ずつSilverlight 2シリーズを勉強します」という文章はSilverlight 2の開発に迅速に進みます.
この文章はシリーズ第9編で、コントロールテンプレートを使ったカスタマイズコントロールの印象を紹介します.Silverlightは、ユーザーがコントロールの外観を完全にカスタマイズすることができる極めて強力な機能を提供しています.
コントロールの内容をカスタマイズ
Silverlightにおいて、WatermarkdTextBoxコントロールはユーザーの入力にヒント情報を提供することができます.簡単な文字情報だけでは、時には単調になりがちです.対応する画像説明の効果を加えると、下図のような簡単なユーザー登録画面があります.

このように、インターフェースはより生き生きしているように見えます.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>

多くのコントロールにはContententやText属性があります.私たちは自分の想像力を十分に発揮してカスタマイズできます.カスタマイズ後のコントロールは相変わらず元の機能行動を持っています.上の例のように、ユーザー名コントロールを入力してフォーカスを得ると、文字と画像は全部消えます.

コントロールテンプレートのカスタマイズコントロールを使う
前の例では、内容だけでなくコントロールの内容をカスタマイズしました.次の例ではグラデーション色の四角形ボタンをカスタマイズします.まず、アプリ.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 Control Property」の識別拡張シンタックスを使用して、コントロールの属性に結び付けて実現できます.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>

運転時の効果は以下の通りです.

結尾語
ここでは、コントロールの内容をカスタマイズしたり、コントロールテンプレートを通してコントロールをカスタマイズしたりする方法を簡単に紹介します.
ここでは本明細書の例示的なコードをダウンロードします.
この記事は「TerryLee技術コラム」のブログから出ていますので、ぜひこのソースを残してください.http://terrylee.blog.51cto.com/342737/67243
51 CTO.COM技術ブログから.
転載先:https://www.cnblogs.com/hdjjun/archive/2008/12/24/1361499.html

アングラートラスト