728x90
728x170
MVVM 을 사용하기 위한 기본 구성을 정리해본다.
일단 폴더로 View, ViewModel 폴더를 만들고 ViewModel 에서 사용되는 Model 도 폴더로 생성한다.
[TestView.xaml]
<?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"
Title="TestView">
<StackLayout Margin="10">
<Label Text="{Binding Title}" FontSize="20" TextColor="{x:OnPlatform iOS=Black, Android=Blue, UWP=Gray}"/>
<Button Text="Test 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>
Parameter 가 없는 Command 는 TestCommand
Parameter 가 있는 Command 는 ParameterCommand 로 CommandParameter 에 passwordEntry 값을 사용한다.
[TestView.xaml.cs]
using MauiApp1.ViewModel;
namespace MauiApp1;
public partial class TestView : ContentPage
{
public TestView()
{
InitializeComponent();
this.BindingContext = new TestViewModel();
}
}
ViewModel 정의
using System.ComponentModel;
using System.Windows.Input;
namespace MauiApp1.ViewModel;
internal class TestViewModel : INotifyPropertyChanged
{
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName)
{
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
#region Command
public ICommand TestCommand { get; private set; }
public ICommand ParameterCommand { get; private set; }
#endregion
#region Field
private string title = "MVVM Test";
private string paramValue = "";
#endregion
#region Properties
/// <summary>
/// 타이틀
/// </summary>
public string Title
{
get { return this.title; }
set
{
this.title = value;
OnPropertyChanged("Title");
}
}
/// <summary>
/// 파라미터 값
/// </summary>
public string ParamValue
{
get { return this.paramValue; }
set
{
this.paramValue = value;
OnPropertyChanged("ParamValue");
}
}
#endregion
// Constructor
#region TestViewModel
/// <summary>
/// TestViewModel
/// </summary>
public TestViewModel()
{
this.TestCommand = new Command(OnTestCommand);
this.ParameterCommand = new Command<string>(OnParameterCommand);
}
#endregion
// Methods
#region OnTestCommand
private void OnTestCommand()
{
App.Current.MainPage.DisplayAlert("Test", "Test Command Click.", "OK");
}
#endregion
#region OnParameterCommand(string param)
private void OnParameterCommand(string param)
{
this.ParamValue = param;
}
#endregion
}
Title 데이터 'MVVM Test'가 화면에 표시되고 Test Command 버튼 클릭시 팝업 표시된다.
Param Command 를 클릭하면 버튼위쪽 비밀번호 입력한 항목이 Parameter 로 전달되어 버튼 아래에 있는 Entry 에 표시된다.
728x90
그리드형
'C# > Xamarin Maui' 카테고리의 다른 글
[.NET MAUI] 지문 인증 사용하기 (0) | 2022.05.12 |
---|---|
[.NET MAUI] SfBadgeView, SfEffectsView 사용하기 (1) | 2022.03.26 |
[.NET MAUI] xaml 단에서 x:DataType 과 BindingContext 의 차이 (0) | 2022.03.15 |
[.NET MAUI] SfListView Grouping 처리 (0) | 2022.03.13 |
[.NET MAUI] Handler 사용하기 (0) | 2022.03.08 |