[Silverlight][バインディング] クラスのインスタンスをバインドする2　～複数のDataContextを使用する～

Silverlight

2014.10.092014.10.11

ああ前回は MainPageのDataContextにクラスのインスタンスをバインドしました。

MainPageのDataContextにバインドをすると、データソースは1つしか使用することができません。
今回は、複数のデータソースをバインドする方法について見ていきます。

まずは Visual Studioを起動して、Silverlightアプリケーションプロジェクトを作成します。
次に、MainPageを以下のようにデザインします。

上記の XAMLコード例を以下に示します。

<Grid x:Name="LayoutRoot" Background="White">
    
    <Grid HorizontalAlignment="Left" Height="59" Margin="10,10,0,0" VerticalAlignment="Top" Width="225" Background="#FFE6F015">
        <TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="身長" VerticalAlignment="Top"/>
        <TextBlock HorizontalAlignment="Left" Margin="67,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top"
                   Text="{Binding Height}"/>
        <TextBlock HorizontalAlignment="Left" Margin="10,31,0,0" TextWrapping="Wrap" Text="体重" VerticalAlignment="Top"/>
        <TextBlock HorizontalAlignment="Left" Margin="67,31,0,0" TextWrapping="Wrap" VerticalAlignment="Top"
                   Text="{Binding Weight}"/>
    </Grid>
    <Grid HorizontalAlignment="Left" Height="33" Margin="10,90,0,0" VerticalAlignment="Top" Width="225" Background="#FFE6F015">
        <TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="性別" VerticalAlignment="Top"/>
        <TextBlock HorizontalAlignment="Left" Margin="67,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top"
                   Text="{Binding gender}"/>
    </Grid>
    
</Grid>

今回は上記 MainPageに配置した2つのGridに DataContextを設定します。
DataContextに設定するクラス、HealthとGenderを最初に作成します。

Health.vb

Public Class Health
    Public Property Height As Double
    Public Property Weight As Double
End Class

Health.cs

public class Health
{
    public double Height { get; set; }
    public double Weight { get; set; }
}

Gender.vb

Public Class Gender
    Public Property gender As String
End Class

Gender.cs

public class Gender
{
    public string gender { get; set; }
}

次に、2つのGrid（gridHeath と gridGender）のDataContextを設定します。
これにより、同じMainPage内でも複数のデータソースを取り扱うことが可能となります。

MainPage.xaml.vb の例

Partial Public Class MainPage
    Inherits UserControl

    Public Sub New()
        InitializeComponent()

        Me.gridHealth.DataContext = New Health() With {
            .Height = 162.5,
            .Weight = 60.5
            }

        Me.gridGender.DataContext = New Gender() With {
            .Gender = "男"
            }
    End Sub

End Class

MainPage.xaml.cs の例

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        this.gridHealth.DataContext = new Health
        {
            Height = 162.5,
            Weight = 60.5
        };

        this.gridGender.DataContext = new Gender
        {
            gender = "男"
        };
    }
}

以上を入力したら、実行して確認しましょう。
2つのデータソースの値がそれぞれ表示されることが確認できます。