連載：次世代技術につながるSilverlight入門 再利用性とUIのカスタマイズ 岩永 信之 2012/10/02
Page1 Page2 Page3 Page4

■コントロールの作成

　Silverlightの場合、UIカスタマイズに関してはスタイルとテンプレートを利用するのが簡単で、この用途でコントロールを自作することはほぼない。従って、今回のテーマからは少し外れることになるが、一応、コントロールの自作についても簡単に触れておこう。

　コントロールの作成方法にはユーザー・コントロールとカスタム・コントロールの2種類がある。

●ユーザー・コントロール

　Silverlightの場合は、アプリ起動時に最初に表示されるページ（＝Visual Studioのプロジェクト・テンプレートどおりに作った場合は、MainPage.xamlファイル）自体、ユーザー・コントロールである。このMainPage.xamlファイルの内容を見てのとおり、XAMLコードとC#／VBコードの対になっていて、視覚的なデザインはXAMLコードで行う（Visual StudioやBlendなどのツールの支援を受けられる）。

　ユーザー・コントロールの主な用途は、関連するいくつかのコントロールをグループ化することである。

　住所入力フォームがいい例だろう。郵便番号、都道府県、市区町村、番地、建物名などを入力するためのテキストボックスやラベルなどをグループ化して使う。少々簡素な実装になるが、XAMLコードの例をList 16に示す。

<UserControl x:Class="CustomizationSample.Views.AddressControl"   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">     <Grid>     <Grid.RowDefinitions>       <RowDefinition Height="auto"/>       <RowDefinitionHeight="auto"/>       <RowDefinitionHeight="auto"/>       <RowDefinitionHeight="auto"/>     </Grid.RowDefinitions>     <Grid.ColumnDefinitions>       <ColumnDefinition Width="auto"/>       <ColumnDefinitionWidth="*"/>     </Grid.ColumnDefinitions>     <TextBlock Text="郵便番号" />     <TextBox Grid.Column="1" />     <TextBlockText="都道府県" Grid.Row="1" />     <TextBoxGrid.Column="1" Grid.Row="1" />     <TextBlockText="市区町村 番地" Grid.Row="2" />     <TextBoxGrid.Column="1" Grid.Row="2" />     <TextBlockText="建物名" Grid.Row="3" />     <TextBoxGrid.Column="1" Grid.Row="3" />   </Grid> </UserControl>

List 16： 住所入力用のユーザー・コントロールの例

この例では簡単化のため、見栄えのみで、入力した値をロジック側から得る手段を提供していない。その実装には、次回以降で説明するデータ・バインディングの仕組みを使うことになる。

　利用側は、例えば、List 17のようになる。

<navigation:Page x:Class="CustomizationSample.Views.UserControlUsageSample"   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"   xmlns:local="clr-namespace:CustomizationSample.Views">   <StackPanel>     <TextBlock Text="発注者住所" />     <local:AddressControl />     <TextBlock Text="送り先住所" />     <local:AddressControl />   </StackPanel> </navigation:Page>

List 17： List 16のユーザー・コントロールの利用例

●カスタム・コントロール

　ユーザー・コントロールは、スタイルやテンプレートを使って利用側でカスタマイズして使うような場面には向いていない。そのため、前述のような「関連したコントロールのグループ化」以上の用途ではあまり使い勝手がよくない。

　既存コントロールにない機能を持った新しいコントロールを作りたい場合には、ControlクラスやContentControlクラス（いずれもSystem.Windows.Controls名前空間）を継承したクラスを作成することになる（＝カスタム・コントロール）。ユーザー・コントロールの場合とは異なり、Visual StudioやBlendなどのツールの支援は受けられず、実装が少々大変である。

　具体的な作成方法については、以下のMSDNマガジンの記事を参照してほしい。

• Silverlight 2 のカスタム コントロールを作成する

　Silverlight 2のころの記事ではあるものの、カスタム・コントロールの作り方自体は変わっていない。

■

　次回はデータ・バインディングの仕組みについて説明する。

INDEX
	[連載] 次世代技術につながるSilverlight入門
	再利用性とUIのカスタマイズ
	1．リソース
	2．スタイル
	3．テンプレート
	4．コントロールの作成

「連載：次世代技術につながるSilverlight入門」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）