■ RelativeSource 태그 확장의 Mode 속성을 사용해 자기 자신을 참조하는 방법을 보여준다. ▶ 예제 코드 (XAML)
|
1 2 3 4 5 6 |
<SearchBar Placeholder="Filter" SearchCommandParameter="{Binding Source={RelativeSource Self}, Path=Text}" SearchCommand="{Binding FilterCommand}" /> |
■ IMarkupExtension<T> 인터페이스를 사용해 XAML에서 포함 리소스 이미지를 로드하는 방법을 보여준다. ▶ ImageResourceExtension.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 |
using System.Reflection; using System.Xml; namespace TestProject; /// <summary> /// 이미지 리소스 확장 /// </summary> [ContentProperty("Source")] public class ImageResourceExtension : IMarkupExtension<ImageSource> { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 소스 - Source /// <summary> /// 소스 /// </summary> public string Source { set; get; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 값 제공하기 - ProvideValue(serviceProvider) /// <summary> /// 값 제공하기 /// </summary> /// <param name="serviceProvider">서비스 제공자</param> /// <returns>이미지 소스</returns> /// <exception cref="XamlParseException"></exception> public ImageSource ProvideValue(IServiceProvider serviceProvider) { if(string.IsNullOrEmpty(Source)) { IXmlLineInfoProvider lineInfoProvider = serviceProvider.GetService(typeof(IXmlLineInfoProvider)) as IXmlLineInfoProvider; IXmlLineInfo lineInfo = (lineInfoProvider != null) ? lineInfoProvider.XmlLineInfo : new XmlLineInfo(); throw new XamlParseException("ImageResourceExtension requires Source property to be set", lineInfo); } string assemblyName = GetType().GetTypeInfo().Assembly.GetName().Name; return ImageSource.FromResource($"{assemblyName}.{Source}", typeof(ImageResourceExtension).GetTypeInfo().Assembly); } #endregion #region 값 제공하기 - IMarkupExtension.ProvideValue(serviceProvider) /// <summary> /// 값 제공하기 /// </summary> /// <param name="serviceProvider">서비스 제공자</param> /// <returns>마크업 확장 인터페이스</returns> object IMarkupExtension.ProvideValue(IServiceProvider serviceProvider) { return (this as IMarkupExtension<ImageSource>).ProvideValue(serviceProvider); } #endregion } |
▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 |
<?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"> <Image WidthRequest="300" Source="{local:ImageResource IMAGE.sample.jpg}" /> </ContentPage> |
TestProject.zip
■ x:DataType 속성에서 컴파일된 바인딩과 클래식 바인딩을 함께 사용하는 방법을 보여준다. ▶ NamedColor.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 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 |
using System.Reflection; using System.Text; namespace TestProject; /// <summary> /// 이름있는 색상 /// </summary> public class NamedColor : IEquatable<NamedColor>, IComparable<NamedColor> { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Static //////////////////////////////////////////////////////////////////////////////// Public #region 이름있는 색상 리스트 - NamedColorList /// <summary> /// 이름있는 색상 리스트 /// </summary> public static IList<NamedColor> NamedColorList { private set; get; } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Instance //////////////////////////////////////////////////////////////////////////////// Public #region 명칭 - Name /// <summary> /// 명칭 /// </summary> public string Name { private set; get; } #endregion #region 친숙한 명칭 - FriendlyName /// <summary> /// 친숙한 명칭 /// </summary> public string FriendlyName { private set; get; } #endregion #region 색상 - Color /// <summary> /// 색상 /// </summary> public Color Color { private set; get; } #endregion #region RGB 디스플레이 - RGBDisplay /// <summary> /// RGB 디스플레이 /// </summary> public string RGBDisplay { private set; get; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Static #region 생성자 - NamedColor() /// <summary> /// 생성자 /// </summary> static NamedColor() { List<NamedColor> namedColorList = new List<NamedColor>(); StringBuilder stringBuilder = new StringBuilder(); foreach(FieldInfo fieldInfo in typeof(Colors).GetRuntimeFields()) { if(fieldInfo.IsPublic && fieldInfo.IsStatic && fieldInfo.FieldType == typeof(Color)) { string name = fieldInfo.Name; stringBuilder.Clear(); int index = 0; foreach(char character in name) { if(index != 0 && Char.IsUpper(character)) { stringBuilder.Append(' '); } stringBuilder.Append(character); index++; } Color color = (Color)fieldInfo.GetValue(null); NamedColor namedColor = new NamedColor { Name = name, FriendlyName = stringBuilder.ToString(), Color = color, RGBDisplay = string.Format ( "{0:X2}-{1:X2}-{2:X2}", (int)(255 * color.Red ), (int)(255 * color.Green), (int)(255 * color.Blue ) ) }; namedColorList.Add(namedColor); } } namedColorList.TrimExcess(); namedColorList.Sort(); NamedColorList = namedColorList; } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Instance //////////////////////////////////////////////////////////////////////////////// Private #region 생성자 - NamedColor() /// <summary> /// 생성자 /// </summary> private NamedColor() { } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Static //////////////////////////////////////////////////////////////////////////////// Public #region 찾기 - Find(name) /// <summary> /// 찾기 /// </summary> /// <param name="name">명칭</param> /// <returns>이름있는 색상</returns> public static NamedColor Find(string name) { return ((List<NamedColor>)NamedColorList).Find(nc => nc.Name == name); } #endregion #region 최근접 색상명 구하기 - GetNearestColorName(color) /// <summary> /// 최근접 색상명 구하기 /// </summary> /// <param name="color">색상</param> /// <returns>최근접 색상명</returns> public static string GetNearestColorName(Color color) { double shortestDistance = 1000; NamedColor closestColor = null; foreach(NamedColor namedColor in NamedColor.NamedColorList) { double distance = Math.Sqrt ( Math.Pow(color.Red - namedColor.Color.Red , 2) + Math.Pow(color.Green - namedColor.Color.Green, 2) + Math.Pow(color.Blue - namedColor.Color.Blue , 2) ); if(distance < shortestDistance) { shortestDistance = distance; closestColor = namedColor; } } return closestColor.Name; } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Instance //////////////////////////////////////////////////////////////////////////////// Public #region 동일 여부 구하기 - Equals(other) /// <summary> /// 동일 여부 구하기 /// </summary> /// <param name="other">다른 이름있는 색상</param> /// <returns>동일 여부</returns> public bool Equals(NamedColor other) { return Name.Equals(other.Name); } #endregion #region 비교하기 - CompareTo(other) /// <summary> /// 비교하기 /// </summary> /// <param name="other">다른 이름있는 색상</param> /// <returns>비교 결과</returns> public int CompareTo(NamedColor other) { return Name.CompareTo(other.Name); } #endregion } |
▶ FloatToIntegerConverter.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 |
using System.Globalization; namespace TestProject; /// <summary> /// 단정도 실수↔정수 변환자 /// </summary> public class FloatToIntegerConverter : IValueConverter { //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 변환하기 - Convert(sourceValue, targetType, parameter, cultureInfo) /// <summary> /// 변환하기 /// </summary> /// <param name="sourceValue">소스 값</param> /// <param name="targetType">타겟 타입</param> /// <param name="parameter">매개 변수</param> /// <param name="cultureInfo">문화 정보</param> /// <returns>변환 값</returns> public object Convert(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo) { return (int)Math.Round((float)sourceValue * GetParameter(parameter)); } #endregion #region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, cultureInfo) /// <summary> /// 역변환하기 /// </summary> /// <param name="sourceValue">소스 값</param> /// <param name="targetType">타겟 타입</param> /// <param name="parameter">매개 변수</param> /// <param name="cultureInfo">문화 정보</param> /// <returns>역변환 값</returns> public object ConvertBack(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo) { return (int)sourceValue / GetParameter(parameter); } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Private #region 매개 변수 구하기 - GetParameter(parameter) /// <summary> /// 매개 변수 구하기 /// </summary> /// <param name="parameter">매개 변수</param> /// <returns>매개 변수</returns> private double GetParameter(object parameter) { if(parameter is float) { return (float)parameter; } else if(parameter is int) { return (int)parameter; } else if(parameter is string) { return float.Parse((string)parameter); } return 1; } #endregion } |
▶ RGBColorViewModel.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 |
using System.ComponentModel; namespace TestProject; /// <summary> /// RGB 색상 뷰 모델 /// </summary> public class RGBColorViewModel : INotifyPropertyChanged { //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 속성 변경시 - PropertyChanged /// <summary> /// 속성 변경시 /// </summary> public event PropertyChangedEventHandler PropertyChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 색상 /// </summary> private Color color; /// <summary> /// 명칭 /// </summary> private string name; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 적색 - Red /// <summary> /// 적색 /// </summary> public float Red { get { return this.color.Red; } set { if(this.color.Red != value) { Color = new Color(value, this.color.Green, this.color.Blue); } } } #endregion #region 녹색 - Green /// <summary> /// 녹색 /// </summary> public float Green { get { return this.color.Green; } set { if(this.color.Green != value) { Color = new Color(this.color.Red, value, this.color.Blue); } } } #endregion #region 청색 - Blue /// <summary> /// 청색 /// </summary> public float Blue { get { return this.color.Blue; } set { if(this.color.Blue != value) { Color = new Color(this.color.Red, this.color.Green, value); } } } #endregion #region 색상 - Color /// <summary> /// 색상 /// </summary> public Color Color { get { return this.color; } set { if(this.color != value) { this.color = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Red" )); PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Green")); PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Blue" )); PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Color")); Name = NamedColor.GetNearestColorName(this.color); } } } #endregion #region 명칭 - Name /// <summary> /// 명칭 /// </summary> public string Name { get { return this.name; } private set { if(this.name != value) { this.name = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Name")); } } } #endregion } |
▶ MainPage.xaml
■ x:DataType 속성을 DataTemplate 엘리먼트에서 사용하는 방법을 보여준다. ▶ NamedColor.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 |
using System.Reflection; namespace TestProject; /// <summary> /// 이름있는 색상 /// </summary> public class NamedColor { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Static //////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 이름있는 색상 배열 /// </summary> private static NamedColor[] _namedColorArray; #endregion ////////////////////////////////////////////////////////////////////////////////////////// Instance //////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 명칭 /// </summary> private string name; /// <summary> /// 색상 /// </summary> private Color color; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Static //////////////////////////////////////////////////////////////////////////////// Public #region 이름있는 색상 배열 - NamedColorArray /// <summary> /// 이름있는 색상 배열 /// </summary> public static NamedColor[] NamedColorArray { get { return _namedColorArray; } } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Instance //////////////////////////////////////////////////////////////////////////////// Public #region 명칭 - Name /// <summary> /// 명칭 /// </summary> public string Name { get { string name = this.name[0].ToString(); for(int i = 1; i < this.name.Length; i++) { name += (char.IsUpper(this.name[i]) ? " " : "") + this.name[i].ToString(); } return name; } } #endregion #region 색상 - Color /// <summary> /// 색상 /// </summary> public Color Color { get { return this.color; } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Static #region 생성자 - NamedColor() /// <summary> /// 생성자 /// </summary> static NamedColor() { FieldInfo[] fieldInfoArray = typeof(Colors).GetFields(BindingFlags.Static | BindingFlags.Public); _namedColorArray = new NamedColor[fieldInfoArray.Length]; for(int i = 0; i < fieldInfoArray.Length; i++) { _namedColorArray[i] = new NamedColor ( fieldInfoArray[i].Name, (Color)fieldInfoArray[i].GetValue(null) ); } } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Instance //////////////////////////////////////////////////////////////////////////////// Private #region 생성자 - NamedColor(name, color) /// <summary> /// 생성자 /// </summary> /// <param name="name">명칭</param> /// <param name="color">색상</param> private NamedColor(string name, Color color) { this.name = name; this.color = color; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 문자열 구하기 - ToString() /// <summary> /// 문자열 구하기 /// </summary> /// <returns>문자열</returns> public override string ToString() { return this.name; } #endregion } |
▶ ColorToStringConverter.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 |
using System.Globalization; namespace TestProject; /// <summary> /// 색상→문자열 변환자 /// </summary> public class ColorToStringConverter : IValueConverter { //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 변환하기 - (sourceValue, targetType, parameter, cultureInfo) /// <summary> /// 변환하기 /// </summary> /// <param name="sourceValue">소스 값</param> /// <param name="targetType">타겟 타입</param> /// <param name="parameter">매개 변수</param> /// <param name="cultureInfo">문화 정보</param> /// <returns>변환 값</returns> public object Convert(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo) { Color color = sourceValue as Color; if(color == null) { return null; } int alpha = (int)Math.Round(255 * color.Alpha); int red = (int)Math.Round(255 * color.Red ); int green = (int)Math.Round(255 * color.Green); int blue = (int)Math.Round(255 * color.Blue ); return $"{alpha:X2}:{red:X2}:{green:X2}:{blue:X2}"; } #endregion #region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, cultureInfo) /// <summary> /// 역변환하기 /// </summary> /// <param name="sourceValue">소스 값</param> /// <param name="targetType">타겟 타입</param> /// <param name="parameter">매개 변수</param> /// <param name="cultureInfo">문화 정보</param> /// <returns>역변환 값</returns> /// <exception cref="NotImplementedException">미구현 예외</exception> public object ConvertBack(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo) { throw new NotImplementedException(); } #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 42 |
<?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.Resources> <x:Double x:Key="BoxSizeKey">50</x:Double> <x:Int32 x:Key="RowHeightKey">60</x:Int32> <local:ColorToStringConverter x:Key="ColorToStringConverterKey" /> </ContentPage.Resources> <ListView RowHeight="{StaticResource RowHeightKey}" ItemsSource="{x:Static local:NamedColor.NamedColorArray}"> <ListView.ItemTemplate> <DataTemplate x:DataType="local:NamedColor"> <ViewCell> <StackLayout Orientation="Horizontal" Padding="5,5,0,5" Spacing="15"> <BoxView WidthRequest="{StaticResource BoxSizeKey}" HeightRequest="{StaticResource BoxSizeKey}" Color="{Binding Color}" /> <StackLayout VerticalOptions="Center" Padding="5,0,0,0"> <Label FontSize="Medium" FontAttributes="Bold" Text="{Binding Name}" /> <Label Text="{Binding Color, Converter={StaticResource ColorToStringConverterKey}}" /> </StackLayout> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </ContentPage> |
TestProject.zip
■ x:DataType 속성에서 컴파일된 바인딩을 사용하는 방법을 보여준다. ▶ NamedColor.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 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 |
using System.Reflection; using System.Text; namespace TestProject; /// <summary> /// 이름있는 색상 /// </summary> public class NamedColor : IEquatable<NamedColor>, IComparable<NamedColor> { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Static //////////////////////////////////////////////////////////////////////////////// Public #region 이름있는 색상 리스트 - NamedColorList /// <summary> /// 이름있는 색상 리스트 /// </summary> public static IList<NamedColor> NamedColorList { private set; get; } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Instance //////////////////////////////////////////////////////////////////////////////// Public #region 명칭 - Name /// <summary> /// 명칭 /// </summary> public string Name { private set; get; } #endregion #region 친숙한 명칭 - FriendlyName /// <summary> /// 친숙한 명칭 /// </summary> public string FriendlyName { private set; get; } #endregion #region 색상 - Color /// <summary> /// 색상 /// </summary> public Color Color { private set; get; } #endregion #region RGB 디스플레이 - RGBDisplay /// <summary> /// RGB 디스플레이 /// </summary> public string RGBDisplay { private set; get; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Static #region 생성자 - NamedColor() /// <summary> /// 생성자 /// </summary> static NamedColor() { List<NamedColor> namedColorList = new List<NamedColor>(); StringBuilder stringBuilder = new StringBuilder(); foreach(FieldInfo fieldInfo in typeof(Colors).GetRuntimeFields()) { if(fieldInfo.IsPublic && fieldInfo.IsStatic && fieldInfo.FieldType == typeof(Color)) { string name = fieldInfo.Name; stringBuilder.Clear(); int index = 0; foreach(char character in name) { if(index != 0 && Char.IsUpper(character)) { stringBuilder.Append(' '); } stringBuilder.Append(character); index++; } Color color = (Color)fieldInfo.GetValue(null); NamedColor namedColor = new NamedColor { Name = name, FriendlyName = stringBuilder.ToString(), Color = color, RGBDisplay = string.Format ( "{0:X2}-{1:X2}-{2:X2}", (int)(255 * color.Red ), (int)(255 * color.Green), (int)(255 * color.Blue ) ) }; namedColorList.Add(namedColor); } } namedColorList.TrimExcess(); namedColorList.Sort(); NamedColorList = namedColorList; } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Instance //////////////////////////////////////////////////////////////////////////////// Private #region 생성자 - NamedColor() /// <summary> /// 생성자 /// </summary> private NamedColor() { } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Static //////////////////////////////////////////////////////////////////////////////// Public #region 찾기 - Find(name) /// <summary> /// 찾기 /// </summary> /// <param name="name">명칭</param> /// <returns>이름있는 색상</returns> public static NamedColor Find(string name) { return ((List<NamedColor>)NamedColorList).Find(nc => nc.Name == name); } #endregion #region 최근접 색상명 구하기 - GetNearestColorName(color) /// <summary> /// 최근접 색상명 구하기 /// </summary> /// <param name="color">색상</param> /// <returns>최근접 색상명</returns> public static string GetNearestColorName(Color color) { double shortestDistance = 1000; NamedColor closestColor = null; foreach(NamedColor namedColor in NamedColor.NamedColorList) { double distance = Math.Sqrt ( Math.Pow(color.Red - namedColor.Color.Red , 2) + Math.Pow(color.Green - namedColor.Color.Green, 2) + Math.Pow(color.Blue - namedColor.Color.Blue , 2) ); if(distance < shortestDistance) { shortestDistance = distance; closestColor = namedColor; } } return closestColor.Name; } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Instance //////////////////////////////////////////////////////////////////////////////// Public #region 동일 여부 구하기 - Equals(other) /// <summary> /// 동일 여부 구하기 /// </summary> /// <param name="other">다른 이름있는 색상</param> /// <returns>동일 여부</returns> public bool Equals(NamedColor other) { return Name.Equals(other.Name); } #endregion #region 비교하기 - CompareTo(other) /// <summary> /// 비교하기 /// </summary> /// <param name="other">다른 이름있는 색상</param> /// <returns>비교 결과</returns> public int CompareTo(NamedColor other) { return Name.CompareTo(other.Name); } #endregion } |
▶ FloatToIntegerConverter.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 |
using System.Globalization; namespace TestProject; /// <summary> /// 단정도 실수↔정수 변환자 /// </summary> public class FloatToIntegerConverter : IValueConverter { //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 변환하기 - Convert(sourceValue, targetType, parameter, cultureInfo) /// <summary> /// 변환하기 /// </summary> /// <param name="sourceValue">소스 값</param> /// <param name="targetType">타겟 타입</param> /// <param name="parameter">매개 변수</param> /// <param name="cultureInfo">문화 정보</param> /// <returns>변환 값</returns> public object Convert(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo) { return (int)Math.Round((float)sourceValue * GetParameter(parameter)); } #endregion #region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, cultureInfo) /// <summary> /// 역변환하기 /// </summary> /// <param name="sourceValue">소스 값</param> /// <param name="targetType">타겟 타입</param> /// <param name="parameter">매개 변수</param> /// <param name="cultureInfo">문화 정보</param> /// <returns>역변환 값</returns> public object ConvertBack(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo) { return (int)sourceValue / GetParameter(parameter); } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Private #region 매개 변수 구하기 - GetParameter(parameter) /// <summary> /// 매개 변수 구하기 /// </summary> /// <param name="parameter">매개 변수</param> /// <returns>매개 변수</returns> private double GetParameter(object parameter) { if(parameter is float) { return (float)parameter; } else if(parameter is int) { return (int)parameter; } else if(parameter is string) { return float.Parse((string)parameter); } return 1; } #endregion } |
▶ RGBColorViewModel.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 |
using System.ComponentModel; namespace TestProject; /// <summary> /// RGB 색상 뷰 모델 /// </summary> public class RGBColorViewModel : INotifyPropertyChanged { //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 속성 변경시 - PropertyChanged /// <summary> /// 속성 변경시 /// </summary> public event PropertyChangedEventHandler PropertyChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 색상 /// </summary> private Color color; /// <summary> /// 명칭 /// </summary> private string name; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 적색 - Red /// <summary> /// 적색 /// </summary> public float Red { get { return this.color.Red; } set { if(this.color.Red != value) { Color = new Color(value, this.color.Green, this.color.Blue); } } } #endregion #region 녹색 - Green /// <summary> /// 녹색 /// </summary> public float Green { get { return this.color.Green; } set { if(this.color.Green != value) { Color = new Color(this.color.Red, value, this.color.Blue); } } } #endregion #region 청색 - Blue /// <summary> /// 청색 /// </summary> public float Blue { get { return this.color.Blue; } set { if(this.color.Blue != value) { Color = new Color(this.color.Red, this.color.Green, value); } } } #endregion #region 색상 - Color /// <summary> /// 색상 /// </summary> public Color Color { get { return this.color; } set { if(this.color != value) { this.color = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Red" )); PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Green")); PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Blue" )); PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Color")); Name = NamedColor.GetNearestColorName(this.color); } } } #endregion #region 명칭 - Name /// <summary> /// 명칭 /// </summary> public string Name { get { return this.name; } private set { if(this.name != value) { this.name = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Name")); } } } #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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<?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" x:DataType="local:RGBColorViewModel"> <ContentPage.BindingContext> <local:RGBColorViewModel Color="Orange" /> </ContentPage.BindingContext> <ContentPage.Resources> <Style TargetType="Slider"> <Setter Property="VerticalOptions" Value="Center" /> </Style> <Style TargetType="Label"> <Setter Property="HorizontalTextAlignment" Value="Center" /> </Style> <local:FloatToIntegerConverter x:Key="FloatToIntegerConverterKey" /> </ContentPage.Resources> <StackLayout HorizontalOptions="Center" VerticalOptions="Center"> <BoxView Color="{Binding Color}" HeightRequest="300" WidthRequest="300" HorizontalOptions="Center" /> <StackLayout Margin="0,10,0,0"> <Label Text="{Binding Name}" /> <Slider Margin="0,30,0,0" Value="{Binding Red}" /> <Label Text="{Binding Red, Converter={StaticResource FloatToIntegerConverterKey}, ConverterParameter=255, StringFormat='적색 : {0:X2}'}" /> <Slider Margin="0,10,0,0" Value="{Binding Green}" /> <Label Text="{Binding Green, Converter={StaticResource FloatToIntegerConverterKey}, ConverterParameter=255, StringFormat='녹색 : {0:X2}'}" /> <Slider Margin="0,10,0,0" Value="{Binding Blue}" /> <Label> <Label.Text> <Binding Path="Blue" StringFormat="청색 : {0:X2}" Converter="{StaticResource FloatToIntegerConverterKey}"> <Binding.ConverterParameter> <x:Single>255</x:Single> </Binding.ConverterParameter> </Binding> </Label.Text> </Label> </StackLayout> </StackLayout> </ContentPage> |
TestProject.zip
■ Binding 태그 확장의 TargetNullValue 속성을 사용해 NULL 바인딩시 대체 값을 설정하는 방법을 보여준다. ▶ Employee.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 |
using System.ComponentModel; namespace TestProject; /// <summary> /// 직원 /// </summary> public class Employee : INotifyPropertyChanged { //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 속성 변경시 이벤트 - PropertyChanged /// <summary> /// 속성 변경시 이벤트 /// </summary> public event PropertyChangedEventHandler PropertyChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// ID /// </summary> private int id; /// <summary> /// 성명 /// </summary> private string name; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region ID - ID /// <summary> /// ID /// </summary> public int ID { get { return this.id; } set { if(this.id == value) { return; } this.id = value; FirePropertyChangedEvent(nameof(ID)); } } #endregion #region 성명 - Name /// <summary> /// 성명 /// </summary> public string Name { get { return this.name; } set { if(this.name == value) { return; } this.name = value; FirePropertyChangedEvent(nameof(Name)); } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Protected #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName) /// <summary> /// 속성 변경시 이벤트 발생시키기 /// </summary> /// <param name="propertyName">속성명</param> protected 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 |
<?xml version="1.0" encoding="utf-8" ?> <ContentPage x:Class="TestProject.MainPage" x:Name="page" 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:Employee ID="1" Name="{x:Null}" /> </ContentPage.BindingContext> <Grid HorizontalOptions="Center" VerticalOptions="Center"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="10" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" Text="ID" /> <Label Grid.Row="0" Grid.Column="2" Text="{Binding ID}" /> <Label Grid.Row="2" Grid.Column="0" Text="성명" /> <Label Grid.Row="2" Grid.Column="2" Text="{Binding Name, TargetNullValue=무명인}" /> </Grid> </ContentPage> |
TestProject.zip
■ Binding 태그 확장의 FallbackValue 속성을 사용해 바인딩 오류시 대체 값을 설정하는 방법을 보여준다. ▶ 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 |
<?xml version="1.0" encoding="utf-8" ?> <ContentPage x:Class="TestProject.MainPage" x:Name="page" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TestProject"> <Grid HorizontalOptions="Center" VerticalOptions="Center"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="10" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" Text="ID" /> <Label Grid.Row="0" Grid.Column="2" Text="{Binding ID, FallbackValue=(NULL)}" /> <Label Grid.Row="2" Grid.Column="0" Text="성명" /> <Label Grid.Row="2" Grid.Column="2" Text="{Binding Name, FallbackValue=(NULL)}" /> </Grid> </ContentPage> |
TestProject.zip
■ RelativeSource 태그 확장의 Mode 속성을 사용해 조상 엘리먼트를 참조하는 방법을 보여준다. ▶ Employee.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 |
using System.ComponentModel; namespace TestProject; /// <summary> /// 직원 /// </summary> public class Employee : INotifyPropertyChanged { //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 속성 변경시 이벤트 - PropertyChanged /// <summary> /// 속성 변경시 이벤트 /// </summary> public event PropertyChangedEventHandler PropertyChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// ID /// </summary> private int id; /// <summary> /// 성명 /// </summary> private string name; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region ID - ID /// <summary> /// ID /// </summary> public int ID { get { return this.id; } set { if(this.id == value) { return; } this.id = value; FirePropertyChangedEvent(nameof(ID)); } } #endregion #region 성명 - Name /// <summary> /// 성명 /// </summary> public string Name { get { return this.name; } set { if(this.name == value) { return; } this.name = value; FirePropertyChangedEvent(nameof(Name)); } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Protected #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName) /// <summary> /// 속성 변경시 이벤트 발생시키기 /// </summary> /// <param name="propertyName">속성명</param> protected 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 |
<?xml version="1.0" encoding="utf-8" ?> <ContentPage x:Class="TestProject.MainPage" x:Name="page" 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:Employee ID="1" Name="홍길동" /> </ContentPage.BindingContext> <Grid HorizontalOptions="Center" VerticalOptions="Center"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="10" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" Text="ID" /> <Label Grid.Row="0" Grid.Column="2" Text="{Binding Source={x:RelativeSource Mode=FindAncestor, AncestorType={x:Type ContentPage}}, Path=BindingContext.ID}" /> <Label Grid.Row="2" Grid.Column="0" Text="성명" /> <Label Grid.Row="2" Grid.Column="2" Text="{Binding Source={x:RelativeSource Mode=FindAncestor, AncestorType={x:Type ContentPage}}, Path=BindingContext.Name}" /> </Grid> </ContentPage> |
TestProject.zip
■ Binding 태그 확장의 Converter 속성에서 정수↔진리 값 변환자를 사용하는 방법을 보여준다. ▶ IntegerToBooleanConverter.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 |
using System.Globalization; namespace TestProject; /// <summary> /// 정수↔진리 값 변환자 /// </summary> public class IntegerToBooleanConverter : IValueConverter { //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 변환하기 - Convert(sourceValue, targetType, parameter, cultureInfo) /// <summary> /// 변환하기 /// </summary> /// <param name="sourceValue">소스 값</param> /// <param name="targetType">타겟 타입</param> /// <param name="parameter">매개 변수</param> /// <param name="cultureInfo">문화 정보</param> /// <returns>변환 값</returns> public object Convert(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo) { return (int)sourceValue != 0; } #endregion #region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, cultureInfo) /// <summary> /// 역변환하기 /// </summary> /// <param name="sourceValue">소스 값</param> /// <param name="targetType">타겟 타입</param> /// <param name="parameter">매개 변수</param> /// <param name="cultureInfo">문화 정보</param> /// <returns>역변환 값</returns> public object ConvertBack(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo) { return (bool)sourceValue ? 1 : 0; } #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 |
<?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.Resources> <local:IntegerToBooleanConverter x:Key="IntegerToBooleanConverterKey" /> </ContentPage.Resources> <StackLayout HorizontalOptions="Center" VerticalOptions="Center"> <Entry x:Name="entry1" HorizontalOptions="Center" Placeholder="enter search term" Text="" /> <Button Margin="0,10,0,0" HorizontalOptions="Center" Text="Search" IsEnabled="{Binding Source={x:Reference entry1}, Path=Text.Length, Converter={StaticResource IntegerToBooleanConverterKey}}" /> <Entry x:Name="entry2" Margin="0,10,0,0" HorizontalOptions="Center" Placeholder="enter destination" Text="" /> <Button Margin="0,10,0,0" HorizontalOptions="Center" Text="Submit" IsEnabled="{Binding Source={x:Reference entry2}, Path=Text.Length, Converter={StaticResource IntegerToBooleanConverterKey}}" /> </StackLayout> </ContentPage> |
TestProject.zip
■ Binding 태그 확장의 Path 속성에서 바인딩 경로를 사용하는 방법을 보여준다. ▶ 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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<?xml version="1.0" encoding="utf-8" ?> <ContentPage x:Class="TestProject.MainPage" x:Name="page" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:globe="clr-namespace:System.Globalization;assembly=netstandard"> <ContentPage.Resources> <Style TargetType="Label"> <Setter Property="FontSize" Value="Large" /> <Setter Property="HorizontalTextAlignment" Value="Center" /> <Setter Property="VerticalOptions" Value="Center" /> </Style> </ContentPage.Resources> <StackLayout Margin="10" HorizontalOptions="Center" VerticalOptions="Center"> <TimePicker x:Name="timePicker" /> <Label Margin="0,10,0,0" Text="{Binding Source={x:Reference timePicker}, Path=Time.TotalSeconds, StringFormat='전체 초 수 : {0}'}" /> <Label Margin="0,10,0,0" Text="{Binding Source={x:Reference page}, Path=Content.Children.Count, StringFormat='StackLayout 자식 수 : {0}'}" /> <Label Margin="0,10,0,0" Text="{Binding Source={x:Static globe:CultureInfo.CurrentCulture}, Path=DateTimeFormat.DayNames[3], StringFormat='주중 요일 : {0}'}" /> <Label Margin="0,10,0,0"> <Label.Text> <Binding Path="DateTimeFormat.DayNames[3]" StringFormat="프랑스에서 주중 요일 : {0}"> <Binding.Source> <globe:CultureInfo> <x:Arguments> <x:String>fr-FR</x:String> </x:Arguments> </globe:CultureInfo> </Binding.Source> </Binding> </Label.Text> </Label> <Label Margin="0,10,0,0" Text="{Binding Source={x:Reference page}, Path=Content.Children[1].Text.Length, StringFormat='두 번째 Label 문자 수 : {0}'}" /> </StackLayout> </ContentPage> |
TestProject.zip
■ Binding 태그 확장의 StringFormat 속성에서 포맷 문자열을 사용하는 방법을 보여준다. ▶ NamedColor.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 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 |
using System.Reflection; using System.Text; namespace TestProject; /// <summary> /// 이름있는 색상 /// </summary> public class NamedColor : IEquatable<NamedColor>, IComparable<NamedColor> { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Static //////////////////////////////////////////////////////////////////////////////// Public #region 이름있는 색상 리스트 - NamedColorList /// <summary> /// 이름있는 색상 리스트 /// </summary> public static IList<NamedColor> NamedColorList { private set; get; } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Instance //////////////////////////////////////////////////////////////////////////////// Public #region 명칭 - Name /// <summary> /// 명칭 /// </summary> public string Name { private set; get; } #endregion #region 친숙한 명칭 - FriendlyName /// <summary> /// 친숙한 명칭 /// </summary> public string FriendlyName { private set; get; } #endregion #region 색상 - Color /// <summary> /// 색상 /// </summary> public Color Color { private set; get; } #endregion #region RGB 디스플레이 - RGBDisplay /// <summary> /// RGB 디스플레이 /// </summary> public string RGBDisplay { private set; get; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Static #region 생성자 - NamedColor() /// <summary> /// 생성자 /// </summary> static NamedColor() { List<NamedColor> namedColorList = new List<NamedColor>(); StringBuilder stringBuilder = new StringBuilder(); foreach(FieldInfo fieldInfo in typeof(Colors).GetRuntimeFields()) { if(fieldInfo.IsPublic && fieldInfo.IsStatic && fieldInfo.FieldType == typeof(Color)) { string name = fieldInfo.Name; stringBuilder.Clear(); int index = 0; foreach(char character in name) { if(index != 0 && Char.IsUpper(character)) { stringBuilder.Append(' '); } stringBuilder.Append(character); index++; } Color color = (Color)fieldInfo.GetValue(null); NamedColor namedColor = new NamedColor { Name = name, FriendlyName = stringBuilder.ToString(), Color = color, RGBDisplay = string.Format ( "{0:X2}-{1:X2}-{2:X2}", (int)(255 * color.Red ), (int)(255 * color.Green), (int)(255 * color.Blue ) ) }; namedColorList.Add(namedColor); } } namedColorList.TrimExcess(); namedColorList.Sort(); NamedColorList = namedColorList; } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Instance //////////////////////////////////////////////////////////////////////////////// Private #region 생성자 - NamedColor() /// <summary> /// 생성자 /// </summary> private NamedColor() { } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Static //////////////////////////////////////////////////////////////////////////////// Public #region 찾기 - Find(name) /// <summary> /// 찾기 /// </summary> /// <param name="name">명칭</param> /// <returns>이름있는 색상</returns> public static NamedColor Find(string name) { return ((List<NamedColor>)NamedColorList).Find(nc => nc.Name == name); } #endregion #region 최근접 색상명 구하기 - GetNearestColorName(color) /// <summary> /// 최근접 색상명 구하기 /// </summary> /// <param name="color">색상</param> /// <returns>최근접 색상명</returns> public static string GetNearestColorName(Color color) { double shortestDistance = 1000; NamedColor closestColor = null; foreach(NamedColor namedColor in NamedColor.NamedColorList) { double distance = Math.Sqrt ( Math.Pow(color.Red - namedColor.Color.Red , 2) + Math.Pow(color.Green - namedColor.Color.Green, 2) + Math.Pow(color.Blue - namedColor.Color.Blue , 2) ); if(distance < shortestDistance) { shortestDistance = distance; closestColor = namedColor; } } return closestColor.Name; } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Instance //////////////////////////////////////////////////////////////////////////////// Public #region 동일 여부 구하기 - Equals(other) /// <summary> /// 동일 여부 구하기 /// </summary> /// <param name="other">다른 이름있는 색상</param> /// <returns>동일 여부</returns> public bool Equals(NamedColor other) { return Name.Equals(other.Name); } #endregion #region 비교하기 - CompareTo(other) /// <summary> /// 비교하기 /// </summary> /// <param name="other">다른 이름있는 색상</param> /// <returns>비교 결과</returns> public int CompareTo(NamedColor other) { return Name.CompareTo(other.Name); } #endregion } |
▶ 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 165 166 167 168 169 170 171 172 173 174 175 176 177 178 |
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 Color color; /// <summary> /// 명칭 /// </summary> private string name; /// <summary> /// 색조 /// </summary> private float hue; /// <summary> /// 채도 /// </summary> private float saturation; /// <summary> /// 명도 /// </summary> private float luminosity; #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(); PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Hue" )); PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Saturation")); PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Luminosity")); PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Color" )); Name = NamedColor.GetNearestColorName(this.color); } } } #endregion #region 명칭 - Name /// <summary> /// 명칭 /// </summary> public string Name { get { return this.name; } private set { if(this.name != value) { this.name = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Name")); } } } #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 42 43 44 45 46 |
<?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="Sienna" /> </ContentPage.BindingContext> <ContentPage.Resources> <ResourceDictionary> <Style TargetType="Slider"> <Setter Property="VerticalOptions" Value="Center" /> </Style> <Style TargetType="Label"> <Setter Property="HorizontalTextAlignment" Value="Center" /> </Style> </ResourceDictionary> </ContentPage.Resources> <StackLayout HorizontalOptions="Center" VerticalOptions="Center"> <BoxView HorizontalOptions="Center" WidthRequest="300" HeightRequest="300" Color="{Binding Color}" /> <StackLayout Margin="0,10,0,0"> <Label Text="{Binding Name}" /> <Slider Margin="0,30,0,0" Value="{Binding Hue}" /> <Label Text="{Binding Hue, StringFormat='색조 : {0:F2}'}" /> <Slider Margin="0,10,0,0" Value="{Binding Saturation}" /> <Label Text="{Binding Saturation, StringFormat='채도 : {0:F2}'}" /> <Slider Margin="0,10,0,0" Value="{Binding Luminosity}" /> <Label Text="{Binding Luminosity, StringFormat='명도 : {0:F2}'}" /> </StackLayout> </StackLayout> </ContentPage> |
TestProject.zip
■ x:TypeArguments 속성에서 제네릭 타입 인자를 사용하는 방법을 보여준다. ▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?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"> <Grid> <Grid.Margin> <OnPlatform x:TypeArguments="Thickness"> <On Platform="iOS" Value="20" /> <On Platform="Android" Value="10" /> </OnPlatform> </Grid.Margin> <BoxView Color="Blue" /> </Grid> </ContentPage> |
TestProject.zip
■ x:FactoryMethod 속성에서 팩토리 메소드를 호출하는 방법을 보여준다. ▶ 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 42 43 44 45 46 47 48 49 50 51 52 53 |
<?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"> <StackLayout HorizontalOptions="Center" VerticalOptions="Center"> <BoxView HeightRequest="150" WidthRequest="150" HorizontalOptions="Center"> <BoxView.Color> <Color x:FactoryMethod="FromRgba"> <x:Arguments> <x:Byte>192</x:Byte> <x:Byte>75</x:Byte> <x:Byte>150</x:Byte> <x:Byte>128</x:Byte> </x:Arguments> </Color> </BoxView.Color> </BoxView> <BoxView HeightRequest="150" WidthRequest="150" HorizontalOptions="Center"> <BoxView.Color> <Color x:FactoryMethod="FromHsla"> <x:Arguments> <x:Double>0.23</x:Double> <x:Double>0.42</x:Double> <x:Double>0.69</x:Double> <x:Double>0.7</x:Double> </x:Arguments> </Color> </BoxView.Color> </BoxView> <BoxView HeightRequest="150" WidthRequest="150" HorizontalOptions="Center"> <BoxView.Color> <Color x:FactoryMethod="FromHex"> <x:Arguments> <x:String>#FF048B9A</x:String> </x:Arguments> </Color> </BoxView.Color> </BoxView> </StackLayout> </ContentPage> |
TestProject.zip
■ x:Arguments 엘리먼트에서 생성자 인수를 전달하는 방법을 보여준다. ▶ 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 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<?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"> <StackLayout HorizontalOptions="Center" VerticalOptions="Center"> <BoxView HeightRequest="150" WidthRequest="150" HorizontalOptions="Center"> <BoxView.Color> <Color> <x:Arguments> <x:Single>0.9</x:Single> </x:Arguments> </Color> </BoxView.Color> </BoxView> <BoxView Margin="0,10,0,0" HeightRequest="150" WidthRequest="150" HorizontalOptions="Center"> <BoxView.Color> <Color> <x:Arguments> <x:Single>0.25</x:Single> <x:Single>0.5</x:Single> <x:Single>0.75</x:Single> </x:Arguments> </Color> </BoxView.Color> </BoxView> <BoxView Margin="0,10,0,0" HeightRequest="150" WidthRequest="150" HorizontalOptions="Center"> <BoxView.Color> <Color> <x:Arguments> <x:Single>0.8</x:Single> <x:Single>0.5</x:Single> <x:Single>0.2</x:Single> <x:Single>0.5</x:Single> </x:Arguments> </Color> </BoxView.Color> </BoxView> </StackLayout> </ContentPage> |
TestProject.zip
■ IMarkupExtension<T> 인터페이스에서 커스텀 마크업 확장을 사용하는 방법을 보여준다. ▶ HSLColorExtension.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 |
namespace TestProject; /// <summary> /// HSL 색상 확장 /// </summary> public class HSLColorExtension : IMarkupExtension<Color> { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region H - H /// <summary> /// H /// </summary> public float H { get; set; } #endregion #region S - S /// <summary> /// S /// </summary> public float S { get; set; } #endregion #region L - L /// <summary> /// L /// </summary> public float L { get; set; } #endregion #region A - A /// <summary> /// A /// </summary> public float A { get; set; } = 1.0f; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 값 제공하기 - ProvideValue(serviceProvider) /// <summary> /// 값 제공하기 /// </summary> /// <param name="serviceProvider">서비스 제공자</param> /// <returns>값</returns> public Color ProvideValue(IServiceProvider serviceProvider) { return Color.FromHsla(H, S, L, A); } #endregion #region 값 제공하기 - IMarkupExtension.ProvideValue(serviceProvider) /// <summary> /// 값 제공하기 /// </summary> /// <param name="serviceProvider">서비스 제공자</param> /// <returns>값</returns> object IMarkupExtension.ProvideValue(IServiceProvider serviceProvider) { return (this as IMarkupExtension<Color>).ProvideValue(serviceProvider); } #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 |
<?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.Resources> <Style TargetType="BoxView"> <Setter Property="HorizontalOptions" Value="Center" /> <Setter Property="VerticalOptions" Value="Center" /> <Setter Property="WidthRequest" Value="80" /> <Setter Property="HeightRequest" Value="80" /> </Style> </ContentPage.Resources> <StackLayout HorizontalOptions="Center" VerticalOptions="Center"> <BoxView> <BoxView.Color> <local:HSLColorExtension H="0" S="1" L="0.5" A="1" /> </BoxView.Color> </BoxView> <BoxView Margin="0,10,0,0"> <BoxView.Color> <local:HSLColor H="0.33" S="1" L="0.5" /> </BoxView.Color> </BoxView> <BoxView Margin="0,10,0,0" Color="{local:HSLColorExtension H=0.67, S=1, L=0.5}" /> <BoxView Margin="0,10,0,0" Color="{local:HSLColor H=0, S=0, L=0.5}" /> <BoxView Margin="0,10,0,0" Color="{local:HSLColor A=0.5}" /> </StackLayout> </ContentPage> |
TestProject.zip
■ x:Type 태그 확장를 사용하는 방법을 보여준다. ▶ 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 |
<?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"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <StackLayout Grid.Row="0" Margin="10" HorizontalOptions="Center"> <Button HorizontalOptions="Center" Text="Slider 객체 생성" CommandParameter="{x:Type Slider}" Command="{Binding CreateCommand}" /> <Button Margin="0,10,0,0" HorizontalOptions="Center" Text="Stepper 객체 생성" CommandParameter="{x:Type Stepper}" Command="{Binding CreateCommand}" /> <Button Margin="0,10,0,0" HorizontalOptions="Center" Text="Switch 객체 생성" CommandParameter="{x:Type Switch}" Command="{Binding CreateCommand}" /> </StackLayout> <ScrollView Grid.Row="1"> <StackLayout x:Name="stackLayout" /> </ScrollView> </Grid> </ContentPage> |
▶ MainPage.xaml.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 |
using System.Windows.Input; namespace TestProject; /// <summary> /// 메인 페이지 /// </summary> public partial class MainPage : ContentPage { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성 명령 - CreateCommand /// <summary> /// 생성 명령 /// </summary> public ICommand CreateCommand { get; private set; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); CreateCommand = new Command<Type> ( (Type viewType) => { View view = (View)Activator.CreateInstance(viewType); view.Margin = new Thickness(10); view.HorizontalOptions = LayoutOptions.Fill; this.stackLayout.Add(view); } ); BindingContext = this; } #endregion } |
TestProject.zip
■ AppThemeBinding 태그 확장를 사용하는 방법을 보여준다. ▶ 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 |
<?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"> <ContentPage.Resources> <Style x:Key="LabelStyleKey" TargetType="Label"> <Setter Property="TextColor" Value="{AppThemeBinding Black, Light=Blue, Dark=Teal}" /> </Style> </ContentPage.Resources> <StackLayout Margin="10" HorizontalOptions="Center" VerticalOptions="Center"> <Label HorizontalOptions="Center" TextColor="{AppThemeBinding Light=Green, Dark=Red}" Text="This text is green in light mode, and red in dark mode." /> <Label Style="{StaticResource LabelStyleKey}" Margin="0,50,0,0" HorizontalOptions="Center" Text="This text is black by default, blue in light mode, and teal in dark mode." /> </StackLayout> </ContentPage> |
TestProject.zip
■ FontImage 태그 확장을 사용하는 방법을 보여준다. ▶ MauiProgram.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 |
namespace TestProject; /// <summary> /// MAUI 프로그램 /// </summary> public static class MauiProgram { //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region MAUI 앱 생성하기 - CreateMauiApp() /// <summary> /// MAUI 앱 생성하기 /// </summary> /// <returns>MAUI 앱</returns> public static MauiApp CreateMauiApp() { MauiAppBuilder builder = MauiApp.CreateBuilder(); builder.UseMauiApp<App>() .ConfigureFonts ( fontCollection => { fontCollection.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); fontCollection.AddFont("ionicons.ttf" , "ionicons" ); } ); return builder.Build(); } #endregion } |
▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?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"> <Image HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="#D1D1D1" Source="{FontImage , FontFamily=ionicons, Size=44}" /> </ContentPage> |
TestProject.zip
■ DataTemplate 태그 확장을 사용하는 기본적인 방법을 보여준다. ▶ 예제 코드 (XAML)
|
1 2 3 4 5 6 |
<ShellContent Title="Monkeys" Icon="monkey.png" ContentTemplate="{DataTemplate local:MonkeysPage}" /> |
■ OnIdiom 태그 확장을 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)
|
1 2 3 4 5 6 7 8 |
<BoxView HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}" HeightRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}" Color="{OnIdiom Yellow, Phone=Red, Tablet=Green, Desktop=Blue}" /> |
■ OnPlatform 태그 확장을 사용해 double 값을 설정하는 방법을 보여준다. ▶ 예제 코드 (XAML)
|
1 2 3 4 5 6 7 8 |
<BoxView HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="{OnPlatform 250, iOS=200, Android=300}" HeightRequest="{OnPlatform 250, iOS=200, Android=300}" Color="{OnPlatform Yellow, iOS=Red, Android=Green}" /> |
■ x:Null 태그 확장을 사용하는 방법을 보여준다. ▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?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"> <ContentPage.Resources> <Style TargetType="Label"> <Setter Property="FontFamily" Value="OpenSansRegular" /> <Setter Property="FontSize" Value="48" /> </Style> </ContentPage.Resources> <StackLayout HorizontalOptions="Center" VerticalOptions="Center"> <Label Text="Text A" /> <Label Text="Text B" /> <Label Text="Text C" FontFamily="{x:Null}" /> <Label Text="Text D" /> <Label Text="Text E" /> </StackLayout> </ContentPage> |
TestProject.zip
■ x:Array 엘리먼트에서 색상 배열을 사용하는 방법을 보여준다. ▶ 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 |
<?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"> <ListView Margin="10"> <ListView.ItemsSource> <x:Array Type="{x:Type Color}"> <Color>Aqua</Color> <Color>Black</Color> <Color>Blue</Color> <Color>Fuchsia</Color> <Color>Gray</Color> <Color>Green</Color> <Color>Lime</Color> <Color>Maroon</Color> <Color>Navy</Color> <Color>Olive</Color> <Color>Pink</Color> <Color>Purple</Color> <Color>Red</Color> <Color>Silver</Color> <Color>Teal</Color> <Color>White</Color> <Color>Yellow</Color> </x:Array> </ListView.ItemsSource> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <BoxView Margin="3" Color="{Binding}" /> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </ContentPage> |
TestProject.zip
■ x:Reference 태그 확장을 사용하는 방법을 보여준다. ▶ 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 |
<?xml version="1.0" encoding="utf-8" ?> <ContentPage x:Class="TestProject.MainPage" x:Name="page" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"> <StackLayout HorizontalOptions="Center" VerticalOptions="Center"> <Label HorizontalTextAlignment="Center" FontSize="18" Text="{Binding Source={x:Reference page}, StringFormat='페이지 타입 : {0}'}" /> <Slider x:Name="slider" Margin="0,10,0,0" VerticalOptions="Center" Maximum="360" /> <Label Margin="0,100,0,0" HorizontalOptions="Center" VerticalOptions="Center" BindingContext="{x:Reference slider}" Rotation="{Binding Value}" FontSize="24" Text="{Binding Value, StringFormat='{0:F0}° 회전'}" /> </StackLayout> </ContentPage> |
TestProject.zip
■ x:Static 태그 확장을 사용해 정적 필드를 참조하는 방법을 보여준다. ▶ ApplicationConstant.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
namespace TestProject; /// <summary> /// 애플리케이션 상수 /// </summary> public class ApplicationConstant { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Static //////////////////////////////////////////////////////////////////////////////// Public #region Field /// <summary> /// 일반 폰트 크기 /// </summary> public static double NormalFontSize = 18; #endregion } |
▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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"> <StackLayout HorizontalOptions="Center" VerticalOptions="Center"> <Label FontSize="{x:Static Member=local:ApplicationConstant.NormalFontSize}" Text="Label No. 4" /> </StackLayout> </ContentPage> |
TestProject.zip