2013年07月21日

WPFサンプル:RelativeSourceでターゲットの位置を基準にしてソースを指定する

   このエントリーをはてなブックマークに追加 Clip to Evernote
RelativeSourceマークアップ拡張を使うと、バインディング ターゲットの位置を基準にしてソースを指定することができます。

まずは一つ目のサンプル

RelativeSourceSample1 RelativeSourceSample2

これは、RelativeSource を使い、Rectangleの縦横の長さを常に同じにしている例です。
Sliderの値によって、Rectangleは、サイズが変わりますが、その時、

Height="{Binding RelativeSource={RelativeSource Self},Path=Width}"

とすることで、自分自身のWidthとバインドしています。

<Window x:Class="RelativeSourceSample.MainWindow"
        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"
        Title="MainWindow" Height="200" Width="200" >
    <Grid Background="White">
        <Slider Height="23" HorizontalAlignment="Stretch" x:Name="slider1"
                VerticalAlignment="Top" Maximum="100" Margin="10" Value="20"/>
        <Rectangle HorizontalAlignment="Stretch" x:Name="rectangle1"
             Stroke="Black" Fill="#FFD5C0B9"
             Width="{Binding Value, ElementName=slider1}"    
             Height="{Binding RelativeSource={RelativeSource Self},Path=Width}" />
    </Grid>
</Window>

もう一つのサンプル
まずは、スクリーンショットとXAMLを示します。

RelativeSourceSample3

<Window x:Class="RelativeSourceSample.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Grid Background="White">
        <Border BorderBrush="#FFB9BCFB" BorderThickness="3" HorizontalAlignment="Left" 
                Height="120" Margin="41,30,0,0" VerticalAlignment="Top" Width="190">
            <Border.Background>
                <LinearGradientBrush EndPoint="0,0.5" MappingMode="RelativeToBoundingBox" 
                                     StartPoint="1,0.5">
                    <GradientStop Color="#FF49497A" Offset="1"/>
                    <GradientStop Color="#FFC2DEFF"/>
                </LinearGradientBrush>
            </Border.Background>
            <StackPanel Orientation="Horizontal" Margin="10">
                <Rectangle Width="30" Height="40" 
                   Fill="{Binding RelativeSource={RelativeSource FindAncestor, 
                                      AncestorType={x:Type Border},                                          
                                      AncestorLevel=1},
                                      Path=BorderBrush}" />
                <TextBlock Text="Hello!" VerticalAlignment="Center" FontSize="24" Width="120"
                           TextAlignment="Center"
                   Foreground="{Binding RelativeSource={RelativeSource FindAncestor, 
                                            AncestorType={x:Type Border},
                                            AncestorLevel=1},
                                            Path=Background}" 
                   Background="{Binding RelativeSource={RelativeSource FindAncestor, 
                                             AncestorType={x:Type Grid},
                                             AncestorLevel=1},
                                            Path=Background}" />
            </StackPanel>
        </Border>
    </Grid>
</Window>


このサンプルでは、RelativeSource を3か所で利用しています。
■1つ目
Hello!という文字列の左横にRectangleが表示されていますが、このFillプロパティをRelativeSource を使い、親要素の BorderのBorderBrush と同じになるようにしています。
その指定部分を以下に示します。

    Fill="{Binding RelativeSource={RelativeSource FindAncestor,
                   AncestorType={x:Type Border},                                       
                   AncestorLevel=1},
                   Path=BorderBrush}" />

FindAncestorは、親の要素を検索するモードです。型およびでレベル(オプション)を指定します。
AncestorTypeは、検索する親要素の型を指定します。
AncestorLevelには、検索する親のレベルを設定します。バインディング ターゲット要素に一番近いレベルを示すには、1 を使用します。つまり、1の場合は、親を辿っていき一番最初に見つかった要素を適用するということです。

■2つ目
Hello!文字列(TextBlock)の文字の色(Forground)を親要素のBorderのBackgroundと同一になるようにしています。

■3つ目
Hello!文字列(TextBlock)の背景色(Background)を親要素のGridのBackgroundと同一になるようにしています。


WPFサンプル・目次


 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52328636