Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Silverlight 2で大きく変わったコントロール

Silverlight 2で作成する業務アプリケーション入門 (2)

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/12/26 11:00
目次

サンプル2:会議室予約

 続いて作成するのは、会議室を予約するWebアプリケーションをSilverlightで構築するサンプルです。コントロールで各種データを入力するイメージをつかみましょう。サンプルではコントロールから入力内容を取得し、ダイアログに表示するところまでを扱います。

サンプル2の実行画面
サンプル2の実行画面

使用するコントロールについて概説

 サンプル2で使用する各コントロールについて概説します。

CalenderおよびDatePicker

 カレンダーを表示するコントロールです。Calenderコントロール単体で使用し、カレンダーだけを表示することもできます。DatePickerコントロールを利用すれば、日付選択時のドロップダウンメニューとしてカレンダーが利用できます。

CalenderおよびDatePickerコントロールの主なプロパティ
名前 概要
DisplayDateStart 表示する日付の開始日を指定
DisplayDateEnd 表示する日付の終了日を指定
IsTodayHighlighted 当日をハイライトするかどうかを指定
BlackoutDates ブラックアウトさせて選択できないようにする日付を指定
DisplayMode 一度に表示する期間を設定
SelectedDateFormat DatePickerで選択する日付のフォーマットを指定
RadioBotton

 ラジオボタンを表示するコントロールです。GroupNameプロパティを利用して複数のラジオボタンをグループ化できます。グループ化されたラジオボタンは排他的になり、複数のボタンを同時に選択できなくなります。ボタンの選択状態はIsCheckedプロパティで取得できます。

RadioButtonコントロールの主なプロパティ
名前 概要
GroupName ラジオボタンをグループ化するための文字列を設定
IsChecked 選択状態の取得・設定
Content 選択肢のテキストを設定
Checked チェック時のイベントハンドラを設定
UnChecked チェック解除時のイベントハンドラを設定
ComboBoxおよびComboBoxItem

 コンボボックスを表示するコントロールです。ComboBox以下にComboBoxItemを利用し静的なオプションを配置することができます。またデータバインドにより動的なオプションを取り込むこともできます。データバインドについては次回の連載で扱います。

ComboBoxコントロールの主なプロパティ
名前 概要
SelectionChanged 選択変更時のイベントハンドラを設定
IsSelected 選択状態の取得・設定
ItemsSource データバインドするアイテムのソースを指定
CheckBox

 チェックボックスを表示するコントロールです。基本的には選択および解除の2状態ですが、プロパティ設定で選択、解除に加えて中間ステートも含めた3状態(スリーステート)で利用することもできます。

CheckBoxコントロールの主なプロパティ
名前 概要
Content 選択肢のテキストを設定
IsThreeState 中間ステートをサポートするかどうかの設定
Checked チェック時のイベントハンドラを設定
Indeterminate 中間状態設定時のイベントハンドラを設定
UnChecked チェック解除時のイベントハンドラを設定

サンプルの実装

 サンプル2はサンプル1に追記する形で構成します。Main.xamlはサンプル1では遷移完了のテキストを表示するのみの役割でしたが、サンプル2で会議室予約画面として再構成しましょう。Main.xamlをExpression Blend 2で開き編集します。

 まず、もともとのテキストオブジェクトを消去しましょう。[オブジェクトとタイムライン]でTextBlockを選択の上、右クリックから削除できます。

 続いてルーラー上で区切り線をドラッグしてGridレイアウトを変更します。タイトル配置用に上段Gridを狭めに定義し、下段には入力コントロール用の適度な領域を確保します。

 データの入力にはDatePicker、RadioButton、ComboBox、CheckBox、Buttonの各コントロールを配置しました。サンプル1と同様の方法でドロップしスタイルを整えます。TextBoxも3つ配置します。ComboBox内のアイテムは、[オブジェクトとタイムライン]での右クリックから[ComboBoxItemの追加]で挿入します。

Expression Blend 2でMain.xamlを編集
Expression Blend 2でMain.xamlを編集

 今回、ComboBoxはデフォルトでは表示させず、チェックボックスをチェックした場合にイベントハンドラで表示させるようにします。他の入力コントロールにはイベントハンドラを設定せず、Buttonクリック時にまとめてデータ取得および出力を実行します。

 RadioButtonのレイアウトではオプションの配置にStackPanelコントロールを使いました。StackPanelに配置したいオブジェクトを複数選択し、右クリックから[グループ化]-[StackPanel]を選択して利用します。

 各コントロールに設定した主なプロパティおよびイベントハンドラについて、以下の表に示します。

