動作確認環境: Silverlight 4、Visual Studio 2010、Microsoft Silverlight 4 Tools for Visual Studio 2010、Windows 7

本コンテンツは書籍「Silverlight 大全」と連動したサンプル コードです

Silverlight を使用したアプリケーションで、日付を選択するユーザー インターフェイスに作成する場合は Calendar コントロールまたは DatePicker コントロールを使用します。

Calendar コントロールは、画面に最初からカレンダーを表示し、その中の日付を選択するコントロールです。DatePicker コントロールは、最初は日付のみが表示されていて、日付を選択するときのみカレンダーが表示されます。

ここでは、XAML を使用した実装方法を紹介します。Visual Studio を使用した場合は、ツール ボックスにあるコントロールをドラッグ アンド ドロップすることにより、コントロールを使用できます。XAML のコード中に記述されている各プロパティは、Visual Studio のプロパティ ウィンドウからも変更できます。

以下の XAML のコードは、Calendar コントロールと DatePicker コントロールを Grid パネルの中で使用した例です。

XAML
スクリプトの編集|{#scriptcode_dlg.remove_script}
<Grid x:Name="LayoutRoot" Background="White"    <sdk:Calendar Height="169" HorizontalAlignment="Left" Margin="30,20,0,0" Name="calendar1" VerticalAlignment="Top" Width="230" /> 
    <sdk:DatePicker Height="23" HorizontalAlignment="Left" Margin="30,220,0,0" Name="datePicker1" VerticalAlignment="Top" Width="120" /> 
</Grid>

Visual Studio の XAML デザイナー上でみると、このようになっています。上に貼り付けているコントロールが Calendar コントロール、下に貼り付けているコントロールが DatePicker コントロールです。

図 1

各コントロールのプロパティの説明です。

Height:
コントロールの見た目の高さです。
HorizontalAlignment:
パネル内のコントロールの水平方向の位置を、Left、Center、Right、Stretch で表します。ここでは Left が指定されているので、コントロールはパネル内で左寄せされて表示されます。ただし、Margin プロパティが設定されていたときは、その値の分のマージンが設定されます。
Margin:
4 つのパラメーターは、順に左側、上側、右側、下側のマージンを示します。マージンとは、その親となるパネルまたはグリッドの縁からの距離です。主に Grid パネルに貼り付けているときに使用します。
Name:
コントロールの名前です。Visual Basic や C# のコードから呼び出すときに、ここで設定した名前を使用します。
VerticalAlignment:
パネル内のコントロールの垂直方向の位置を、Top、Center、Bottom、Stretch で表します。ここでは Top が指定されているので、コントロールはパネル内で上寄せされて表示されます。ただし、Margin プロパティが設定されていたときは、その値の分のマージンが設定されます。
Width:
コントロールの見た目の幅です。

選択している値を取得するには、以下のプロパティを使用します。

SelectedDate:
選択している日付が入ります。

Calendar コントロールの場合は下記のプロパティを設定することにより、見た目を変えたり、複数の日付を選択できるようになります。

[Calendar コントロールのみで使用できるプロパティ]

DisplayMode:
カレンダーの表示形式を変えます。Year に変更すると年単位、Decade に変更すると 10 年単位のカレンダーとして表示されます。
SelectionMode :
デフォルトでは SingleDate に設定されており、1 つの日付のみ選択できます。SingleRange に変更すると、複数の連続した日付を選択できます。MultipleRange に変更すると、複数の日付を選択できます。
SelectedDates :
SelectionMode を SingleRange または MultipleRange に変更したときに、選択している日付がコレクションとして代入されます。

これら以外にも、下記のプロパティを設定することにより、見た目を変更できます。ここでは、よく使用されるプロパティを紹介します。

Background:
背景色です。グラデーションをかけたり、イメージを指定することで画像を背景として設定することもできます。
BorderBrush:
枠の色です。
BorderThickness:
枠の線の幅です。
FirstDayOfWeek:
カレンダーの左端の曜日です。デフォルトは、日曜日が左端に表示されます。月曜日が左端になるように表示するには、Monday に変更します。
FontFamily:
表示するときに使用するフォント名です。
FontSize:
フォントの大きさです。
FontStyle:
このプロパティを Italic に変更すると、斜体で表示されます。
Foreground:
曜日部分の文字の色です。DatePicker コントロールの場合は、選択された日付の色もこのプロパティで指定します。
IsTodayHighlighted:
今日の日付を目立たせるかどうかを指定します。
Visibility:
表示と非表示を切り替えることができます。Visible を指定すると表示し、Collapsed を指定すると表示しなくなります。

値が変更されると、Calendar コントロールの場合は SelectedDatesChaged イベントが発生します。DatePicker コントロールの場合は、SelectedDateChanged イベントが発生します。Visual Studio の XAML デザイナー上で、貼り付けているコントロールをダブルクリックすると、それぞれのイベントに対応したイベント ハンドラーが生成されます。

以下のコードは、Calendar コントロールと DatePicker コントロールの値が変更されたときに呼ばれるイベント ハンドラーで、その値を取得する例です。この例では、Calendar コントロールと DatePicker コントロールのほかに、TextBlock コントロールを 3 つ貼り付けていて、選択した日付を表示させています。

Visual Basic
スクリプトの編集|{#scriptcode_dlg.remove_script}
' Calender コントロールの日付が選択させたときのイベント ハンドラー 
Private Sub Calendar1_SelectedDatesChanged(ByVal sender As System.ObjectByVal e As System.Windows.Controls.SelectionChangedEventArgsHandles Calendar1.SelectedDatesChanged 
    Dim str As String = "" 
 
    ' 選択した日付が複数の場合はデータがコレクションとして代入されるため、 
    ' For Each 文を使用してデータをひとつずつ取り出す 
    For Each dt As DateTime In Calendar1.SelectedDates 
        '日付を "年/月/日" という形式で表示させる 
        str += dt.ToString("yyyy/MM/dd") 
    Next 
 
    ' 選択した日付を羅列して表示 
    TextBlock1.Text = str 
 
    ' 最後に選択した日付を表示 
    TextBlock2.Text = Calendar1.SelectedDate.ToString() 
End Sub 
 
' DatePicker コントロールの日付が選択させたときのイベント ハンドラー 
Private Sub DatePicker1_SelectedDateChanged(ByVal sender As System.ObjectByVal e As System.Windows.Controls.SelectionChangedEventArgsHandles DatePicker1.SelectedDateChanged 
    ' 選択した日付を、短い形式で表示 
    TextBlock3.Text = DatePicker1.SelectedDate.Value.ToShortDateString() 
End Sub
 
C#
スクリプトの編集|{#scriptcode_dlg.remove_script}
// Calender コントロールの日付が選択させたときのイベント ハンドラー 
private void calendar1_SelectedDatesChanged(object sender, SelectionChangedEventArgs e) 
{ 
    string str = ""; 
 
    // 選択した日付が複数の場合はデータがコレクションとして代入されるため、 
    // foreach 文を使用してデータをひとつずつ取り出す 
    foreach (DateTime dt in calendar1.SelectedDates) 
    { 
        // 日付を "年/月/日" という形式で表示させる 
        str += dt.ToString("yyyy/MM/dd "); 
    } 
 
    // 選択した日付を羅列して表示 
    textBlock1.Text = str; 
 
    // 最後に選択した日付を表示 
    textBlock2.Text = calendar1.SelectedDate.ToString(); 
 
} 
 
// DatePicker コントロールの日付が選択させたときのイベント ハンドラー 
private void datePicker1_SelectedDateChanged(object sender, SelectionChangedEventArgs e) 
{ 
    // 選択した日付を、短い形式で表示 
    textBlock3.Text = datePicker1.SelectedDate.Value.ToShortDateString(); 
}
 

Code Recipe Code Recipe

ページのトップへ