ビュー ～ユーザーインターフェース～
ビューはその名の通り、ユーザーインターフェースそのものです。Silverlightでは、XAMLで表現されたページのUIを指します。リスト1にビュー側のXAMLコードを示します。
<UserControl x:Class="MVVMSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:vm="clr-namespace:MVVMSample"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<!-- 1.ビューモデルのインスタンス化 -->
<UserControl.Resources>
<vm:MainPageViewModel x:Key="vm" />
</UserControl.Resources>
<StackPanel x:Name="LayoutRoot" DataContext="{StaticResource vm}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="検索する書籍Idを入力してください。" />
<!-- 2.データバインディング -->
<TextBox Text="{Binding SearchId, Mode=TwoWay}" Width="60"/>
<!-- 3.コマンドバインディング -->
<Button Content="検索" Command="{Binding 検索Command}" CommandParameter="{Binding}" />
</StackPanel>
<Grid>
<!-- Gridの行と列の定義は省略 -->
<TextBlock Text="タイトル" Grid.Column="0" Grid.Row="0" />
<TextBox Grid.Column="1" Grid.Row="0" Text="{Binding タイトル, Mode=TwoWay}"/>
<TextBlock Text="登録日" Grid.Column="0" Grid.Row="1" />
<sdk:DatePicker Grid.Column="1" Grid.Row="1" SelectedDate="{Binding 登録日, Mode=TwoWay}"/>
<TextBlock Text="ISBN" Grid.Column="0" Grid.Row="2" />
<TextBox Grid.Column="1" Grid.Row="2" Text="{Binding ISBN, Mode=TwoWay}" />
</Grid>
<StackPanel Orientation="Horizontal">
<Button Content="更新" Command="{Binding 更新Command}" CommandParameter="{Binding}"/>
<Button Content="削除" Command="{Binding 削除Command}" CommandParameter="{Binding}"/>
<Button Content="キャンセル" Command="{Binding キャンセルCommand}" CommandParameter="{Binding}"/>
</StackPanel>
</StackPanel>
</UserControl>
ビューでは、次に紹介するビューモデルを自身のDataContextプロパティにバインドすることで、ビューモデルのデータを自身のページに表示し、ビューで発生したボタンクリックなどのイベントをビューモデル側で処理しています。
ビュー側で注意すべき箇所は下記の3点です。
- ビューモデルのインスタンス化
- データバインディング
- コマンドバインディング
1. ビューモデルのインスタンス化
リスト1内のコメント1では、後述するビューモデル（ここではMainPageViewModel）のインスタンスを作成し、StaticResourceとして登録しています。ここで登録したStaticResourceはLayoutRootのDataContextにバインドされることで、ビューとビューモデルがバインドされています。
2. データバインディング
検索のためのSearchIdやタイトル、ISBN、登録日といった画面のプロパティは、ビュー側の値の変更をビューモデル側に通知し、ビューモデル側の変更もビュー側に通知してもらう必要があります。そのため、バインディングモードをTwoWayにして{Binding}構文を利用してバインディングしています（SilverlightではOneWayがデフォルト値になっているので、{Binding タイトル}と書いただけではCLRプロパティ側にUIでの変更が通知されません。双方向で値を同期したい場合は、バインディングモードをTwoWayにするのを忘れないようにしましょう）。
3. コマンドバインディング
検索や更新、削除、キャンセルといったボタンでは、CommandプロパティとCommandParameterプロパティを、ビューモデルに定義したコマンドとコマンドバインディングしています。コマンドバインディングを利用することで、ビューモデル側に定義した任意のコマンドをXAML側から直接実行できるようになります。
