(WPF교육)WPF 데이터바인딩, 데이터컨텍스트, DataContext를 이용한 소스설정, TwoWay 데이터 바인딩 실습

WPF 데이터바인딩, 데이터컨텍스트, DataContext를 이용한 소스설정, TwoWay 데이터 바인딩 실습

​

TwoWay 데이터 바인딩 실습

n 양방향 바인딩은 한쪽만 Binding 절을 사용 후 UpdateSourceTrigger 속성(옵션)을 기술(기본적으로 양방향을 지원, 가능하다면 양방향 지원한다.)해서 구현하거나 소스, 타겟 양쪽 모두에 Binding 절을 사용해서 양방향 소스로 사용하도록 해서 구현할 수 있다.

n UpdateSourceTrigger 열거형 : 데이터 바인딩 소스의 업데이트의 타이밍을 설정.

ü Default : 대부분의 의존 속성에 대한 기본값이 PropertyChanged인 반면 Text 속성의 기본값은 LostFocus 이다.

ü Explicit : UpdateSource 메서드를 호출하는 경우에만 바인딩 소스를 업데이트.

ü LostFocus : 포커스를 잃을 때 바인딩 소스를 업데이트.

ü PropertyChanged : 바인딩 대상 속성이 변경될 때마다 즉시 바인딩 소스를 업데이트.

n MainWindow.xaml

<Window x:Class="WpfApplication9.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Grid> <TextBox Height="23" HorizontalAlignment="Left" Margin="230,41,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="{Binding ElementName=textBox2, Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" /> <TextBox Height="23" HorizontalAlignment="Left" Margin="230,98,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" /> </Grid> </Window>

n MainWindow.xaml

<Window x:Class="WpfApplication9.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="500" Width="500"> <Grid> <TextBox Height="23" HorizontalAlignment="Left" Margin="230,41,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="{Binding ElementName=textBox2, Path=Text,Mode=TwoWay}" /> <TextBox Height="23" HorizontalAlignment="Left" Margin="230,98,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" Text="{Binding ElementName=textBox1, Path=Text,Mode=TwoWay}"/> </Grid> </Window>

DataContext를 이용한 데이터 바인딩

n 바인딩 소스객체를 명시하는 또 다른 방법이 있는데 DataContext를 이용하면 된다.

n MainWindow.xaml

<Window x:Class="BindingWithDataContext.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <StackPanel> <!-- Binding Source. --> <ScrollBar Name="scroll" Orientation="Horizontal" Margin="24" Maximum="100" LargeChange="10" SmallChange="1" /> <!-- Binding Target. --> <Label HorizontalAlignment="Center" DataContext="{Binding ElementName=scroll}" Content="{Binding Path=Value}" /> </StackPanel> </Window>

n DataContext와 Label의 Content 속성 모두에 두 개로 분리하여 바인딩을 정의했는데 첫 번째 DataContext의 바인딩 정의는 ElementName을 명시하고 두 번째 Content의 바인딩 정의는 스크롤바의 Value 프로퍼티를 명시한다.

n 이 예제에서는 DataContext를 사용한 이점은 없지만 DataContext 프로퍼티가 엘리먼트 트리를 통해 상속되기에 하나의 엘리먼트에 DataContext를 이용하여 바인딩 시키면 모든 자식 엘리먼트에 동일하게 적용되는 장점이 있다.

n 다른 예제를 작성해 보자. 이번 예제에서 DataContext는 StackPanel에 한 번 설정되었고 Label과 Button은 ScrollBar와 바인딩 되었다. Label에 바인딩 된 프로퍼티는 Content이지만 Button에 바인딩 된것은 FontSize이므로 ScrollBar를 움직이면 Button 내부의 텍스트가 점점 커지고 Button도 커진다.

n 프로젝트명 : BindingTwoControll

n MainWindow.xaml

<Window x:Class="BindingTwoControll.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <StackPanel DataContext="{Binding ElementName=scrollbar}"> <!-- Binding Source. --> <ScrollBar Name="scrollbar" Orientation="Horizontal" Margin="24" Minimum="1" Maximum="100" LargeChange="10" SmallChange="1" /> <!-- Binding Targets. --> <Label HorizontalAlignment="Center" Content="{Binding Path=Value, Mode=OneWay}" /> <Button HorizontalAlignment="Center" Margin="24" FontSize="{Binding Path=Value, Mode=OneWay}"> Bound Button </Button> </StackPanel> </Window>

​

​

DataContext를 이용한 TwoWay 데이터 바인딩 실습

n WPF 프로젝트를 생성 후 콘솔에 사원의 Name, City를 출력해야 하니 프로젝트 속성에서 출력형식을 "콘솔 응용프로그램"으로 설정하자.

n Emp.cs

namespace WpfApplication9 { public class Emp { public string Ename { get; set; } public string City { get; set; } } }

n MainWindow.xaml

<Window x:Class="WpfApplication9.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:src="clr-namespace:WpfApplication9" Title="Customer Window" Height="300" Width="300"> <Window.Resources> <src:Emp x:Key="emp" Ename="홍길동" City="서울" /> </Window.Resources> <Grid x:Name="Grid1" DataContext="{StaticResource emp}"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Grid.Row="0">Name:</TextBlock> <TextBlock Grid.Column="0" Grid.Row="1">City:</TextBlock> <TextBox x:Name="TextBox1" Grid.Column="1" Grid.Row="0" Text="{Binding Path=Ename}"></TextBox> <TextBox x:Name="TextBox2" Grid.Column="1" Grid.Row="1" Text="{Binding Path=City}"></TextBox> <Button Grid.Column=" 1" Grid.Row="2" Name="button1" Click="OnClicked">Control To Context</Button> </Grid> </Window>

n MainWindow.xaml.cs

using System.Windows; namespace WpfApplication9 { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void OnClicked(object sender, RoutedEventArgs args) { Emp e = Grid1.DataContext as Emp; System.Console.WriteLine(e.Ename); System.Console.WriteLine(e.City); } } }

n 실행 화면

최초 실행시 XAML 파일의 Resource절에서 설정한 Emp 클래스 Ename, City 속성을 기본값으로 해서 화면이 로딩된다.

Name, City를 다른 내용으로 입력하면 데이터 바인딩으로 인해 Emp 객체의 Ename, City 속성값이 채워지고 이것을 콘솔화면에 출력했다.

​

#데이터바인딩, #TwoWay바인딩, #데이터컨텍스트, #DataContext, #WPF, #WPF강좌, #WPF교육, #WPF강의, #시샵, #닷넷, #Csharp, #XAML,