WPF의 데이터 컨텍스트 및 자동 연결 소개 - iFour Technolab

DataContext란 무엇입니까?

DataContext는 데이터 바인딩의 가장 유용한 개념 중 하나입니다. DataContext는 FrameWorkElement 내에서 정의되는 속성입니다. 바인딩의 기본 소스입니다. 개체를 바인딩하려면 어딘가의 데이터가 필요합니다. 데이터 소스를 지정하는 몇 가지 방법이 있습니다. 바인딩에 Source 속성을 사용하고 DataContext를 상속할 수 있으며 ElementName 및 RelativeSource 속성도 개체 바인딩에 사용됩니다. 데이터 바인딩은 한 컨트롤의 속성을 변경하면 다른 일치 항목이 자동으로 업데이트됨을 의미합니다.

데이터 바인딩이 있는 DataContext는 계층적 데이터 프레젠테이션을 제공할 수 있습니다. 프런트 엔드를 코드 숨김에 연결하고 데이터를 변경할 수 있습니다. 기본 DataContext 속성은 처음부터 단순히 null이며, Window용 DataContext를 설정하고 모든 자식 컨트롤에서 사용할 수 있습니다.

프로젝트에서 DataContext를 사용하는 방법에는 두 가지가 있습니다.

XAML 측 사용

코드 숨김

예제를 하나씩 살펴보자. 먼저 코드 숨김을 사용하여 예제를 만들 수 있습니다.

1 단계
먼저 Visual Studio를 시작하고 WPF 프로젝트를 선택합니다.



WPF 앱(.NET Framework)을 선택한 후 적절한 이름을 지정하고 클릭하여 단추를 만듭니다.

2 단계
프로젝트를 생성한 후 MainWindow.Xaml 파일을 열고 아래 코드를 추가하거나 보여주고 싶은 디자인을 생성할 수 있습니다.

MainWindow.Xaml

<window height="450" mc:ignorable="d" title="MainWindow" width="800" x:class="DataContext.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:src="clr-namespace:DataContext" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<grid datacontext="{Binding Path=EmployeeNameTest}">
<grid.resources>
<src:employee employeename="Kishore1021" x:key="myDataSource">
</src:employee></grid.resources>
<grid.rowdefinitions>
<rowdefinition height="*"></rowdefinition>
<rowdefinition height="*"></rowdefinition>
<rowdefinition height="*"></rowdefinition>
<rowdefinition height="*"></rowdefinition>
<rowdefinition height="*"></rowdefinition>
<rowdefinition height="*"></rowdefinition>
</grid.rowdefinitions>
<textbox grid.row="0" name="TextBox1" text="{Binding Source={StaticResource myDataSource}, Path=EmployeeName, UpdateSourceTrigger=PropertyChanged}">
<textbox grid.row="1" name="TextBox2" text="{Binding Source= {StaticResource myDataSource}, Path=EmployeeName}"></textbox>
<textbox grid.row="2" name="TextBox3" text="{Binding Path=EmployeeName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></textbox>
<textbox grid.row="3" name="TextBox4" text="{Binding Path=EmployeeName}"></textbox>
<textblock grid.row="4" name="TextBlock1" text="{Binding Path=EmployeeName}">
<textblock grid.row="5" name="TextBlock2" text="{Binding Path=AnotherField}">
</textblock></textblock></textbox></grid>
</window>

자세히 보기: Wpf에서 바인딩하는 다양한 방법은 무엇입니까?

단계: 3
MainWindow.Xaml.cs

usingSystem.Linq;
usingSystem.Text;
usingSystem.Threading.Tasks;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Data;
usingSystem.Windows.Documents;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Imaging;
usingSystem.Windows.Navigation;
usingSystem.Windows.Shapes;
namespaceDataContext
{
publicpartialclassMainWindow : Window
    {
     publicMainWindow()
        {
            InitializeComponent();
            Employee P = newEmployee("Hello World");
      P.State = "MD";
      AnotherClass c = newAnotherClass();
      c.EmployeeNameTest = P;
      c.AnotherField = "Another Value";
      this.DataContext = c;
        }
    }
  publicclassAnotherClass :INotifyPropertyChanged
    {
      privatestringanotherfield;
      private Employee emp;
            publicstringAnotherField
            {
                get{ returnanotherfield; }
                set
            {
        anotherfield = value;
        OnPropertyChanged("AnotherField");
            }
        }
    public Employee EmployeeNameTest
    {
      get{ return emp; }
      set
            {
                emp = value;
                OnPropertyChanged("EmployeeNameTest");
            }
        }
    publiceventPropertyChangedEventHandlerPropertyChanged;
    protectedvoidOnPropertyChanged(string name)
    {
    PropertyChangedEventHandler handler = PropertyChanged;
    if (handler != null)
            {
               handler(this, newPropertyChangedEventArgs(name));
            }
        }
    publicoverridestringToString()
        {
            returnstring.Format("My ToString implementation of AnotherClass");
        }
    }
    publicclassEmployee :INotifyPropertyChanged
    {
    privatestringnameofemployee;
    privatestringstateofemployee;
    // Declare the event
    publiceventPropertyChangedEventHandlerPropertyChanged;
  publicEmployee()
      {
      }
  publicEmployee(string value)
        {
      this.nameofemployee = value;
        }
  publicstringEmployeeName
        {
      get{ returnnameofemployee; }
      set
            {
        nameofemployee = value;
        OnPropertyChanged("EmployeeName");
            }
        }
  publicstring State
        {
    get{ returnstateofemployee; }
    set
            {
        stateofemployee = value;
        OnPropertyChanged("State");
            }
        }
  protectedvoidOnPropertyChanged(string name)
        {
      PropertyChangedEventHandler handler = PropertyChanged;
      if (handler != null)
            {
        handler(this, newPropertyChangedEventArgs(name));
            }
        }
    }
}

