{"id":31337,"date":"2024-10-28T11:19:17","date_gmt":"2024-10-28T11:19:17","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=31337"},"modified":"2024-11-26T06:45:28","modified_gmt":"2024-11-26T06:45:28","slug":"wpf-%ea%b0%95%ec%a2%8c-%ed%8a%b8%eb%a6%ac%ea%b1%b0%ec%99%80-%ed%85%9c%ed%94%8c%eb%a6%bf%ec%9d%84-%ed%99%9c%ec%9a%a9%ed%95%9c-%ea%b3%a0%ea%b8%89-%ec%8a%a4%ed%83%80%ec%9d%bc%eb%a7%81","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/31337\/","title":{"rendered":"WPF \uac15\uc88c, \ud2b8\ub9ac\uac70\uc640 \ud15c\ud50c\ub9bf\uc744 \ud65c\uc6a9\ud55c \uace0\uae09 \uc2a4\ud0c0\uc77c\ub9c1"},"content":{"rendered":"

WPF(Windows Presentation Foundation)\ub294 \uac15\ub825\ud55c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI) \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \uac1c\ubc1c\uc790\uac00 \uc544\ub984\ub2f5\uace0 \ud48d\ubd80\ud55c UI\ub97c \uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uadf8\uc911\uc5d0\uc11c\ub3c4 \ud2b8\ub9ac\uac70\uc640 \ud15c\ud50c\ub9bf\uc740 UI \uc694\uc18c\uc758 \uc2a4\ud0c0\uc77c\uc744 \ub3d9\uc801\uc73c\ub85c \uc870\uc815\ud560 \uc218 \uc788\ub294 \uac15\ub825\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4. \uc774\ubc88 \uae00\uc5d0\uc11c\ub294 WPF\uc5d0\uc11c \ud2b8\ub9ac\uac70\uc640 \ud15c\ud50c\ub9bf\uc744 \ud65c\uc6a9\ud558\uc5ec \uace0\uae09 \uc2a4\ud0c0\uc77c\ub9c1\uc744 \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc744 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

1. WPF\uc758 \uae30\ubcf8 \uac1c\ub150<\/h2>\n

WPF\ub294 XAML(Extensible Application Markup Language)\uc774\ub77c\ub294 \ub9c8\ud06c\uc5c5 \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec UI\ub97c \ub514\uc790\uc778\ud558\uace0, C# \ub610\ub294 VB.NET\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub85c\uc9c1\uc744 \uad6c\ud604\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \uc791\ub3d9\ud569\ub2c8\ub2e4. WPF\ub294 \ub370\uc774\ud130 \ubc14\uc778\ub529, \uc560\ub2c8\uba54\uc774\uc158, 2D \ubc0f 3D \uadf8\ub798\ud53d\uc2a4, \uc2a4\ud0c0\uc77c \ubc0f \ud15c\ud50c\ub9bf \uc2dc\uc2a4\ud15c \ub4f1\uc758 \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n

2. \ud2b8\ub9ac\uac70(Triggers)\uc758 \uc774\ud574<\/h2>\n

\ud2b8\ub9ac\uac70\ub294 \ud2b9\uc815 \uc870\uac74\uc774 \ub9cc\uc871\ub420 \ub54c UI \uc694\uc18c\uc758 \uc18d\uc131\uc744 \ubcc0\uacbd\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4. WPF\uc5d0\uc11c\ub294 \uc5ec\ub7ec \uc885\ub958\uc758 \ud2b8\ub9ac\uac70\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 \uc138 \uac00\uc9c0 \uc8fc\uc694 \ud2b8\ub9ac\uac70\uc5d0 \ub300\ud574 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

2.1. \ud504\ub85c\ud37c\ud2f0 \ud2b8\ub9ac\uac70(Property Trigger)<\/h3>\n

\ud504\ub85c\ud37c\ud2f0 \ud2b8\ub9ac\uac70\ub294 \ud2b9\uc815 \uc18d\uc131\uc758 \uac12\uc774 \ubcc0\uacbd\ub418\uc5c8\uc744 \ub54c UI \uc694\uc18c\uc758 \ub2e4\ub978 \uc18d\uc131\uc744 \uc870\uc815\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ubc84\ud2bc\uc758 \ubc30\uacbd\uc0c9\uc744 \ub9c8\uc6b0\uc2a4 \uc624\ubc84 \uc2dc \ubcc0\uacbd\ud558\ub824\uba74 \uc544\ub798\uc640 \uac19\uc740 \ucf54\ub4dc\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n

