【WPF】データバインディングの基本

投稿者: | 2011年8月10日

WPFでは、データバインディングを用いることでxamlだけで図形のプロパティを変えたりすることが出来る。以下は、データバインディングの例である。

MainWindow.xaml

<Window x:Class="WpfBindingLesson.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="240" Width="240">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="24" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="60" />
        </Grid.ColumnDefinitions>
        <Canvas
            Grid.Row="0"
            Grid.ColumnSpan="2">
            <!-- 図形 -->
            <Polygon
                Points="60,0 120,120 0,120">
                <Polygon.Fill>
                    <SolidColorBrush Color="Red" />
                </Polygon.Fill>
                <Polygon.RenderTransform>
                    <RotateTransform
                        CenterX="60"
                        CenterY="90"
                        Angle="{Binding ElementName=slider1, Path=Value}" />
                </Polygon.RenderTransform>
            </Polygon>
        </Canvas>
        <Slider 
            Grid.Row="1"
            Name="slider1"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Top" Maximum="359" />
        <Label
            Grid.Row="1"
            Grid.Column="1"
            Content="{Binding ElementName=slider1, Path=Value}"
            Name="label1"
            HorizontalAlignment="Left"
            VerticalAlignment="Stretch" />
    </Grid>
</Window>

このxamlを実行すると以下のように表示される。

スライダーを動かすと、図形が回転すると同時に右にスライダーの値が表示される。
ここまでで、xaml以外のコードは一切書いていないのだが、バインディングを使うことで、ある値の発生源からの変化を直接別のプロパティに反映させることが出来る。
それをしているのが28行目と40行目にある

{Binding ElementName=slider1, Path=Value}

という記述である。
28行目では、図形の回転角度のデータ元をスライダーの値に設定している。
また40行目では、ラベルのテキストのデータ元をスライダーの値に設定している。
バインディングの様子を図示すると以下のようになる。

WPFのプログラミングは、コントロールの~Changedイベントハンドラを実装する、というやり方ではなく、可能な限りデータバインディングを使っていくことになるだろう。

カテゴリー: C# WPF

【WPF】データバインディングの基本」への1件のフィードバック

  1. ピンバック: 【WPF】データバインディングの基本 その(2) – ザワプロ!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です