[C# WPF] 바인딩 #01 - 바인딩의 개념

 

1. 바인딩이란

• 두 개 이상의 객체 간 속성을 연결하여 한 객체의 속성이 변경되었을 때 바인딩 된 다른 객체의 속성 또한 변경되도록 하는 작업.
  예) chekBox 에 체크가 되었을 때에는 TextBox가 활성화 되도록 구현하는 경우 체크 여부를 설정하는 IsChecked 라는 속성과 TextBox의 IsEnabled 라는 속성을 바인딩 처리

◾ 바인딩이 없다면

• checkBox에 check 이벤트를 만들어 TextBox를 수동으로 활성화시켜주고 Unchecked 이벤트를 만들어 이벤트 발생시 TextBox 비활성화를 시켜줘야한다.
  또한, 프로그램 시작 시 이벤트가 발생하지 않기 때문에 반드시 초기 값을 생서자 부분에 추가해줘야한다.
  (XAML에서 checkBox 이벤트 추가해주고 추가된 이벤트 작업을 CS파일에서 해야 함)

◾ 바인딩 처리

• CS파일 작업 하지 않아도 됨
• 바인딩할 때에도 Name 속성 필수 사용

    <StackPanel Height="200" Width="200">
        <CheckBox Name="chbx" Content="Activate" Margin="5" />
                 <!-- 바인딩처리 -->
        <TextBox Name="txtb" Text="Test" Margin="5" 
                 IsEnabled="{Binding ElementName=chbx, Path=IsChecked}" />
    </StackPanel>

→ TextBox의 IsEnabled 속성이 CheckBox의 IsChecked 라는 속성에 따라 변경되는 것이 주이다.
이를 위해 TextBox의 IsEnabled 라는 속성에 바인딩을 걸었다.

Binding : 바인딩 동작을 알린다.
ElementName : 바인딩 해야 할 객체를 지정한다.
, : 속성이 변경됨을 알린다.
Path : 이후에 객체의 속성을 설정한다.

→ 바인딩은 CheckBox의 isCheked 에 걸어도 TextBox의 Isenabled에 걸어도 상관이 없다.

2. 바인딩의 방향성

• 데이터의 흐름이 Two-Way 일 때에는 어느 쪽에서 바인딩을 걸어도 상관이 없지만 One-Way인 경우 바인딩을 거는 위치에 따라 결과가 달라진다.
  → One-Way가 되면 바인딩 작업을 한 객체의 속성은 반대편 객체의 속성에 따라 변하지만, 반대편 객체의 속성은 바인딩 작업을 한 객체의 속성은 무시한다.

즉, One-Way일 때 바인딩 된 속성이 뭐가 되든 신경 안쓰기 때문에 CheckBox에서는 TextBox가 활성화 될 때에는 체크가 되지, 반대로 체크를 한다고 TextBox가 활성화 되지는 않는 것.

    <StackPanel Height="200" Width="200">
                 <!-- OIneWay 바인딩처리 -->
        <CheckBox Name="chbx" Content="Activate" Margin="5"
                  IsChecked="{Binding ElementName=chbx, Path=IsChecked, Mode=OneWay}"/>
        <TextBox Name="txtb" Text="Test" Margin="5"/>
    </StackPanel>

→ TextBox가 CheckBox가 체크되든 말든 자기 상태를 유지한다.
반대로 CS 파일 등에서 TextBox를 강제로 비활성화 시티면 CheckBox가 자동으로 체크 된다.

• Bool 타입의 데이터가 아니라 다른 데이터들도 바인딩이 가능하다.
  또한, XAML 상에서 바인딩을 할 때 데이터 타입은 무관하다.
• XAML 에서 바인딩을 할 때 신경써야 할 부분은 데이터 자체의 타입이 아니라 데이터 자체의 형태가 된다.

    <StackPanel Height="200" Width="200">
        <TextBox Name="txtb" Text="50" Margin="5" TextChanged="txtb_TextChanged" />
        <Border Margin="5" Height="60" Width="{Binding ElementName=txtb, Path=Text}" Background="Red" />
    </StackPanel>

→ Text는 string타입이지만 double 타입인 Width와 바인딩

    <StackPanel Height="200" Width="200">
        <TextBox Name="txtb" Text="50" Margin="5" />
        <Border Margin="5" Height="60" Width="60" BorderThickness="1" BorderBrush="blue"
                Background="{Binding ElementName=txtb, Path=Text}"/>
    </StackPanel>

→ Text는 string타입이지만 d Brush 타입인 Background와 바인딩