산출:



코드 비하인드 예제에서 InitalizeComponent() 다음에 DataContext에 "this"참조를 할당하기만 하면 코드 한 줄만 있으면 됩니다. 이것은 Window에게 우리가 DataContext가 되고 싶다고 말할 수 있습니다.

이제 XAML 코드를 사용하여 DataContext의 예를 만들 수 있습니다.

1 단계
먼저 WPF 프로젝트를 만들고 엽니다.

2 단계
먼저 MainViewModel이라는 뷰 모델을 만들고 get set 메서드를 추가합니다.

MainViewModel.cs

 using System;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Threading.Tasks;
namespaceDataContext
{
  publicclassMainViewModel
    {
    publicNameofEmployeeMyEmployee{ get; set; }
    }
}

고도로 숙련된 WPF 개발자와 대화를 원하십니까? 지금 연락하십시오.

단계: 3
그런 다음 직원의 이름과 ID를 표시하는 직원 클래스를 만듭니다.

Employee.cs

using System;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Threading.Tasks;
namespaceDataContext
{
  publicclassNameofEmployee
    {
    publicNameofEmployee()
        {
      EmployeeDetailsemployeeDetails = newEmployeeDetails();
      employeeDetails.EmpID = 123;
      employeeDetails.EmpName = "ABC";
        }
    }
publicclassEmployeeDetails
    {
    privateintempID;
    publicintEmpID
        {
      get
            {
        returnempID;
            }
      set
            {
        empID = value;
            }
        }
    privatestringempName;
    publicstringEmpName
        {
      get
            {
        returnempName;
            }
      set
            {
        empName = value;
            }
        }
    }
}

단계: 4
MainWindow.Xaml

<window height="450" mc:ignorable="d" title="MainWindow" width="800" x:class="DataContext.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:DataContext" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <window.datacontext>
        <local:mainviewmodel>
    </local:mainviewmodel></window.datacontext>
    <grid>
        <grid.rowdefinitions>
            <rowdefinition height="Auto">
            <rowdefinition height="Auto">
        </rowdefinition></rowdefinition></grid.rowdefinitions>
        <grid.columndefinitions>
            <columndefinition width="Auto">
            <columndefinition width="200">
        </columndefinition></columndefinition></grid.columndefinitions>
        <label content="ID:" grid.column="0" grid.row="0">
        <label content="Name:" grid.column="0" grid.row="1">
        <textbox grid.column="1" grid.row="0" margin="3" text="{Binding MyEmployee.EmpId}">
        <textbox grid.column="1" grid.row="1" margin="3" text="{Binding MyEmployee.EmpName}">
    </textbox></textbox></label></label></grid>
</window>

우선 바인딩 목적으로 DataContext를 추가할 수 있습니다. 여기서 우리는 Employee 클래스를 상속할 수 있는 MainViewModel을 바인딩할 수 있으며 그 후에 Grid를 사용하여 이름과 ID를 표시하는 두 개의 레이블과 바인딩 가능한 이름과 ID를 표시하는 두 개의 TextBox를 추가할 수 있습니다.

ViewModelLocator로 자동 연결

auto-wire는 View와 ViewModel 사이의 코드를 연결하는 데 사용됩니다. 이는 View와 ViewModel을 바인딩하는 느슨하게 결합된 방법을 제공할 수 있습니다. 이 접근 방식을 사용할 때 ViewModel이 View와 연결될 수 있는 하드 코드가 아닌 간단한 보기만 만들면 됩니다.

결론

데이터 컨텍스트는 데이터 소스를 정의할 수 있으며 바인딩은 표시되는 특정 데이터와 방법을 연결합니다. 데이터 바인딩을 사용하면 시간을 절약할 수 있고 긴 코딩이 필요하지 않습니다. WPF에서 일부 컨트롤에는 DataContext 속성이 있으므로 Window 내의 모든 컨트롤에 대해 동일한 DataContext 속성을 사용할 수 없습니다. 또한 DataContext 내에서 상속 및 재정의를 사용할 수 있으며 상속 체인을 끊고 DataContext를 새 값으로 재정의할 수 있습니다.