.NET MAUI xaml 단에서 x:DataType 과 BindingContext 의 차이점

.NET MAUI xaml 단에서 x:DataType 와 BindingContext 의 차이점

 

x:DataType

x:DataType 는 Type 만 정의 할뿐 실제 모델이 생성되지 않습니다.

즉, 아래 처럼 사용한 경우 xaml 코딩시 intellisense 를 사용하여 코딩이 쉬워지고 버그를 방지할 뿐입니다.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.TestView"
             xmlns:local2="clr-namespace:MauiApp1.ViewModel"
             x:DataType="local2:TestViewModel"
             Title="TestView">
    <StackLayout Margin="10">
        <Label Text="{Binding Title}" FontSize="20" TextColor="{x:OnPlatform iOS=Black, Android=Blue, UWP=Gray}"/>
        <Button Text="Command" Command="{Binding TestCommand}"/>
        <Entry x:Name="passwordEntry" IsPassword="True" Text="mvvm"/>
        <Button  Text="Param Command" Command="{Binding ParameterCommand}" CommandParameter="{Binding Source={x:Reference passwordEntry}, Path=Text}"/>
        <Entry Text="{Binding ParamValue}" />
    </StackLayout>
</ContentPage>

실제 데이터를 바인딩하기위해서는 cs 단에서 BindingContext 를정의해야 합니다.

using MauiApp1.ViewModel;

namespace MauiApp1;

public partial class TestView : ContentPage
{
	public TestView()
	{
		InitializeComponent();

		this.BindingContext = new TestViewModel();
	}
}

 

BindingContext

하지만 아래처럼 xaml 단에서 BindingContext 로 정의하게되면  cs 단 코딩에 BindingContext 를 정의한 것과 동일하게 동작하고 intellisense 도 사용할수 있습니다. cs 단에 BindingContext 정의가 필요없게 됩니다.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.TestView"
             xmlns:local2="clr-namespace:MauiApp1.ViewModel"
             Title="TestView">
    <ContentPage.BindingContext>
        <local2:TestViewModel />
    </ContentPage.BindingContext>
    <StackLayout Margin="10">
        <Label Text="{Binding Title}" FontSize="20" TextColor="{x:OnPlatform iOS=Black, Android=Blue, UWP=Gray}"/>
        <Button Text="Command" Command="{Binding TestCommand}"/>
        <Entry x:Name="passwordEntry" IsPassword="True" Text="mvvm"/>
        <Button  Text="Param Command" Command="{Binding ParameterCommand}" CommandParameter="{Binding Source={x:Reference passwordEntry}, Path=Text}"/>
        <Entry Text="{Binding ParamValue}" />
    </StackLayout>
</ContentPage>

아래 maui 예제 링크에 추가 정보(컴파일된 바인딩)
https://docs.microsoft.com/ko-kr/dotnet/maui/fundamentals/data-binding/compiled-bindings

컴파일된 바인딩 - .NET MAUI

소스
https://github.com/kei-soft/MauiApp

GitHub - kei-soft/MauiApp