Main.xamlに配置したコントロールと主なプロパティ
コントロール 名前
DatePicker 名前(x:Name) dtp
IsTodayHighlighted true(チェックを入れる)
RadioButton 名前(x:Name) am,pm,all
Content (コントロールに表示するテキスト)
GroupName radio
ischecked true(デフォルト選択のamのみチェックを入れる)
ComboBox 名前(x:Name) combo
Visibility Collapsed(非表示)
ComboBoxItem 名前(x:Name) m_1,m_2,m_3
Content (コントロールに表示するテキスト)
IsSelected true(デフォルト選択のm_1のみチェックを入れる)
CheckBox 名前(x:Name) pr
Content 部屋を選択する
Checked(イベント) cb_Checked
UnChecked(イベント) cb_UnChecked
Button Content 決定
Click(イベント) Button_Click
TextBlock Text (コントロールに表示するテキスト)

 実際のXAMLは次のとおりです。

Main.xaml(会議室予約画面の定義)
<TextBlock Height="26" Grid.Row="0" Grid.Column="0" Margin="30,17,0,0" VerticalAlignment="Top" TextWrapping="Wrap" Foreground="#FF000000" Width="109" HorizontalAlignment="Left"><Run FontSize="14" Text="会議室予約画面"/></TextBlock>
<TextBlock Height="18" Margin="53,28,125,0" VerticalAlignment="Top" Text="希望する日付および時間帯を選択してください。" TextWrapping="Wrap" RenderTransformOrigin="0.392,0.667" Grid.Row="1"/>
<basics:DatePicker x:Name="dtp" Width="150" Height="30" Margin="96,57,154,0" d:LayoutOverrides="Width, Height" VerticalAlignment="Top" Grid.Row="1" IsEnabled="True" IsTodayHighlighted="True" IsDropDownOpen="False"/>
<StackPanel Height="67" Margin="96,95,172,0" VerticalAlignment="Top" Grid.Row="1">
    <RadioButton x:Name="am" GroupName="radio1" Content="午前(09:00-12:00)"  IsChecked="true" Height="17" Width="132" IsEnabled="True"/>
    <RadioButton x:Name="pm" GroupName="radio1" Content="午後(13:00-17:00)"  d:LayoutOverrides="Height" Width="132"/>
    <RadioButton x:Name="all" GroupName="radio1" Content="全日(09:00-17:00)"  Height="17" Width="132"/>
</StackPanel>
<TextBlock HorizontalAlignment="Left" Margin="61,185,0,0" VerticalAlignment="Top" Grid.Row="1" TextWrapping="Wrap" d:LayoutOverrides="Width, Height" Text="会議室の指定(指定しない場合は第一会議室が選択されます)"/>
<ComboBox x:Name="combo"  Height="21" Margin="0,217,58,0" VerticalAlignment="Top" Grid.Row="1" RenderTransformOrigin="1.62,0.476" Width="108" HorizontalAlignment="Right" Visibility="Collapsed">
    <ComboBoxItem x:Name="m_1" Content="第一会議室" IsSelected="True"/>
    <ComboBoxItem x:Name="m_2" Content="第二会議室"/>
    <ComboBoxItem x:Name="m_3" Content="第三会議室"/>
</ComboBox>
<CheckBox x:Name="pr" Content="部屋を選択する" Checked="cb_Checked" Unchecked="cb_Unchecked" Height="17" Margin="96,217,0,0" VerticalAlignment="Top" Grid.Row="1" Width="97" HorizontalAlignment="Left"/>
<Button Height="23" Margin="0,0,58,243" VerticalAlignment="Bottom" Grid.Row="1" Content="決定" Width="62" HorizontalAlignment="Right" Click="Button_Click"/>
</Grid>

 続いて分離コードファイルMain.xaml.csを編集し、チェックボックスのチェック時、チェック解除時、ボタンクリック時のイベントを記述します。

 cb_Checked/cb_Uncheckedメソッドでは、ComboBoxの表示/非表示を切り替えています。また、不可視時にはComboBoxの選択の初期化も行っています。これらはビハインドコードからXAMLのコントロールを操作する一例です。また、ButtonのClickイベントによりデータの取得および出力を行います。

