Binding

출처: https://tip1234.tistory.com/214?category=842024

Binding

• 기존 Winform에서는 Control에 이벤트가 있었고 이벤트를 이용해서 값을 바꿔줬음
• 예를 들어 두 숫자 입력해서 합을 구하는 프로그램 만든다고 하면, TextBox 2개 만들고 TextChanged 이벤트를 통해 해당 값을 저장하고 있다가 결과 반환하는 방식
• WPF에서는 MVVM 모델로 Winform보다 더 제한없이 Binding 사용 가능

Binding 예시

<StackPanel Orientation="Vertical">
    <TextBlock Text="{Binding MYTXT}" Height="40" Margin="3" Background="AliceBlue"/>
    <StackPanel Orientation="Horizontal">
        <Button Content="Button01" Style="StaticResource MyBtnStyle}"/>
        <Button Content="Button02" Style="StaticResource MyBtnStyle}"/>
        <Button Content="Button03" Style="StaticResource MyBtnStyle}"/>
        <Button Content="Button04" Style="StaticResource MyBtnStyle}"/>
        <Button Content="Button05" Style="StaticResource MyBtnStyle}"/>
        <Button Content="Button06" Style="StaticResource MyBtnStyle}"/>
    </StackPanel>
</StackPanel>

• TextBlock 태그에서 Text 속성 바인딩, 바인딩하면 MYTXT는 ViewModel에 있는 속성값이랑 연결
  ↓

public class MainViewModel : ViewModelBase
{
    public string MYTXT { get; set; }
    
    public MainViewModel()
    {
        MYTXT = "Button";
    }
}

• MYTXT에 Button 대신에 Icon이라는 string 입력하면 실제 컨트롤에서 Icon으로 나옴

CommandBinding 예시

<StackPanel Orientation="Vertical">
    <TextBlock Text="{Binding MYTXT}" Height="40" Margin="3" Background="AliceBlue"/>
    <StackPanel Orientation="Horizontal">
        <Button Content="Button01" Command="{Binding CmmandBtn01}" Style="StaticResource MyBtnStyle}"/>
        <Button Content="Button02" Command="{Binding CmmandBtn02}" Style="StaticResource MyBtnStyle}"/>
        <Button Content="Button03" Command="{Binding CmmandBtn03}" Style="StaticResource MyBtnStyle}"/>
        <Button Content="Button04" Command="{Binding CmmandBtn04}" Style="StaticResource MyBtnStyle}"/>
        <Button Content="Button05" Command="{Binding CmmandBtn05}" Style="StaticResource MyBtnStyle}"/>
        <Button Content="Button06" Command="{Binding CmmandBtn06}" Style="StaticResource MyBtnStyle}"/>
    </StackPanel>
</StackPanel>

• Command는 버튼을 누르면 발생
• Command에 원하는 Command 이름을 쓰고 Binding, Command는 ViewModel에 선언

public ICommand CmmandBtn01 { get; set; }
public ICommand CmmandBtn02 { get; set; }
public ICommand CmmandBtn03 { get; set; }
public ICommand CmmandBtn04 { get; set; }
public ICommand CmmandBtn05 { get; set; }
public ICommand CmmandBtn06 { get; set; }

public MainViewModel()
{
    MYTXT = "Icon";
    
    CmmandBtn01 = new RelayCommand(Btn01Click);
    CmmandBtn02 = new RelayCommand(Btn02Click);
    CmmandBtn03 = new RelayCommand(Btn03Click);
    CmmandBtn04 = new RelayCommand(Btn04Click);
    CmmandBtn05 = new RelayCommand(Btn05Click);
    CmmandBtn06 = new RelayCommand(Btn06Click);
}

• Command 선언하면 해당 함수로 이동해서 동작
• ICommand는 System.Windows.Input 네임스페이스를 가짐
• WPF에서 사용하는 모든 컨트롤은 ICommand 인터페이스를 상속받음
• 각 버튼을 누르면 해당 함수 호출

private void Btn01Click()
{
    MYTXT = "Btn01"; RaisePropertyChanged("MYTXT");
}
private void Btn02Click()
{
    MYTXT = "Btn02"; RaisePropertyChanged("MYTXT");
}
private void Btn03Click()
{
    MYTXT = "Btn03"; RaisePropertyChanged("MYTXT");
}
private void Btn04Click()
{
    MYTXT = "Btn04"; RaisePropertyChanged("MYTXT");
}
private void Btn05Click()
{
    MYTXT = "Btn05"; RaisePropertyChanged("MYTXT");
}
private void Btn06Click()
{
    MYTXT = "Btn06"; RaisePropertyChanged("MYTXT");
}

• Text가 바인딩되었지만 해당 값이 바뀐 사실을 Control 입장에서 알지 못함
• 속성이 바뀐 사실을 컨트롤에 전달하는 기능 필요 → RaisePropertyChanged 함수 호출(mvvmlight 기준)
• 버튼 누르면 텍스트 바뀜