<Button Content=\"Hover Me\">\n    <Button.Style>\n        <Style TargetType=\"Button\">\n            <Setter Property=\"Background\" Value=\"LightGray\"\/>\n            <Style.Triggers>\n                <Trigger Property=\"IsMouseOver\" Value=\"True\">\n                    <Setter Property=\"Background\" Value=\"SkyBlue\"\/>\n                <\/Trigger>\n            <\/Style.Triggers>\n        <\/Style>\n    <\/Button.Style>\n<\/Button><\/code><\/pre>\n
2.2. \ub370\uc774\ud130 \ud2b8\ub9ac\uac70(Data Trigger)<\/h3>\n
\ub370\uc774\ud130 \ud2b8\ub9ac\uac70\ub294 \ub370\uc774\ud130 \ubc14\uc778\ub529\ub41c \uc18d\uc131\uc758 \uac12\uc5d0 \ub530\ub77c UI \uc694\uc18c\uc758 \uc2a4\ud0c0\uc77c\uc744 \ubcc0\uacbd\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ub370\uc774\ud130 \ubaa8\ub378\uc758 \uc18d\uc131\uc774 \ud2b9\uc815 \uac12\uc77c \ub54c UI\ub97c \ub2e4\ub974\uac8c \ud45c\ud604\ud558\uace0 \uc2f6\ub2e4\uba74 \ub370\uc774\ud130 \ud2b8\ub9ac\uac70\ub97c \ud65c\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\uc758 \uc608\uc5d0\uc11c\ub294 \uac12\uc774 “Active”\uc77c \ub54c \uc0c9\uc0c1\uc744 \ubcc0\uacbd\ud569\ub2c8\ub2e4:<\/p>\n
<TextBlock Text=\"{Binding Status}\">\n    <TextBlock.Style>\n        <Style TargetType=\"TextBlock\">\n            <Setter Property=\"Foreground\" Value=\"Black\"\/>\n            <Style.Triggers>\n                <DataTrigger Binding=\"{Binding Status}\" Value=\"Active\">\n                    <Setter Property=\"Foreground\" Value=\"Green\"\/>\n                <\/DataTrigger>\n            <\/Style.Triggers>\n        <\/Style>\n    <\/TextBlock.Style>\n<\/TextBlock><\/code><\/pre>\n
2.3. MultiDataTrigger<\/h3>\n
MultiDataTrigger\ub294 \uc5ec\ub7ec \uac1c\uc758 \ubc14\uc778\ub529\ub41c \uc18d\uc131 \uc870\ud569\uc744 \uc0ac\uc6a9\ud558\uc5ec UI \uc694\uc18c\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc815\uc758\ud569\ub2c8\ub2e4. \uc774 \ud2b8\ub9ac\uac70\ub294 \uc5ec\ub7ec \uc870\uac74\uc774 \ub3d9\uc2dc\uc5d0 \ub9cc\uc871\ub418\uc5b4\uc57c \ud560 \ub54c \uc720\uc6a9\ud569\ub2c8\ub2e4:<\/p>\n
<Button Content=\"Submit\">\n    <Button.Style>\n        <Style TargetType=\"Button\">\n            <Setter Property=\"Background\" Value=\"LightGray\"\/>\n            <Style.Triggers>\n                <MultiDataTrigger>\n                    <MultiDataTrigger.Conditions>\n                        < Condition Binding=\"{Binding IsValid}\" Value=\"True\"\/>\n                        < Condition Binding=\"{Binding IsEnabled}\" Value=\"True\"\/>\n                    <\/MultiDataTrigger.Conditions>\n                    <Setter Property=\"Background\" Value=\"Green\"\/>\n                <\/MultiDataTrigger>\n            <\/Style.Triggers>\n        <\/Style>\n    <\/Button.Style>\n<\/Button><\/code><\/pre>\n
3. \ud15c\ud50c\ub9bf(Templates)\uc758 \uc774\ud574<\/h2>\n
WPF\uc5d0\uc11c\ub294 ControlTemplate\uacfc DataTemplate\uc774\ub77c\ub294 \ub450 \uac00\uc9c0 \uc8fc\uc694 \ud15c\ud50c\ub9bf\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub4e4 \ud15c\ud50c\ub9bf\uc744 \ud1b5\ud574 UI \uc694\uc18c\uc758 \uad6c\uc870\uc640 \ub370\uc774\ud130\ub97c \uc2dc\uac01\uc801\uc73c\ub85c \ud45c\ud604\ud558\ub294 \ubc29\ubc95\uc744 \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
3.1. ControlTemplate<\/h3>\n
ControlTemplate\uc740 UI \uc694\uc18c\uc758 \uc2dc\uac01\uc801 \uad6c\uc870\ub97c \uc815\uc758\ud569\ub2c8\ub2e4. \uc989, \uae30\ubcf8 \ucee8\ud2b8\ub864\uc758 \ubaa8\uc591\uc744 \uc644\uc804\ud788 \ucee4\uc2a4\ud130\ub9c8\uc774\uc988\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ubc84\ud2bc\uc758 \uae30\ubcf8 \ud615\ud0dc\ub97c \ubcc0\uacbd\ud558\uace0 \uc2f6\ub2e4\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 ControlTemplate\uc744 \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
<Button Content=\"Custom Button\">\n    <Button.Template>\n        <ControlTemplate TargetType=\"Button\">\n            <Border Background=\"{TemplateBinding Background}\" BorderBrush=\"Black\" BorderThickness=\"1\" CornerRadius=\"10\">\n                <ContentPresenter HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\"\/>\n            <\/Border>\n        <\/ControlTemplate>\n    <\/Button.Template>\n<\/Button><\/code><\/pre>\n
3.2. DataTemplate<\/h3>\n
DataTemplate\uc740 \ub370\uc774\ud130 \uac1d\uccb4\ub97c \uc5b4\ub5bb\uac8c \ud45c\uc2dc\ud560\uc9c0\ub97c \uc815\uc758\ud569\ub2c8\ub2e4. ListBox\uc640 \uac19\uc740 \ud56d\ubaa9 \uae30\ubc18 \ucee8\ud2b8\ub864\uc5d0\uc11c \uac01 \ud56d\ubaa9\uc758 \ud45c\uc2dc \ud615\ud0dc\ub97c \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
<ListBox ItemsSource=\"{Binding Items}\">\n    <ListBox.ItemTemplate>\n        <DataTemplate>\n            <StackPanel Orientation=\"Horizontal\">\n                <TextBlock Text=\"{Binding Name}\" Margin=\"5\"\/>\n                <TextBlock Text=\"{Binding Status}\" Foreground=\"{Binding StatusColor}\"\/>\n            <\/StackPanel>\n        <\/DataTemplate>\n    <\/ListBox.ItemTemplate>\n<\/ListBox><\/code><\/pre>\n
4. \ud2b8\ub9ac\uac70\uc640 \ud15c\ud50c\ub9bf \uacb0\ud569\ud558\uae30<\/h2>\n
\ud2b8\ub9ac\uac70\uc640 \ud15c\ud50c\ub9bf\uc744 \uacb0\ud569\ud558\uc5ec \ub354\uc6b1 \ub3d9\uc801\uc774\uace0 \uc720\uc5f0\ud55c UI\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, ControlTemplate \ub0b4\uc5d0\uc11c \ud2b8\ub9ac\uac70\ub97c \uc0ac\uc6a9\ud558\uc5ec UI\uc758 \uc2a4\ud0c0\uc77c\uc744 \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \ubc84\ud2bc\uc758 ControlTemplate\uc5d0\uc11c IsMouseOver \ud2b8\ub9ac\uac70\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubc30\uacbd\uc0c9\uc744 \ubcc0\uacbd\ud558\ub294 \uc608\uc2dc\uc785\ub2c8\ub2e4:<\/p>\n
<Button Content=\"Hover Me\">\n    <Button.Template>\n        <ControlTemplate TargetType=\"Button\">\n            <Border Background=\"{TemplateBinding Background}\" BorderBrush=\"Black\" BorderThickness=\"1\" CornerRadius=\"10\">\n                <ContentPresenter HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\"\/>\n            <\/Border>\n            <ControlTemplate.Triggers>\n                <Trigger Property=\"IsMouseOver\" Value=\"True\">\n                    <Setter TargetName=\"border\" Property=\"Background\" Value=\"SkyBlue\"\/>\n                <\/Trigger>\n            <\/ControlTemplate.Triggers>\n        <\/ControlTemplate>\n    <\/Button.Template>\n<\/Button><\/code><\/pre>\n
5. \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc608\uc81c<\/h2>\n
\uc774\uc81c \uc804\uccb4 \uc608\uc81c\ub97c \ud1b5\ud574 \ud2b8\ub9ac\uac70\uc640 \ud15c\ud50c\ub9bf\uc744 \ud65c\uc6a9\ud55c \uace0\uae09 \uc2a4\ud0c0\uc77c\ub9c1\uc744 \uad6c\ud604\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uae30\ubcf8\uc801\uc778 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uba54\ub274\uc640 \ubc84\ud2bc\uc774 \ud3ec\ud568\ub41c \uc608\uc2dc\uc785\ub2c8\ub2e4:<\/p>\n
<Window x:Class=\"WpfApp.MainWindow\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n    Title=\"MainWindow\" Height=\"350\" Width=\"525\">\n    <Window.Resources>\n        <Style TargetType=\"Button\">\n            <Setter Property=\"Background\" Value=\"LightGray\"\/>\n            <Setter Property=\"Template\">\n                <Setter.Value>\n                    <ControlTemplate TargetType=\"Button\">\n                        <Border Background=\"{TemplateBinding Background}\" BorderBrush=\"Black\" BorderThickness=\"1\" CornerRadius=\"5\">\n                            <ContentPresenter HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\"\/>\n                        <\/Border>\n                        <ControlTemplate.Triggers>\n                            <Trigger Property=\"IsMouseOver\" Value=\"True\">\n                                <Setter TargetName=\"border\" Property=\"Background\" Value=\"LightBlue\"\/>\n                            <\/Trigger>\n                        <\/ControlTemplate.Triggers>\n                    <\/ControlTemplate>\n                <\/Setter.Value>\n            <\/Setter>\n        <\/Style>\n    <\/Window.Resources>\n\n    <Grid>\n        <StackPanel VerticalAlignment=\"Top\" Margin=\"10\">\n            <Button Content=\"Button 1\" Margin=\"5\"\/>\n            <Button Content=\"Button 2\" Margin=\"5\"\/>\n            <Button Content=\"Button 3\" Margin=\"5\"\/>\n        <\/StackPanel>\n    <\/Grid>\n<\/Window><\/code><\/pre>\n
6. \uacb0\ub860<\/h2>\n
WPF\uc758 \ud2b8\ub9ac\uac70\uc640 \ud15c\ud50c\ub9bf \uae30\ub2a5\uc740 UI \uac1c\ubc1c\uc5d0\uc11c\uc758 \uc720\uc5f0\uc131\uacfc \uac00\ub2a5\uc131\uc744 \ud06c\uac8c \ud655\uc7a5\ud574 \uc90d\ub2c8\ub2e4. \ud504\ub85c\ud37c\ud2f0 \ud2b8\ub9ac\uac70\uc640 \ub370\uc774\ud130 \ud2b8\ub9ac\uac70\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790 \uc0c1\ud638 \uc791\uc6a9\uc5d0 \ub530\ub77c UI \uc2a4\ud0c0\uc77c\uc744 \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud558\uace0, ControlTemplate\uacfc DataTemplate\uc744 \ud1b5\ud574 UI \uc694\uc18c\uc758 \uad6c\uc870\uc640 \ub0b4\uc6a9\uc744 \uc790\uc720\ub86d\uac8c \uc870\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uae30\ub2a5\uc744 \ud1b5\ud574 \uac1c\ubc1c\uc790\ub294 \uc0ac\uc6a9\uc790\uc5d0\uac8c \ubcf4\ub2e4 \ud48d\ubd80\ud55c \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\uace0, \uae54\ub054\ud558\uace0 \uc804\ubb38\uc801\uc778 UI\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc774 \uae00\uc5d0\uc11c\ub294 WPF \ud2b8\ub9ac\uac70\uc640 \ud15c\ud50c\ub9bf\uc744 \ud1b5\ud55c \uace0\uae09 \uc2a4\ud0c0\uc77c\ub9c1 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc0b4\ud3b4\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \uc774 \uae30\uc220\ub4e4\uc744 \uc801\uc6a9\ud558\uc5ec \uc790\uc2e0\ub9cc\uc758 \ub3c5\ucc3d\uc801\uc778 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud574 \ubcf4\uae30\ub97c \uad8c\uc7a5\ud569\ub2c8\ub2e4!<\/p>\n