\n \uc720\ub2c8\ubc84\uc124 \uc708\ub3c4\uc6b0 \ud50c\ub7ab\ud3fc(UWP) \uac1c\ubc1c\uc740 \ud604\ub300\uc801\uc778 \uc571 \uac1c\ubc1c\uc744 \uc704\ud55c \ud6cc\ub96d\ud55c \uc120\ud0dd\uc9c0\uc785\ub2c8\ub2e4. \ub2e4\uc591\ud55c \uae30\uae30\uc5d0\uc11c \uc571\uc744 \uc2e4\ud589\ud560 \uc218 \uc788\ub294 \uac00\ub2a5\uc131\uacfc \uc9c1\uad00\uc801\uc778 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI)\uc5d0 \ub300\ud55c \ub192\uc740 \uc801\uc751\uc131 \ub355\ubd84\uc5d0 UWP\ub294 \ub9ce\uc740 \uac1c\ubc1c\uc790\uc5d0\uac8c \uafb8\uc900\ud788 \uc778\uae30\ub97c \uc5bb\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ud2b9\ud788 \ub370\uc774\ud130 \ubc14\uc778\ub529\uc740 UWP \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uac15\ub825\ud55c \uae30\ub2a5 \uc911 \ud558\ub098\ub85c, UI \uc694\uc18c\uc640 \ub370\uc774\ud130 \uc18c\uc2a4\ub97c \ub3d9\uae30\ud654\ud558\uc5ec \ub354\uc6b1 \ud6a8\uc728\uc801\uc73c\ub85c \uc571\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4.\n<\/p>\n
\n \ub370\uc774\ud130 \ubc14\uc778\ub529\uc740 UI \uc694\uc18c\uc640 \uadf8\uc5d0 \uad00\ub828\ub41c \ub370\uc774\ud130 \uc18c\uc2a4\ub97c \uc5f0\uacb0\ud558\uc5ec \ub450 \uac1c\uccb4\ub97c \ub3d9\uae30\ud654\ud558\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ub370\uc774\ud130\uac00 \ubcc0\uacbd\ub418\uba74 UI\uac00 \uc790\ub3d9\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ub418\uace0, \ubc18\ub300\ub85c UI\uc758 \ubcc0\ud654\uac00 \ub370\uc774\ud130\uc5d0 \uc989\uc2dc \ubc18\uc601\ub418\ub294 \uad6c\uc870\ub97c \uac16\uc2b5\ub2c8\ub2e4. \ub370\uc774\ud130 \ubc14\uc778\ub529\uc740 MVVM(Model-View-ViewModel) \ud328\ud134\uc744 \uc0ac\uc6a9\ud558\uc5ec UWP \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uad6c\uc870\ub97c \uac04\uacb0\ud558\uac8c \ub9cc\ub4e4\uc5b4 \uc90d\ub2c8\ub2e4.\n<\/p>\n
\n UWP\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 \ub370\uc774\ud130 \ubc14\uc778\ub529\uc5d0\ub294 \uc5ec\ub7ec \uac00\uc9c0 \ubc29\uc2dd\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uac01 \ubc29\uc2dd\uc740 \ud2b9\uc815\ud55c \uc0ac\uc6a9 \uc0ac\ub840\uc5d0 \ub9de\ucdb0 \ucd5c\uc801\ud654\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc8fc\uc694 \ub370\uc774\ud130 \ubc14\uc778\ub529 \uc720\ud615\uc785\ub2c8\ub2e4:\n<\/p>\n
\n \ub370\uc774\ud130 \ubc14\uc778\ub529\uc744 \uc124\uc815\ud558\uae30 \uc704\ud574\uc11c\ub294 \ub370\uc774\ud130 \ucee8\ud14d\uc2a4\ud2b8\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \ub370\uc774\ud130 \ucee8\ud14d\uc2a4\ud2b8\ub294 UI \uc694\uc18c\uac00 \uc5b4\ub290 \ub370\uc774\ud130 \uc18c\uc2a4\uc640 \uc5f0\uacb0\ub418\ub294\uc9c0\ub97c \ub098\ud0c0\ub0b4\uba70, \uc77c\ubc18\uc801\uc73c\ub85c ViewModel \ud074\ub798\uc2a4 \uc778\uc2a4\ud134\uc2a4\uac00 \ub370\uc774\ud130\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc544\ub798\ub294 \ub370\uc774\ud130 \ucee8\ud14d\uc2a4\ud2b8\ub97c \uc124\uc815\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud55c \uc608\uc81c\uc785\ub2c8\ub2e4.\n<\/p>\n
using Windows.UI.Xaml;\nusing Windows.UI.Xaml.Controls;\n\nnamespace MyApp\n{\n public sealed partial class MainPage : Page\n {\n public MainPage()\n {\n this.InitializeComponent();\n this.DataContext = new ViewModel();\n }\n }\n}\n<\/code><\/pre>\n4. \uc608\uc81c: \ub370\uc774\ud130 \ubc14\uc778\ub529\uc744 \ud65c\uc6a9\ud55c \uac04\ub2e8\ud55c UWP \uc571 \ub9cc\ub4e4\uae30<\/h2>\n
\n \uc774\uc81c \uac04\ub2e8\ud55c UWP \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uba74\uc11c \ub370\uc774\ud130 \ubc14\uc778\ub529\uc744 \uc801\uc6a9\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc774 \uc608\uc81c\uc5d0\uc11c\ub294 \uc0ac\uc6a9\uc790\ub85c\ubd80\ud130 \uc774\ub984\uc744 \uc785\ub825\ubc1b\uc544 \ud45c\uc2dc\ud558\ub294 \uc571\uc744 \ub9cc\ub4e4 \uac83\uc785\ub2c8\ub2e4.\n<\/p>\n
4.1 ViewModel \ud074\ub798\uc2a4 \uad6c\ud604<\/h3>\nusing System.ComponentModel;\n\nnamespace MyApp\n{\n public class ViewModel : INotifyPropertyChanged\n {\n private string _userName;\n public string UserName\n {\n get { return _userName; }\n set\n {\n _userName = value;\n OnPropertyChanged(\"UserName\");\n }\n }\n\n public event PropertyChangedEventHandler PropertyChanged;\n\n protected void OnPropertyChanged(string propertyName)\n {\n PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));\n }\n }\n}\n<\/code><\/pre>\n4.2 XAML \ud30c\uc77c \uc124\uc815<\/h3>\n
\n XAML \ud30c\uc77c\uc5d0\uc11c \ub370\uc774\ud130 \ubc14\uc778\ub529\uc744 \uc124\uc815\ud569\ub2c8\ub2e4. TextBox\uc5d0 \uc0ac\uc6a9\uc790\uac00 \uc785\ub825\ud55c \uac12\uc744 UserName \uc18d\uc131\uacfc \ubc14\uc778\ub529\ud558\uace0, TextBlock\uc73c\ub85c \uadf8 \uac12\uc744 \ud45c\uc2dc\ud569\ub2c8\ub2e4.\n<\/p>\n
<Page\n x:Class=\"MyApp.MainPage\"\n xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\">\n \n <Grid>\n <TextBox Text=\"{Binding UserName, Mode=TwoWay}\" Width=\"200\" Height=\"30\" \/>\n <TextBlock Text=\"{Binding UserName}\" Margin=\"0,50,0,0\" \/>\n <\/Grid>\n<\/Page>\n<\/code><\/pre>\n4.3 \uc571 \uc2e4\ud589<\/h3>\n
\n \uc571\uc744 \uc2e4\ud589\ud558\uba74 \uc0ac\uc6a9\uc790 \uc785\ub825\uc5d0 \ub530\ub77c TextBlock\uc758 \ub0b4\uc6a9\uc774 \uc2e4\uc2dc\uac04\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ub418\ub294 \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \uc591\ubc29\ud5a5 \ub370\uc774\ud130 \ubc14\uc778\ub529\uc744 \ud1b5\ud574 \uc774\ub8e8\uc5b4\uc9c4 \ub355\ubd84\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \ud14d\uc2a4\ud2b8 \ubc15\uc2a4\uc5d0 \uc774\ub984\uc744 \uc785\ub825\ud558\uba74 ViewModel\uc758 UserName \uc18d\uc131\uc774 \ubcc0\uacbd\ub418\uace0, \uc774 \ubcc0\uacbd \uc0ac\ud56d\uc774 \uc790\ub3d9\uc73c\ub85c UI\uc5d0 \ubc18\uc601\ub429\ub2c8\ub2e4.\n<\/p>\n
5. \uace0\uae09 \ub370\uc774\ud130 \ubc14\uc778\ub529<\/h2>\n
\n UWP\uc5d0\uc11c\ub294 \uae30\ubcf8\uc801\uc778 \ubc14\uc778\ub529\ubfd0\ub9cc \uc544\ub2c8\ub77c \uace0\uae09 \ubc14\uc778\ub529 \uae30\ubc95\ub3c4 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ub370\uc774\ud130 \ud15c\ud50c\ub9bf\uc744 \ud65c\uc6a9\ud558\uc5ec \ub9ac\uc2a4\ud2b8\uc640 \uac19\uc740 \ub2e4\uc591\ud55c \ub370\uc774\ud130\ub97c \ub3d9\uc801\uc73c\ub85c \ud45c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, Converter\ub97c \ud1b5\ud574 \ub370\uc774\ud130\uc758 \ubcc0\ud658\uc744 \uc27d\uac8c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p>\n
5.1 \ub370\uc774\ud130 \ud15c\ud50c\ub9bf \uc0ac\uc6a9<\/h3>\n
\n \ub9ac\uc2a4\ud2b8 \ubc15\uc2a4\ub97c \ud65c\uc6a9\ud558\uc5ec \uc5ec\ub7ec \uac1c\uc758 \uc544\uc774\ud15c\uc744 \ud45c\uc2dc\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 ItemList \ud56d\ubaa9\uc744 ViewModel\ub85c \uc124\uc815\ud558\uace0, ItemTemplate\uc744 \ud1b5\ud574 UI\ub97c \uc124\uc815\ud558\ub294 \uc608\uc81c\uc785\ub2c8\ub2e4.\n<\/p>\n
using System.Collections.ObjectModel;\n\nnamespace MyApp\n{\n public class ViewModel : INotifyPropertyChanged\n {\n public ObservableCollection<string> Items { get; set; }\n\n public ViewModel()\n {\n Items = new ObservableCollection<string> { \"\uc774\uc544\uc774\ud15c1\", \"\uc774\uc544\uc774\ud15c2\", \"\uc774\uc544\uc774\ud15c3\" };\n }\n\n \/\/ PropertyChanged \uad6c\ud604 \uc0dd\ub7b5...\n }\n}\n<\/code><\/pre>\n5.2 XAML \ud30c\uc77c\uc758 \ub9ac\uc2a4\ud2b8 \ubc15\uc2a4 \uc124\uc815<\/h3>\n<ListBox ItemsSource=\"{Binding Items}\">\n <ListBox.ItemTemplate>\n <DataTemplate>\n <TextBlock Text=\"{Binding}\" \/>\n <\/DataTemplate>\n <\/ListBox.ItemTemplate>\n<\/ListBox>\n<\/code><\/pre>\n6. \ub370\uc774\ud130 \ubc14\uc778\ub529\uc758 \uc7a5\uc810\uacfc \ub2e8\uc810<\/h2>\n
\n \ub370\uc774\ud130 \ubc14\uc778\ub529\uc740 \ub9e4\uc6b0 \uc720\uc6a9\ud558\uc9c0\ub9cc \uba87 \uac00\uc9c0 \ub2e8\uc810\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uc7a5\uc810\uc73c\ub85c\ub294 \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc774 \uc88b\uc544\uc9c0\uace0, UI\uc640 \ub370\uc774\ud130 \uac04\uc758 \uc0c1\ud638\uc791\uc6a9\uc744 \uac04\ud3b8\ud558\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\ub2e4\ub294 \uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4. \ubc18\uba74, \ubc14\uc778\ub529\uc774 \ub9ce\uc740 \uacbd\uc6b0 \uc131\ub2a5 \uc800\ud558\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc73c\uba70, \ub514\ubc84\uae45\uc774 \ub2e4\uc18c \uc5b4\ub824\uc6b8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p>\n
7. \uacb0\ub860<\/h2>\n
\n UWP \ub370\uc774\ud130 \ubc14\uc778\ub529\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uac1c\ubc1c\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \ub9cc\ub4e4\uc5b4\uc8fc\ub294 \uc911\uc694\ud55c \uae30\ubc95\uc785\ub2c8\ub2e4. MVVM \ud328\ud134\uc744 \ud65c\uc6a9\ud558\uc5ec \ucf54\ub4dc\uc758 \uc720\uc9c0\ubcf4\uc218\ub97c \uc6a9\uc774\ud558\uac8c \ud558\uace0, \uc571\uc758 \ubc18\uc751\uc131\uc744 \ub192\uc785\ub2c8\ub2e4. \ubcf8 \uac00\uc774\ub4dc\ub97c \ubc14\ud0d5\uc73c\ub85c \ub370\uc774\ud130 \ubc14\uc778\ub529\uc744 \ud65c\uc6a9\ud558\uc5ec \uace0\uae09 UWP \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.\n<\/p>\n
\n \uc55e\uc73c\ub85c \ub354 \ub9ce\uc740 UWP \uac1c\ubc1c \uad00\ub828 \uac15\uc88c\ub97c \uae30\ub300\ud574 \uc8fc\uc138\uc694!\n<\/p>\n