01. 목표

 

02. 준비

더보기

02.1 UI 준비

32.2 DataBinding 준비.zip
0.17MB

기본 UI 틀을 가진 프로젝트를 준비합니다.

위 압축 파일을 다운받아 실행하거나, 새 프로젝트에서 아래 XAML 코드를 사용하세요. 
    Title="Data Binding" 
    Height="150" Width="265"
    >
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height = "10" />
        <RowDefinition Height = "Auto" />
        <RowDefinition Height = "Auto" />
        <RowDefinition Height = "10" />
        <RowDefinition Height = "*" />
        <RowDefinition Height = "10" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width = "10" />
        <ColumnDefinition Width = "Auto" />
        <ColumnDefinition Width = "*" />
        <ColumnDefinition Width = "10" />
    </Grid.ColumnDefinitions>

    <Label Grid.Row="1" 
           Grid.Column="1" 
           Margin="2" 
           Content="Name"/>

    <TextBox Grid.Row="1" 
             Grid.Column="2"
             Margin="2" />

    <Label Content="Age" 
           Margin="2" 
           Grid.Column="1" 
           Grid.Row="2" />

    <TextBox Grid.Column="2" 
             Grid.Row="2" 
             Margin="2"/>

    <Button Grid.Column="1" 
            Grid.Row="4" 
            Grid.ColumnSpan="2"  
            Content="Load Info." 
            Click="Button_Click" />
</Grid>

 

 

 

 

02.2 Binding 테스트 데이터 준비(1)

 

 

 

 

02.3 Binding 테스트 데이터 준비(2) 

Person person = new Person { Age = 20, name = "Richard"};

 

 


02.4 테스트 준비

 

 

버튼을 누르면, person 객체를 사용해서 출력하도록 구성합니다. 

소스코드 → 소스코드 → UI

 

 

02.5 요약 

언제나 하는 말이지만, 프로그램은, '데이터'와 '로직' 단, 2가지만 존재합니다.

WPF는 여기에 UI 라는 '데이터'를 다루는 '로직' 기술이 추가된 형태입니다.

Person 이라는 '데이터를' UI로 주고, 받는, 과정이 필요합니다.

이때 "데이터 바인딩" 이라는 기술을 사용합니다.

 

위에서 준비한 person 객체의 데이터를 UI와 어떻게 연동하고, 주고 받는지 이해하는 것이 데이터 바인딩입니다.

 

03. One Way

더보기

03.1 개념

 

One Way 데이터 바인딩이란?

데이터의 흐름이 [소스코드→UI], [C#→XAML] 방향으로만 사용되는 것이다.

 

프로그램 로그인 페이지가 실행되었을 때, 사용자의 아이디를 캐시에서 가져와 보여주거나

날씨 정보, 결재 로그와 같은 데이터를 별도의 사용자 이벤트 없이 처음부터 보여져야 할 경우에 사용한다.

*중요한 점은, 사용자의 이벤트가 데이터를 불러온 곳의 원천 데이터에 영향을 주는 곳에 사용되면 안된다.

 

 

 

 

03.2 One Way 데이터 바인딩 구현

*앱을 실행했을 때, <C# 소스>에서 <XAML UI>로 데이터를 가져오기

Text="{Binding Name, Mode=OneWay}"
Text="{Binding Age, Mode=OneWay}"

 

data-context

 

데이터 바인딩 개요 - WPF .NET

.NET용 Windows Presentation Foundation의 데이터 바인딩에 대해 알아봅니다. 데이터를 UI 요소에 바인딩하여 동적 앱을 만들 수 있습니다.

learn.microsoft.com

 

this.DataContext = person;

 

 

 

03.3 코드에서 UI(메시지 박스)로 데이터 바인딩

 

One Way 데이터 바인딩이란,

데이터의 흐름이 [소스코드→UI], [C#→XAML] 방향으로만 사용되는 것으로,

반대로,  UI에서 변경한 데이터가 소스코드에 영향을 주지 않는다.

 

04. Two Way

더보기

04.1 개념

 

Two Way 데이터 바인딩이란?

데이터의 흐름이 [소스코드→UI], [ UI→ 소스코드 ] 양방향으로 사용되는 것이다.

 

 

 

 

04.2 TWO Way 데이터 바인딩 구현

 

 

 

 

04.3 코드에서 UI로, UI에서 코드로 데이터 바인딩

 

 

 

05. One Way To Source

더보기

04.1 개념

 

One Way To Source데이터 바인딩이란?

데이터의 흐름이 [ UI→ 소스코드 ] 방향으로만 사용되는 것이다.

 

 

 

 

04.2 One Way To Source 데이터 바인딩 구현

 

 

 

 

04.3 UI에서 코드로 데이터 바인딩

 

아무것도 입력하지 않으면, 문자열은 "" 공백으로 업데이트 되기 때문에 공백을 출력하고

정수는 기존의 객체를 업데이트 하지 않으므로 기존 값 20이 출력된다.

공백일 때, 0으로 변경되도록 추가 구현해야 한다.


06. One Time

더보기

OneTime 바인딩은 응용 프로그램이 시작되거나 DataContext가 변경될 때에만 데이터 흐름이 발생한다.

OneWay 바인딩과 같지만 응용 프로그램이 시작되거나 DataContext가 변경될 때만 이러한 데이터 흐름이 발생한다.

*OneWayToSource와 OneTime은 거의 사용되지 않는다.

 

티스토리툴바