4. Data Binding 예제

이전 포스트에서 작업했다면, 아래 파일은 필요 없습니다.

1. 개념

1. Two Way 데이터 바인딩이란?

[ C# 소스코드→ XAML UI ], [ XAML UI → C# 소스코드 ] 양방향으로 할당(수정) 가능한 설정이다.

2. Data Binding. 데이터 바인딩.

>> Data를 UI와 묶는다.

>> Data(원본), UI(복사본, 원본에 종속된 상태)

>> 원본을 변경하면, 복사본이 변경된다.

>> 복사본을 변경하면, 원본이 변경된다.

2. Two Way 데이터 바인딩 구현

3. Two Way (C# 소스코드에서 UI로, UI에서 C# 소스코드)로 데이터 바인딩

1. 개념

1. One Way 데이터 바인딩이란?

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

UI에서 입력한 값이 C# 소크코드에 할당(수정)과 같이 반영되지 않는다.

2. Data Binding. 데이터 바인딩.

>> Data를 UI와 묶는다.

>> Data(원본), UI(복사본, 원본에 종속된 상태)

>> 원본을 변경하면, 복사본이 변경된다.

>> 복사본을 변경하면, 원본이 변경되지 않는다.

>> Logic(ViewModel)에서 View로의 Set만을 수행해주며 View에서의 속성값 변화는 감지하지 않는다.

3. 숫자 계산에서 결과값은 입력되면 안된다.(피연산자는 입력되고 변경되어야 한다.)

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

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

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

2. One Way 데이터 바인딩 구현

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

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

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

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

One Way 데이터 바인딩이란,

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

[ XAML UI → C# 소스코드 ] 방향으로 데이터를 할당(수정)할 수 없다.

UI에서 변경한 데이터가 내부 로직에 영향을 주지 않는다.

1. OneWayToSource 모드 개념

WPF에서 UI 요소의 값이 소스(뷰모델 또는 데이터 객체)에만 반영되고,

소스의 값은 UI에 반영되지 않는 경우에 사용됩니다.

즉, UI → ViewModel 방향의 단방향 데이터 흐름입니다.

2. OneWayToSource 데이터 바인딩 구현

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

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

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

4. 기타 예시

예시 1: 사용자가 기능을 사용했는지 기록만 하고, 프로그램이 이 값을 기반으로 UI를 다시 변경하진 않음.

예시 2: TextBox의 포커스 여부를 ViewModel에 알려주지만, ViewModel에서 포커스를 변경하진 않음.

예시 3: 마우스 위치나 좌표 추적 ViewModel에 전달해서 로깅 또는 분석용으로 사용함. UI는 변하지 않음.

OneTime 바인딩 모드는 초기 바인딩 시점에만 소스의 값을 UI에 반영하고, 이후에는 소스 값이 바뀌어도 UI가 갱신되지 않습니다. 주로 초기값만 필요하고 UI 업데이트가 필요 없는 상황에서 사용됩니다.

*OneWayToSource와 OneTime은 특정 상황에서 사용되고, 로직 구현에서 자주 사용되지 않습니다.

예시 1

UI 상단에 표시되는 사용자 정보 (변경되지 않는 경우)

로그인한 사용자 이름은 초기 로그인 이후 바뀌지 않으므로 OneTime 사용.

User 객체가 INotifyPropertyChanged를 구현하더라도 무시됨  → 런타임 중에 바뀌지 않음

예시 2

실행 환경에 따라 설정되는 텍스트 (예: OS 버전, 환경설정 등) → 런타임 중에 바뀌지 않음

예시 3

버튼, 이미지 등 리소스 관련 초기 설정값

실행 시 로딩된 리소스 (텍스트, 이미지 등)는 한 번만 필요

<Button Content="{Binding ButtonInitialText, Mode=OneTime}" />
<Image Source="{Binding StartupLogoPath, Mode=OneTime}" />

예시 4 

Grid의 컬럼 너비, 초기 스타일 등 변경이 불필요한 속성

UI 초기 설정용 바인딩으로, 이후 동적으로 바꿀 필요가 없을 때 적절

<ColumnDefinition Width="{Binding InitialColumnWidth, Mode=OneTime}" />

예시 5

성능 최적화 목적 (불필요한 업데이트 방지)

값이 절대 바뀌지 않는다고 확신할 수 있다면 OneWay보다 OneTime이 성능상 유리 (불필요한 리소스 사용 방지)