{"id":31031,"date":"2024-10-28T10:44:20","date_gmt":"2024-10-28T10:44:20","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=31031"},"modified":"2024-11-26T06:46:37","modified_gmt":"2024-11-26T06:46:37","slug":"uwp-%ea%b0%9c%eb%b0%9c-style","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/31031\/","title":{"rendered":"UWP \uac1c\ubc1c, Style"},"content":{"rendered":"

<\/p>\n

\n
\n

\uc774 \uae00\uc5d0\uc11c\ub294 Windows\uc758 UWP(Universal Windows Platform) \uac1c\ubc1c\uc5d0\uc11c \uc2a4\ud0c0\uc77c\uc744 \uc124\uc815\ud558\ub294 \ubc29\ubc95\uacfc \uae30\uc220\uc5d0 \ub300\ud574 \ub2e4\ub8e8\uace0, \uc2e4\uc81c \uc608\uc81c \ucf54\ub4dc\ub97c \ud1b5\ud574 \uc2a4\ud0c0\uc77c\ub9c1\uc758 \uc911\uc694\uc131\uacfc \ud65c\uc6a9 \ubc29\ubc95\uc744 \uc18c\uac1c\ud569\ub2c8\ub2e4.<\/p>\n<\/header>\n

\n

1. \uc18c\uac1c<\/h2>\n

UWP\ub294 \ub2e4\uc591\ud55c Windows 10 \uc7a5\uce58\uc5d0\uc11c \uc2e4\ud589\ub418\ub294 \ud604\ub300\uc801\uc778 \uc571\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\ub294 \ud50c\ub7ab\ud3fc\uc785\ub2c8\ub2e4. UWP \uc571\uc740 \uc0ac\uc6a9\uc790\uc5d0\uac8c \ud48d\ubd80\ud55c \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\uae30 \uc704\ud574 \ub2e4\uc591\ud55c \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 \uc2a4\ud0c0\uc77c\uc758 \uae30\ubcf8 \uac1c\ub150, XAML\uc5d0\uc11c\uc758 \uc2a4\ud0c0\uc77c \uc0ac\uc6a9, \ub9ac\uc18c\uc2a4 \uad00\ub9ac, \uadf8\ub9ac\uace0 \uc2a4\ud0c0\uc77c\uc5d0 \ub300\ud55c \uace0\uae09 \uae30\ubc95\ub4e4\uc744 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/section>\n

\n

2. \uc2a4\ud0c0\uc77c\uc758 \uae30\ubcf8 \uac1c\ub150<\/h2>\n

\uc2a4\ud0c0\uc77c\uc740 UWP \uc571\uc758 UI \uc694\uc18c\uc5d0 \ub300\ud55c \uc77c\uad00\ub41c \ube44\uc8fc\uc5bc\uc744 \uc801\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc8fc\ub294 \uac15\ub825\ud55c \uae30\ub2a5\uc785\ub2c8\ub2e4. \uc2a4\ud0c0\uc77c\uc744 \uc0ac\uc6a9\ud558\uba74 \uc5ec\ub7ec UI \uc694\uc18c\uc5d0 \uacf5\ud1b5\ub41c \uc18d\uc131\uc744 \uc27d\uac8c \uc124\uc815\ud560 \uc218 \uc788\uc73c\uba70, \uc774\ub294 \ucf54\ub4dc\uc758 \uc7ac\uc0ac\uc6a9\uc131\uc744 \ub192\uc774\uace0 \uc720\uc9c0 \uad00\ub9ac \ud6a8\uc728\uc131\uc744 \uc904\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n

\uc2a4\ud0c0\uc77c\uc740 XAML \ud30c\uc77c \ub0b4\uc5d0\uc11c Style<\/code> \uc694\uc18c\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc815\uc758\ub429\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc778 \uc2a4\ud0c0\uc77c\uc758 \uc608\uc2dc\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n

\n            <ResourceDictionary xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\" \n                xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\">\n                <Style TargetType=\"Button\">\n                    <Setter Property=\"Background\" Value=\"LightBlue\" \/>\n                    <Setter Property=\"Foreground\" Value=\"White\" \/>\n                    <Setter Property=\"FontSize\" Value=\"16\" \/>\n                    <Setter Property=\"Padding\" Value=\"10\" \/>\n                <\/Style>\n            <\/ResourceDictionary>\n            <\/code><\/pre>\n<\/section>\n
\n
3. \uc2a4\ud0c0\uc77c \uc801\uc6a9\ud558\uae30<\/h2>\n
\uc815\uc758\ud55c \uc2a4\ud0c0\uc77c\uc744 UI \uc694\uc18c\uc5d0 \uc801\uc6a9\ud558\ub294 \ubc29\ubc95\uc740 \ub9e4\uc6b0 \uac04\ub2e8\ud569\ub2c8\ub2e4. \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\ub824\uba74, \ud574\ub2f9 UI \uc694\uc18c\uc758 Style<\/code> \uc18d\uc131\uc5d0 \uc6d0\ud558\ub294 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud558\uba74 \ub429\ub2c8\ub2e4. \uc544\ub798 \uc608\uc81c\uc5d0\uc11c\ub294 \ubc84\ud2bc\uc5d0 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4:<\/p>\n
\n            <Button Content=\"\ud074\ub9ad\ud558\uc138\uc694\" Style=\"{StaticResource MyButtonStyle}\"\/>\n            <\/code><\/pre>\n
\uc5ec\uae30\uc11c MyButtonStyle<\/code>\uc740 \uc704\uc5d0\uc11c \uc815\uc758\ud55c \uc2a4\ud0c0\uc77c\uc758 \ud0a4\uc785\ub2c8\ub2e4. StaticResource<\/code> \ub9c8\ud06c\uc5c5 \ud655\uc7a5\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub9ac\uc18c\uc2a4\ub97c \uc815\uc801\uc73c\ub85c \ucc38\uc870\ud569\ub2c8\ub2e4.<\/p>\n<\/section>\n
\n
4. \ud0c0\uc774\ud3ec\uadf8\ub798\ud53c \ubc0f \uc0c9\uc0c1<\/h2>\n
UWP \uc571\uc5d0\uc11c\ub294 \ud0c0\uc774\ud3ec\uadf8\ub798\ud53c\uc640 \uc0c9\uc0c1\ub3c4 \uc2a4\ud0c0\uc77c \uc124\uc815\uc758 \uc911\uc694\ud55c \uc694\uc18c\uc785\ub2c8\ub2e4. \ub2e4\uc591\ud55c \uae00\uaf34 \uc2a4\ud0c0\uc77c\uacfc \ubc30\uacbd \uc0c9\uc0c1\uc744 \uc870\uc815\ud568\uc73c\ub85c\uc368 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc608\ub97c \ub4e4\uc5b4, \ud0c0\uc774\ud3ec\uadf8\ub798\ud53c \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\ub294 \uc608\uc2dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
\n            <Style TargetType=\"TextBlock\">\n                <Setter Property=\"FontFamily\" Value=\"Segoe UI\" \/>\n                <Setter Property=\"FontSize\" Value=\"20\" \/>\n                <Setter Property=\"Foreground\" Value=\"Black\" \/>\n            <\/Style>\n            <\/code><\/pre>\n<\/section>\n
\n
5. \uace0\uae09 \uc2a4\ud0c0\uc77c\ub9c1 \uae30\ubc95<\/h2>\n
UWP \uc2a4\ud0c0\uc77c\ub9c1\uc5d0\uc11c \uace0\uae09 \uae30\ubc95\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83\uc740 \ubcf5\uc7a1\ud55c UI\ub97c \uad6c\ucd95\ud558\ub294 \ub370 \uc801\ud569\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 \ud2b8\ub9ac\uac70, \ub370\uc774\ud130 \ubc14\uc778\ub529, \uadf8\ub9ac\uace0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \ud3ec\ud568\ud55c \uace0\uae09 \uae30\ubc95\uc5d0 \ub300\ud574 \uc124\uba85\ud569\ub2c8\ub2e4.<\/p>\n
5.1 \ud2b8\ub9ac\uac70 \uc0ac\uc6a9\ud558\uae30<\/h3>\n
\ud2b8\ub9ac\uac70\ub294 \ud2b9\uc815 \uc870\uac74\uc5d0 \ub530\ub77c \uc2a4\ud0c0\uc77c\uc744 \ubcc0\uacbd\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ub9c8\uc6b0\uc2a4\uac00 \ubc84\ud2bc \uc704\uc5d0 \uc62c\ub824\uc84c\uc744 \ub54c \ubc84\ud2bc\uc758 \ubc30\uacbd\uc0c9\uc744 \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
\n            <Style TargetType=\"Button\">\n                <Setter Property=\"Background\" Value=\"LightBlue\" \/>\n                <Setter Property=\"Foreground\" Value=\"White\" \/>\n                <Style.Triggers>\n                    <Trigger Property=\"IsMouseOver\" Value=\"True\">\n                        <Setter Property=\"Background\" Value=\"DarkBlue\" \/>\n                    <\/Trigger>\n                <\/Style.Triggers>\n            <\/Style>\n            <\/code><\/pre>\n
5.2 \ub370\uc774\ud130 \ubc14\uc778\ub529<\/h3>\n
\uc2a4\ud0c0\uc77c\uc5d0 \ub370\uc774\ud130 \ubc14\uc778\ub529\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc5b4, UI \uc694\uc18c\ub97c \ub3d9\uc801\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc0c9\uc0c1\uc744 \ubc14\uc778\ub529\ud558\ub294 \uc608\uc81c\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
\n            <Style TargetType=\"Button\">\n                <Setter Property=\"Background\" Value=\"{Binding ButtonBackgroundColor}\" \/>\n            <\/Style>\n            <\/code><\/pre>\n
5.3 \uc560\ub2c8\uba54\uc774\uc158 \uc801\uc6a9\ud558\uae30<\/h3>\n
UI \uc694\uc18c\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\uba74 \ub354\uc6b1 \ubab0\uc785\uac10 \ub118\uce58\ub294 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \ubc84\ud2bc \ud074\ub9ad \uc2dc \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc\ub97c \uc8fc\ub294 \uc608\uc81c\uc785\ub2c8\ub2e4:<\/p>\n
\n            <Style TargetType=\"Button\">\n                <Setter Property=\"Opacity\" Value=\"1\" \/>\n                <Style.Triggers>\n                    <EventTrigger RoutedEvent=\"Button.Click\">\n                        <BeginStoryboard>\n                            <Storyboard>\n                                <DoubleAnimation Storyboard.TargetProperty=\"Opacity\" From=\"1\" To=\"0\" Duration=\"0.5\" \/>\n                            <\/Storyboard>\n                        <\/BeginStoryboard>\n                    <\/EventTrigger>\n                <\/Style.Triggers>\n            <\/Style>\n            <\/code><\/pre>\n<\/section>\n
\n
6. \ud14c\ub9c8\ubcc4 \ub9ac\uc18c\uc2a4 \ub515\uc154\ub108\ub9ac \uc0ac\uc6a9\ud558\uae30<\/h2>\n
UWP \uc571\uc5d0\uc11c\ub294 \ud14c\ub9c8\ub97c \uad00\ub9ac\ud558\uae30 \uc704\ud574 \ub9ac\uc18c\uc2a4 \ub515\uc154\ub108\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ub2e4\uc591\ud55c \ud14c\ub9c8\ub97c \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ub2e4\ud06c \ubaa8\ub4dc\uc640 \ub77c\uc774\ud2b8 \ubaa8\ub4dc\ub97c \uc9c0\uc6d0\ud558\ub294 \uc571\uc744 \ub9cc\ub4dc\ub294 \uac83\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n
\n            <ResourceDictionary>\n                <Color x:Key=\"PrimaryColor\">#FF0078D7<\/Color>\n                <Color x:Key=\"SecondaryColor\">#FFD83B00<\/Color>\n            <\/ResourceDictionary>\n            <\/code><\/pre>\n
\uc774\ub807\uac8c \uc815\uc758\ub41c \ub9ac\uc18c\uc2a4\ub97c \ud1b5\ud574, \uc571\uc744 \ud14c\ub9c8\uc5d0 \ub9de\uac8c \uc27d\uac8c \uc870\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/section>\n
\n
7. \uacb0\ub860<\/h2>\n
UWP \uc571\uc5d0\uc11c \uc2a4\ud0c0\uc77c\uc744 \ud6a8\uacfc\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\uba74 \uc77c\uad00\ub41c \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\uba74\uc11c\ub3c4 \uc720\uc9c0 \uad00\ub9ac\ub97c \uc6a9\uc774\ud558\uac8c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \uae00\uc5d0\uc11c\ub294 \uc2a4\ud0c0\uc77c\uc758 \uae30\ubcf8 \uac1c\ub150\uacfc \uc801\uc6a9 \ubc29\ubc95, \uace0\uae09 \uc2a4\ud0c0\uc77c\ub9c1 \uae30\ubc95\uc744 \ud1b5\ud574 \ub2e4\uc591\ud55c \uc2a4\ud0c0\uc77c\ub9c1 \ubc29\ubc95\uc744 \ubc30\uc6e0\uc2b5\ub2c8\ub2e4. UWP \uc571 \uac1c\ubc1c\uc5d0\uc11c \uc2a4\ud0c0\uc77c\ub9c1\uc740 \uc911\uc694\ud55c \uc694\uc18c\uc774\ubbc0\ub85c, \uac01 \uc694\uc18c\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc808\ud788 \uad00\ub9ac\ud558\uace0 \ud65c\uc6a9\ud558\ub294 \uac83\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n<\/section>\n