[WPF] 여러 Control 간의 속성 값 바인딩 property binding 하기

WPF UI 작업 시, xaml 화면에 추가되는 Control 끼리의 속성값을 바인딩할 때가 있다.

(Control - DataModel 의 바인딩이 아니라, Contol - Control 간의 UI Property 값 바라보는 경우)

 

다른 Control의 Property 값을 Binding 하는 방법
 : 여러개의 버튼을 두고 버튼들끼리 속성값 연결하기

 

간단 예제를 위해 모든 버튼에 일괄적으로 동일한 스타일을 주고 시작했다.

        <Style TargetType="{x:Type Button}">
            <Setter Property="Height" Value="30" />
            <Setter Property="Width" Value="100" />
            <Setter Property="FontSize" Value="13" />
            <Setter Property="Margin" Value="5" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border CornerRadius="10" Background="LightGray">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

 

이제 기본 버튼은 아래와 같은 형태로 만들어 진다.

<Button Content="버튼" />

---

버튼의 글씨 색깔을 지정하고, 그 컬러 값(Color 코드) 을 버튼 텍스트로 나타내는 예제
: Red 빨간색으로 글씨색을 지정하고, System.Drawing.Color 에서 정의하는 Red색에 해당하는 HexCode 를 Text로 보여줌.

 

▶ 자기 자신의 다른 속성값으로 바인딩 하는 방법

<!-- content 텍스트에 foreground 값(= HexColor code) 나타내기 -->
<Button Content="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=Self}}" Foreground="Red" />

 

▶ 상위 부모 Control 속성값으로 바인딩 하는 방법

 

1. 가장 가까운 부모 선택하는 법

<StackPanel Background="Red" >
    <StackPanel Background="Green" Margin="10">
        <!--StackPanel 2개로 감싸져 있는 버튼-->
        <Button Content="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=Self}}"
                Foreground="{Binding Path=Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}}" />
    </StackPanel>
</StackPanel>

StackPanel 2개로 감싸져 있는 버튼의 경우, 상위 부모 StackPanel 의 배경색으로 글씨를 표현했더니 초록색 글씨로 나옴.

즉, {RelativeSource Mode=FindAncestor, AncestorType={...}}  은 가장 가까운 부모를 선택한다. (x:Name 없는경우)

 

 

2. 더 멀리있는 다른 Control의 속성을 가져오는법

<StackPanel x:Name="RedPanel" Background="Red" >
    <StackPanel x:Name="GreenPanel"  Background="Green" Margin="10">
        <!--StackPanel 2개로 감싸져 있는 버튼-->
        <Button Content="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=Self}}"
                Foreground="{Binding Path=Background, ElementName=RedPanel}" />
    </StackPanel>
</StackPanel>

 

x:Name 으로 지정하면 해당 이름의 Control 속성에 직접 접근할 수 있다.

 

 

출처 : https://chashtag.tistory.com/38