Main.xaml.cs チェックボックスとボタンのイベントハンドラ
private void cb_Checked(object sender, RoutedEventArgs e)
{ //チェックボックスがチェックされた場合はコンボボックスを可視化
  combo.Visibility = Visibility.Visible;
}
private void cb_Unchecked(object sender, RoutedEventArgs e)
{ //チェックボックスがチェック解除された場合はコンボボックスを非表示
  combo.Visibility = Visibility.Collapsed;
  m_1.IsSelected = true; // 会議室の指定を初期化
}
private void Button_Click(object sender, RoutedEventArgs e)
{ //ボタンがクリックされた場合は入力内容を取得してダイアログ表示
  string date,time = "",room;
  if (am.IsChecked == true) //RadioButtonのbool値を取得し条件分岐
    { time = am.Content.ToString(); }
  if (pm.IsChecked == true)
    { time = pm.Content.ToString(); }
  if (all.IsChecked == true)
    { time = all.Content.ToString(); }
  room = ((ComboBoxItem)combo.SelectedItem).Content.ToString();// コンボボックスの選択値を取得
  date = dtp.SelectedDate.ToString(); //日付を変数に代入
  MessageBox.Show( "日付 : "+ date + "\n時間 : " + time + "\n" + room + "を予約しました");
}

 サンプルコードで値の受け渡しが発生したコントロール・プロパティについて、以下の表に示します。

Main.xaml.csで取得・設定したコントロール・プロパティ
メソッド プロパティ 概要
cb_Checked combo.Visibility Collapsed コンボボックスの表示・非表示の切替
cb_UnChecked combo.Visibility Visible 同上
m_1.IsSelected True コンボボックスのアイテムの選択状態を設定
Button_Click am.Checked   ラジオボタンのチェック状態を表すbool値を取得(pm、allも同様)
am.Content   ラジオボタンの表示文字列の内容を取得し文字列として変数に代入(pm、allも同様)
((ComboBoxItem)combo
.SelectedItem).Content
  コンボボックスの選択されたアイテムを取得し、表示文字列を取得
dtp.SelectedDate   DatePickerで選択された日付を取得

 サンプルでは、コントロール名の後に.(ピリオド)とプロパティ名を続けることで、コントロールのプロパティを直接読み書きしています。

 プロパティ名を引数に取るGetValue/SetValueメソッドを使うことで、各コントロールのプロパティを取得/設定することもできます。通常のプロパティについては、サンプルで示したように直接コントロールのプロパティを操作する方法で十分ですが、添付プロパティ(Canvas.LeftやGrid.Rowなど、親コントロールで定義されるものの、値は子で指定するプロパティ)については、GetValue/SetValueメソッドで取得/設定します。

 さらに、HtmlPage.Document.GetElementByIdメソッドなどを使用することで、Silverlight 2を呼び出したHTMLのDOM要素にアクセスすることもできます。ASP.NETでホスティングしている場合には、DOM経由で値の受け渡しを行うこともできます。

 では本サンプルを実行してみましょう。先ほどのサンプルを編集していますので、アカウント情報の入力など途中までは同じ動作です。遷移後の画面が会議室予約画面になっているでしょうか。各コントロールからデータを入力し、決定ボタンを押して、メッセージボックスが表示されれば成功です。

DatePickerで日付を選択している場面
DatePickerで日付を選択している場面
入力値検証

 残念ながらSilverlight 2は現在、入力値検証(バリデーション)の機能をサポートしていません。業務アプリでは多用される機能ですが、現段階では入力値検証用にコードを書いて対応するしかないようです。早い段階でのサポートが望まれます。

まとめ

 今回は、Silverlightのコントロールが業務アプリケーションでどのように扱えるかという観点から記事をお届けしました。あくまで基本的なコントロールの利用法でしたので、ASP.NET AJAXなど既存技術でも可能な実装との大きな差は意識できなかったかもしれません。

 とはいえ、コントロールを配置して値を取得、設定するといった範囲において、Windows FormsやWPFとあまり変わらない感覚で、しかもC#やVBなど、自分が慣れ親しんだ言語で実装できるというのは開発者にとってRIA開発の敷居を下げるものとなります。また、UIデザインにおいてExpression Blendの強力な編集機能のサポートを受けられる、というメリットも大きいでしょう。

 次回以降はいよいよSilverlight特有の機能であるアニメーションやデータバインディングを扱っていきます。次回をお楽しみに。

Silverlight Toolkit December 2008

 Silverlight Toolkitの最新リリースとしてSilverlight Toolkit December 2008が利用できるようになりました。CodePlexからダウンロードできます。

 Silverlight Toolkit December 2008にはいくつかのStable版(品質面において、より安定したバージョン)コントロールやPreview版(同じく品質面において、アルファ版的な位置づけのバージョン)コントロール、そして幾つかのテーマ(コントロールのスタイルのテンプレート)が追加されました。追加されたコントロールやテーマの詳細は、公式サイトのサンプルをご覧ください。

参考資料



  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト 土井 毅(ドイ ツヨシ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

バックナンバー

連載:Silverlight 2で作成する業務アプリケーション入門
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5