WPF에서 데이터를 화면에 표시해줄 필요가 있을까? 당연히 필요하지요. 프로그램이니까요.
WPF에서는 Data Binding을 통해서, 화면에 데이터를 표시해줄 수 있다. 입력도 가능하다.
예를 들어, 온도 센서를 읽어와 화면에 표시해주는 다음과 같은 화면이 있다고 하자.
여기서 60이라는 값은 어떻게 xaml에 표시해줄 수 있을까?
잠시 기존의 MFC로 돌아가서 생각해보면, 이를 처리하는 방법은 아마도 다음과 같을것이다.
| - 화면에 온도 숫자를 표시할 리소스를 미리 담아둔다. 연결된 변수명은 m_txtTemperature 라고 하자. 로직을 처리하는 cpp파일에서, 온도가 변하면 다음과 같이 호출할 것이다. void TemperatureChanged(int newTemperatureValue){ //... todo currentTemperatureValue = newTemperatureValue; m_txtTemperature.SetWindowText( currentTemperatureValue); //... todo } |
대충 위와 비슷하게 구현하지 않을까? 저 텍스트의 값이 변하게 될려면 저 컨트롤과 연결된 변수의 함수를 호출하여 값을 써주는 형태로 구현이 될것이다. 컨트롤이 많아질 경우, 각각의 컨트롤 변수들을 리소스와 연결하는 코드, 각각 따로 값을 변경해주는 코드등을, 전부 로직단에서 구현해주어야 한다. 이 경우 문제는.. 디자이너가 컨트롤을 추가하거나, 삭제할때 로직단에서 관련된 코드들을 전부 작업해주어야한다는거. (이거 시간 은근히 잡아먹는 일이다.)
WPF에서는 위와 같은 노가다를 꽤나 깔끔하게 정리해주고있다. 바로 DataBinding을 이용해서.
DataBinding을 사용하여 데이터를 표시하기 위해서는 다음과 같이 구현하면 된다.
<Label Grid.Column="0" Caption="온도" />
<TextBlock Grid.Column="1" Text="{Binding Path=CurrentTemperatureValue}" />
<Label Grid.Column="2" Caption="℃" />대략적으로 위와 같이 작성하면 된다.
여담으로, Textblock에서 Text가 일정 Format을 가진다고 하면 다음과 같이 표현 가능하다.
<TextBlock>
<Run Text="온도" />
<Run Text="{Binding Path=CurrentTemperatureValue}" />
<Run Text="℃" />
</TextBlock>
이렇게 xaml에 작성해 두고, ViewModel에서 다음과 같이 코드를 작성해두면 된다.
private int currentTemperatureValue;
public CurrentTemperatureValue{
get{
return this.currentTemperatureValue;
}
set{
this.currentTemperatureValue;
this.RaisePropertyChanged("CurrentTemperatureValue");
}
}여기서 RaisePropertyChanged는 INotifyPropertyChanged를 상속받아 구현한 클래스에서 정의한 메소드이다. 이와 관련해서는 포스팅을 추가로 작성하겠음.. (이거까지 담으면 너무 길어져서요..).
위와 같이 작성해두면, 다음과 같이 코드가 작성되면 값이 갱신된다.
private void UpdateTemperatureValue(int newValue){
// ... Todo
this.CurrentTemeratureValue = newValue;
// ... Todo
}정말 간결해진다. 알아서 가져간다. Data를표시해줄 위치 (in Xaml)에서는 'Binding Path=속성'으로 로직단의 속성값을 읽어올 수 있다. (Text등의 입력일 경우 속성값을 갱신해주는 것이지만..)
여기까지 왔는데, 중요한것 한가지. 저 속성값을 가진 ViewModel은 어떻게 연결해주지?
방법은 여러가지가 있다.
1. xaml에서 바로 연결
<Window ....
DataContext="VM클래스명"
...
>
...
</Window>
위와같이 작성하는 방법도 있긴 하다.
2. 하지만, 명확하게 연결하고싶다면, main.xaml.cs에서 ViewModel을 추가하여야 한다.
public partial class MyView : UserControl{
...
public MyView(){
initializeComponent();
this.DataContext = new MyViewModel();
}
}만약 Prism라이브러리를 사용하여 접근한다면, 아래와 같이 해도 알아서 만들어준다.
[Export(typeof(MyWindow))]
public partial class MyWindow : UserControl{
public MyWindow(){
...
}
[import]
public MyViewModel ViewModel{
get{ return this.DataContext as MyViewModel; }
set{ this.DataContext = value; }
}
}Prism에서는 ViewModel이 알아서 객체가 생성된다.
안쓰고 생성자에서 ViewModel객체를 생성 후,. DataContext와 연결해주면 된다.
이렇게하면 생성된 ViewModel의 속성의 값이 변하면, 화면 UI가 알아서 바뀐다.
이걸로 올릴 포스팅이 무궁무진하니 오늘은 여기까지...
댓글