WPF 데이터 컨텍스트(DataContext)를 이용한 데이터 바인딩, WPF교육

 

WPF 데이터 컨텍스트(DataContext)를 이용한 데이터 바인딩, WPF교육https://www.youtube.com/watch?v=K3v-A5d2fNI&list=PLxU-iZCqT52Cmj47aKB1T-SxI33YL7rYS&index=21&t=4s 

https://www.youtube.com/watch?v=wgz3OyVqfY4&list=PLxU-iZCqT52Cmj47aKB1T-SxI33YL7rYS&index=13&t=1s 

• 바인딩 소스객체를 명시하는 또 다른 방법이 있는데 DataContext를 이용하면 된다.
• 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>

• DataContext와 Label의 Content 속성 모두에 두 개로 분리하여 바인딩을 정의했는데 첫 번째 DataContext의 바인딩 정의는 ElementName을 명시하고 두 번째 Content의 바인딩 정의는 스크롤바의 Value 프로퍼티를 명시한다.
• 이 예제에서는 DataContext를 사용한 이점은 없지만 DataContext 프로퍼티가 엘리먼트 트리를 통해 상속되기에 하나의 엘리먼트에 DataContext를 이용하여 바인딩 시키면 모든 자식 엘리먼트에 동일하게 적용되는 장점이 있다.
• 다른 예제를 작성해 보자. 이번 예제에서 DataContext는 StackPanel에 한 번 설정되었고 Label과 Button은 ScrollBar와 바인딩 되었다. Label에 바인딩 된 프로퍼티는 Content이지만 Button에 바인딩 된것은 FontSize이므로 ScrollBar를 움직이면 Button 내부의 텍스트가 점점 커지고 Button도 커진다.
• 프로젝트명 : BindingTwoControll
• 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>

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

• XAML XML에서 데이터바인딩을 위한 소스객체는 Binding의 Source, ElementName 속성을 이용한다.

<!-- ElementName=txt1 대신 Source={x:Reference txt1}가능 -->

<Label HorizontalAlignment="Center" BorderBrush="Black" 

BorderThickness="2"

Content="{Binding ElementName=txt1, Path=Text}" />

• 바인딩 소스객체를 명시하는 또 다른 방법이 있는데 DataContext를 이용하면 된다.
• WPF 프로젝트를 생성 후 콘솔에 사원의 Name, City를 출력해야 하니 프로젝트 속성에서 출력형식을 "콘솔 응용프로그램"으로 설정하자.
• Emp.cs

namespace WpfApplication9

{

    public class Emp

    {

        public string Ename

        {

            get;

            set;

        }

 

        public string City

        {

            get;

            set;

        }

    }

}

• MainWindow.xaml

<Window x:Class="WpfApp6.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:WpfApp6"

        mc:Ignorable="d"

        Title="MainWindow" Height="450" Width="800">

    <Grid x:Name="Grid1">

        <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>

• MainWindow.xaml.cs

using System.Windows;

namespace WpfApp6

{

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

            Emp e = new Emp()

            {

                Ename = "홍길동",

                City = "서울"

            };

            this.DataContext = e;

        }

        private void OnClicked(object sender, RoutedEventArgs args)

        {

            Emp e = this.DataContext as Emp;

            System.Console.WriteLine(e.Ename);

            System.Console.WriteLine(e.City);

        }

    }

}

• 실행 화면

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

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

#WPF데이터컨텍스트, #데이터컨텍스트, #데이터바인딩, #WPF데이터바인딩, #WPF교육, #WPF강좌, #WPF학원, #DataBinding, #WPFDataBinding

WPF데이터컨텍스트, 데이터컨텍스트,데이터바인딩, WPF데이터바인딩, WPF교육, WPF강좌, WPF학원, DataBinding, WPFDataBinding