[C#/MAUI/.NET6] INotifyPropertyChanged 인터페이스 : HSL 색상 뷰 모델 바인딩하기
■ INotifyPropertyChanged 인터페이스를 사용해 HSL 색상 뷰 모델을 바인딩하는 방법을 보여준다. ▶ HSLColorViewModel.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 |
using System.ComponentModel; namespace TestProject; /// <summary> /// HSL 색상 뷰 모델 /// </summary> public class HSLColorViewModel : INotifyPropertyChanged { //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 속성 변경시 - PropertyChanged /// <summary> /// 속성 변경시 /// </summary> public event PropertyChangedEventHandler PropertyChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 색조 /// </summary> private float hue; /// <summary> /// 채도 /// </summary> private float saturation; /// <summary> /// 명도 /// </summary> private float luminosity; /// <summary> /// 색상 /// </summary> private Color color; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 색조 - Hue /// <summary> /// 색조 /// </summary> public float Hue { get { return this.hue; } set { if(this.hue != value) { Color = Color.FromHsla(value, this.saturation, this.luminosity); } } } #endregion #region 채도 - Saturation /// <summary> /// 채도 /// </summary> public float Saturation { get { return this.saturation; } set { if(this.saturation != value) { Color = Color.FromHsla(this.hue, value, this.luminosity); } } } #endregion #region 명도 - Luminosity /// <summary> /// 명도 /// </summary> public float Luminosity { get { return this.luminosity; } set { if(this.luminosity != value) { Color = Color.FromHsla(this.hue, this.saturation, value); } } } #endregion #region 색상 - Color /// <summary> /// 색상 /// </summary> public Color Color { get { return this.color; } set { if(this.color != value) { this.color = value; this.hue = color.GetHue(); this.saturation = color.GetSaturation(); this.luminosity = color.GetLuminosity(); FirePropertyChangedEvent("Hue"); FirePropertyChangedEvent("Saturation"); FirePropertyChangedEvent("Luminosity"); FirePropertyChangedEvent("Color"); } } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Protected #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName) /// <summary> /// 속성 변경시 이벤트 발생시키기 /// </summary> /// <param name="propertyName">속성명</param> protected virtual void FirePropertyChangedEvent(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } #endregion } |
▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?xml version="1.0" encoding="utf-8" ?> <ContentPage x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TestProject"> <ContentPage.BindingContext> <local:HSLColorViewModel Color="Orange" /> </ContentPage.BindingContext> <StackLayout HorizontalOptions="Center" VerticalOptions="Center"> <BoxView HorizontalOptions="Center" WidthRequest="100" HeightRequest="100" Color="{Binding Color}" /> <Label Margin="0,10,0,0" HorizontalOptions="Center" Text="{Binding Hue, StringFormat='색조 = {0:F2}'}" /> <Slider WidthRequest="300" Value="{Binding Hue}" /> <Label Margin="0,10,0,0" HorizontalOptions="Center" Text="{Binding Saturation, StringFormat='채도 = {0:F2}'}" /> <Slider WidthRequest="300" Value="{Binding Saturation}" /> <Label Margin="0,10,0,0" HorizontalOptions="Center" Text="{Binding Luminosity, StringFormat='명도 = {0:F2}'}" /> <Slider WidthRequest="300" Value="{Binding Luminosity}" /> </StackLayout> </ContentPage> |
TestProject.zip
