[WPF] Element Binding

WPF - Element Binding

UI 요소 (Textbox, Slider, Label)끼리 서로의 속성으로 직접 바인딩하는 것.

ElementName 속성을 사용해 대상 요소를 명시한다.

* slider1의 value가 바뀔때마다 TextBlock의 Text가 자동으로 갱신되는 예시

<Slider x:Name="slider1" Minimum="0" Maximum="100" />
<TextBlock Text="{Binding ElementName=slider1, Path=Value}" />

속성	설명
ElementName	바인딩 대상이 되는 요소의 x:Name
Path	바인딩할 속성명
Mode	OneWay, TwoWay 등 (기본은 OneWay)
UpdateSourceTrigger	Source가 갱신되는 시점

* 바인딩 모드 예시

OneWay (default)

<TextBlock Text="{Binding ElementName=slider1, Path=Value}" />
// slider1 → TextBlock 방향으로만 업데이트됨.

TwoWay

<TextBox Text="{Binding ElementName=slider1, Path=Value, Mode=TwoWay}" />
TextBox에서 값을 바꾸면 slider1.Value도 바뀜 (주의: 타입 호환 필요)

UpdateSourceTrigger (문자 입력 즉시 반영)

옵션	설명	사용 대상
Default	속성의 기본 동작을 따름 (DependencyProperty마다 다름)	일반적으로 사용
PropertyChanged	값이 변경될 때마다 즉시 소스에 업데이트	실시간 반영 UI
LostFocus	컨트롤이 포커스를 잃을 때 업데이트 (기본값 for TextBox)	일반적인 사용자 입력
Explicit	명시적으로 BindingExpression.UpdateSource() 호출 시에만 업데이트	완전 수동 제어

<TextBox Text="{Binding ElementName=slider1, Path=Value, Mode=TwoWay
	, UpdateSourceTrigger=PropertyChanged}" />

컨버터 사용 (Value 변환)

두 요소의 값이 단순히 전달되기보다는 변형이 필요할 경우 작성해서 사용한다.

ex) double > string 포맷팅

// cs
public class ValueToPercentageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return $"{(double)value:0.0}%";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return double.Parse(value.ToString().Replace("%", ""));
    }
}

//xaml
<Window.Resources>
    <local:ValueToPercentageConverter x:Key="PercentConverter" />
</Window.Resources>
<TextBlock Text="{Binding ElementName=slider1, Path=Value
	, Converter={StaticResource PercentConverter}}" />

Element binding vs DataContext binding

구분	Element Binding	일반 Data Binding
대상	다른 UI 요소	데이터 객체 (ViewModel)
사용	ElementName	DataContext, Source
용도	컨트롤 간 동기화	MVVM 패턴 중심 데이터 바인딩

 

바인딩의 소스 정하기 (어디에서 데이터를 가져올 것인가?)

1. Source : 명시적으로 객체 지정

 

• 특정 객체를 명확히 지정할 때 사용
• ElementName이나 DataContext 없이 독립적으로 동작

personObj라는 리소스 객체에서 Name 속성을 바인딩

 

<Window.Resources>
    <local:Person x:Key="personObj" Name="홍길동" Age="30" />
</Window.Resources>
<TextBlock Text="{Binding Source={StaticResource personObj}, Path=Name}" />

2. DataContext - 기본 바인딩 소스

 

• 바인딩에서 가장 많이 쓰이는 방식
• 상위 요소에서 한 번 설정하면 하위 요소들이 해당 context를 자동으로 참조
• MVVM에서 ViewModel을 연결하는 방식

Name, Age는 DataContext의 속성으로 자동 연결됨

//cs
public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

//xaml
<Window.DataContext>
    <local:Person Name="이순신" Age="45" />
</Window.DataContext>
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Age}" />

3. RelativeSource - 요소의 관계를 기준으로 설정

 

• 현재 요소 또는 부모 요소를 기준으로 바인딩
• 템플릿, 스타일 등에서 자주 사용됨

 

(1) self 바인딩 (나 자신에 바인딩)

<Button Content="{Binding RelativeSource={RelativeSource Self}, Path=Width}" />

(2) 조상 요소 바인딩 (FindAncestor)

<StackPanel>
    <GroupBox Header="User Info">
        <StackPanel>
            <TextBox Text="{Binding Path=Header, RelativeSource={RelativeSource AncestorType=GroupBox}}" />
        </StackPanel>
    </GroupBox>
</StackPanel>

(3) TemplatedParent

- 템플릿 안에서 바인딩 시에 템플릿의 주체로 바인딩

- TemplatedParent는 템플릿이 적용되는 원래 컨트롤(Button)의 속성을 참조

 

<ControlTemplate TargetType="Button">
    <Border Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}">
        <ContentPresenter />
    </Border>
</ControlTemplate>

항목	Source	RelativeSource	DataContext
대상 지정	명시적 객체	관계 기반 요소	상위 요소에서 설정된 컨텍스트
주 용도	리소스 객체, 코드 객체 바인딩	템플릿, 스타일 내부 바인딩	MVVM, 일반적인 뷰 바인딩
자동 상속	X	X	O
자주 쓰이는 곳	리소스, 특정 오브젝트	스타일, ControlTemplate	일반적인 ViewModel 바인딩