UWP(Universal Windows Platform) \uac1c\ubc1c\uc5d0 \uc788\uc5b4 XAML(Extensible Application Markup Language)\uc740 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uc815\uc758\ud558\ub294 \ub370 \uc788\uc5b4 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. XAML\uc740 XML \uae30\ubc18\uc758 \ub9c8\ud06c\uc5c5 \uc5b8\uc5b4\ub85c, WPF(Windows Presentation Foundation) \ubc0f Silverlight\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ubcf8 \uae00\uc5d0\uc11c\ub294 XAML \ubb38\uc7a5\uc758 \uad6c\uc131 \uc694\uc18c \ubc0f UWP\uc5d0\uc11c\uc758 \ud65c\uc6a9 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
XAML\uc740 UI\ub97c \uad6c\uc131\ud558\ub294 \uc694\uc18c\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \uc815\uc758\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc90d\ub2c8\ub2e4. XAML\uc744 \uc0ac\uc6a9\ud558\uba74 UI\uc758 \uc2dc\uac01\uc801\uc778 \uad6c\uc870\uc640 \ub3d9\uc791\uc744 \ucf54\ub4dc\uc640 \ubd84\ub9ac\ud558\uc5ec \ub354\uc6b1 \uc27d\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uacfc\uc815\uc5d0\uc11c UI\uc5d0 \ub300\ud55c \uac01 \uc694\uc18c\ub294 \uac1d\uccb4\ub85c \ub098\ud0c0\ub0b4\uc5b4\uc9c0\uba70, \ub2e4\uc591\ud55c \uc18d\uc131\uc744 \ud1b5\ud574 \uc2a4\ud0c0\uc77c\uacfc \ub3d9\uc791\uc744 \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
XAML \ud30c\uc77c\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \ud615\uc2dd\uc744 \uac00\uc9d1\ub2c8\ub2e4:<\/p>\n
<Page\n x:Class=\"YourNamespace.MainPage\"\n xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n xmlns:local=\"using:YourNamespace\"\n xmlns:d=\"http:\/\/schemas.microsoft.com\/expression\/blend\/2008\"\n xmlns:mc=\"http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006\"\n mc:Ignorable=\"d\">\n\n <Grid>\n <TextBlock Text=\"Hello, UWP!\" FontSize=\"24\" HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\"\/>\n <\/Grid>\n\n <\/Page><\/code><\/pre>\nXAML \ubb38\uc7a5\uc758 \uad6c\uc131 \uc694\uc18c<\/h2>\n
XAML \ubb38\uc7a5\uc740 \uc8fc\ub85c \ub2e4\uc74c\uacfc \uac19\uc740 \uad6c\uc131 \uc694\uc18c\ub85c \uc774\ub8e8\uc5b4\uc838 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
\n- \n\ud0dc\uadf8<\/strong>: XAML \ubb38\uc7a5\uc740 XML \ud0dc\uadf8\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4. \uac01 UI \uc694\uc18c\ub294 \uadf8\uc5d0 \ud574\ub2f9\ud558\ub294 \ud0dc\uadf8\ub85c \uc120\uc5b8\ub429\ub2c8\ub2e4.<\/p>\n
<Button Content=\"Click Me!\" \/><\/code><\/pre>\n<\/li>\n- \n\uc18d\uc131<\/strong>: \uac01 \uc694\uc18c\ub294 \uc5ec\ub7ec \uc18d\uc131\uc744 \uac00\uc9d1\ub2c8\ub2e4. \uc18d\uc131\uc744 \ud1b5\ud574 \uc694\uc18c\uc758 \uc0c9\uc0c1, \ud06c\uae30, \uc704\uce58 \ub4f1\uc744 \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
<TextBlock Text=\"Hello\" FontSize=\"16\" Foreground=\"Blue\" \/><\/code><\/pre>\n<\/li>\n- \n\ub124\uc784\uc2a4\ud398\uc774\uc2a4<\/strong>: XAML\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 \uac01 UI \uc694\uc18c\ub294 \ud2b9\uc815 \ub124\uc784\uc2a4\ud398\uc774\uc2a4\uc5d0 \uc18d\ud569\ub2c8\ub2e4. \ub124\uc784\uc2a4\ud398\uc774\uc2a4\ub97c \ud1b5\ud574 \ud574\ub2f9 \uc694\uc18c\ub4e4\uc744 \uc2dd\ubcc4\ud558\uace0 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/li>\n<\/ol>\n
\uc608\uc81c: XAML \ubb38\uc11c \uad6c\uc870<\/h3>\n
\ub2e4\uc74c\uc740 \uac04\ub2e8\ud55c UWP \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 XAML \ud30c\uc77c \uc608\uc2dc\uc785\ub2c8\ub2e4.<\/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 xmlns:local=\"using:MyApp\">\n\n <Grid Background=\"{ThemeResource ApplicationPageBackgroundThemeBrush}\">\n <TextBlock Text=\"Welcome to UWP Development!\" \n FontSize=\"30\" \n HorizontalAlignment=\"Center\" \n VerticalAlignment=\"Center\" \n Foreground=\"DarkBlue\"\/>\n <Button Content=\"Click Me\" Width=\"100\" Height=\"50\" \n HorizontalAlignment=\"Center\" VerticalAlignment=\"Bottom\"\n Click=\"Button_Click\"\/>\n <\/Grid>\n\n <\/Page><\/code><\/pre>\n\uc774\ubca4\ud2b8 \ucc98\ub9ac<\/h2>\n
XAML\uc5d0\uc11c \uc815\uc758\ud55c UI \uc694\uc18c\ub294 C# \ucf54\ub4dc \ub4a4\uc5d0\uc11c \uc774\ubca4\ud2b8\ub97c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc704 \uc608\uc81c\uc5d0\uc11c \ubc84\ud2bc \ud074\ub9ad \uc774\ubca4\ud2b8\ub97c \ucc98\ub9ac\ud558\ub294 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
private void Button_Click(object sender, RoutedEventArgs e)\n{\n \/\/ \ubc84\ud2bc \ud074\ub9ad \uc2dc \uc2e4\ud589\ud560 \ucf54\ub4dc\n var dialog = new MessageDialog(\"\ubc84\ud2bc\uc774 \ud074\ub9ad\ub418\uc5c8\uc2b5\ub2c8\ub2e4!\");\n await dialog.ShowAsync();\n}<\/code><\/pre>\n\n\ub178\ud2b8:<\/strong> XAML\uacfc C# \ucf54\ub4dc\ub294 \uc790\ub3d9\uc73c\ub85c \uc5f0\uacb0\ub429\ub2c8\ub2e4. XAML\uc5d0\uc11c \uc815\uc758\ud55c UI \uc694\uc18c\uc758 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec \uc774\ub984\uc744 \uc9c0\uc815\ud558\uba74, C# \ucf54\ub4dc \ud6c4\ud589\uc5d0\uc11c \ud574\ub2f9 \ud578\ub4e4\ub7ec\ub97c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/div>\nXAML\uc758 \ub514\uc790\uc778 \ud328\ud134<\/h2>\n
XAML\uc744 \uc0ac\uc6a9\ud560 \ub54c MVVM(Model-View-ViewModel) \ub514\uc790\uc778 \ud328\ud134\uc744 \uc801\uc6a9\ud558\ub294 \uac83\uc774 \uc77c\ubc18\uc801\uc785\ub2c8\ub2e4. MVVM \ud328\ud134\uc744 \uc0ac\uc6a9\ud558\uba74 UI\uc640 \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1\uc744 \ubd84\ub9ac\ud558\uc5ec \ucf54\ub4dc\uc758 \uc7ac\uc0ac\uc6a9\uc131\uacfc \uc720\uc9c0\ubcf4\uc218\uc131\uc744 \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
MVVM\uc758 \uad6c\uc131 \uc694\uc18c<\/h3>\n
MVVM \ub514\uc790\uc778 \ud328\ud134\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \uc138 \uac00\uc9c0 \uc8fc\uc694 \uad6c\uc131 \uc694\uc18c\ub85c \uc774\ub8e8\uc5b4\uc9d1\ub2c8\ub2e4:<\/p>\n
\n- Model<\/strong>: \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ub370\uc774\ud130\uc640 \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1\uc744 \ub2f4\ub2f9\ud569\ub2c8\ub2e4.<\/li>\n
- View<\/strong>: \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub85c, XAML\uc744 \ud1b5\ud574 \uc815\uc758\ub429\ub2c8\ub2e4.<\/li>\n
- ViewModel<\/strong>: View\uc640 Model \uac04\uc758 \uc0c1\ud638\uc791\uc6a9\uc744 \uc911\uc7ac\ud558\ub294 \uc5ed\ud560\uc744 \ud558\uba70, \ub370\uc774\ud130 \ubc14\uc778\ub529\uc744 \uc0ac\uc6a9\ud558\uc5ec View\ub97c \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n
\uc608\uc81c: MVVM \uad6c\ud604<\/h3>\n
\ub2e4\uc74c\uc740 MVVM \ud328\ud134\uc744 \ub530\ub974\ub294 \uac04\ub2e8\ud55c \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n
public class MainViewModel : INotifyPropertyChanged\n{\n private string _welcomeMessage;\n\n public string WelcomeMessage\n {\n get { return _welcomeMessage; }\n set\n {\n _welcomeMessage = value;\n OnPropertyChanged(nameof(WelcomeMessage));\n }\n }\n\n public MainViewModel()\n {\n WelcomeMessage = \"Welcome to UWP with MVVM!\";\n }\n\n public event PropertyChangedEventHandler PropertyChanged;\n\n protected void OnPropertyChanged(string propertyName)\n {\n PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));\n }\n}<\/code><\/pre>\nXAML\uc5d0\uc11c \ub370\uc774\ud130 \ubc14\uc778\ub529<\/h3>\n
\uc704\uc5d0\uc11c \uc815\uc758\ud55c ViewModel\uc744 XAML\uacfc \uc5f0\uacb0\ud558\ub294 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
<Page.DataContext>\n <local:MainViewModel \/>\n <\/Page.DataContext>\n\n <TextBlock Text=\"{Binding WelcomeMessage}\" FontSize=\"24\" HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\"\/><\/code><\/pre>\n\uacb0\ub860<\/h2>\n
XAML\uc740 UWP \uac1c\ubc1c\uc5d0\uc11c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uc815\uc758\ud558\ub294 \uac15\ub825\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 XAML \ubb38\uc7a5\uc758 \uae30\ubcf8 \uad6c\uc131 \uc694\uc18c, \uc774\ubca4\ud2b8 \ucc98\ub9ac, \uadf8\ub9ac\uace0 MVVM \ub514\uc790\uc778 \ud328\ud134\uc744 \ud1b5\ud55c \ub370\uc774\ud130 \ubc14\uc778\ub529 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc0b4\ud3b4\ubcf4\uc558\uc2b5\ub2c8\ub2e4. XAML\uc744 \ud65c\uc6a9\ud55c UWP \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0 \uc788\uc5b4 \uc774\ub7ec\ud55c \uae30\ucd08 \uc9c0\uc2dd\uc744 \ubc14\ud0d5\uc73c\ub85c \ub354 \ub098\uc544\uac00 \ubcf5\uc7a1\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ub370 \ub3c4\uc6c0\uc774 \ub418\uae38 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n
\uc55e\uc73c\ub85c\ub3c4 XAML \uad00\ub828 \ub2e4\uc591\ud55c \uae30\ub2a5 \ubc0f \uace0\uae09 \uae30\uc220\uc744 \ub2e4\ub8f0 \uc608\uc815\uc774\ub2c8, \ub9ce\uc740 \uad00\uc2ec \ubd80\ud0c1\ub4dc\ub9bd\ub2c8\ub2e4!<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"