{"id":37525,"date":"2024-11-01T09:58:16","date_gmt":"2024-11-01T09:58:16","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=37525"},"modified":"2024-11-01T11:02:23","modified_gmt":"2024-11-01T11:02:23","slug":"uwp-development-style","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/37525\/","title":{"rendered":"UWP Development, Style"},"content":{"rendered":"

<\/p>\n

\n
\n

This article covers how to set styles in Universal Windows Platform (UWP) development on Windows, introducing the importance and application of styling through practical example code.<\/p>\n<\/header>\n

\n

1. Introduction<\/h2>\n

UWP is a platform that allows the development of modern apps that run on various Windows 10 devices. UWP apps can apply various styles to provide users with a rich experience. This article will explain the basic concepts of styles, usage of styles in XAML, resource management, and advanced techniques related to styles.<\/p>\n<\/section>\n

\n

2. Basic Concepts of Styles<\/h2>\n

Styles are a powerful feature that helps to apply a consistent visual to UI elements in UWP apps. By using styles, you can easily set common properties across multiple UI elements, which increases code reusability and reduces maintenance effort.<\/p>\n

Styles are defined within XAML files using the Style<\/code> element. An example of a basic style is as follows:<\/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. Applying Styles<\/h2>\n
Applying the defined style to UI elements is very simple. To apply a style, specify the desired style in the Style<\/code> property of the respective UI element. The example below shows how to apply a style to a button:<\/p>\n
\n            <Button Content=\"Click Here\" Style=\"{StaticResource MyButtonStyle}\"\/>\n            <\/code><\/pre>\n
Here, MyButtonStyle<\/code> is the key of the style defined above. The StaticResource<\/code> markup extension is used to statically reference the resource.<\/p>\n<\/section>\n
\n
4. Typography and Color<\/h2>\n
In UWP apps, typography and color are also important elements of style settings. By adjusting various font styles and background colors, you can enhance the user experience.<\/p>\n
For example, an example of applying typography style is as follows:<\/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. Advanced Styling Techniques<\/h2>\n
Using advanced techniques in UWP styling is suitable for building complex UIs. Here, we will describe advanced techniques including triggers, data binding, and animations.<\/p>\n
5.1 Using Triggers<\/h3>\n
Triggers allow styles to change based on specific conditions. For example, you can change the button’s background color when the mouse hovers over the button:<\/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 Data Binding<\/h3>\n
Data binding can be used in styles, allowing for dynamic updates of UI elements. For example, an example of binding color is as follows:<\/p>\n
\n            <Style TargetType=\"Button\">\n                <Setter Property=\"Background\" Value=\"{Binding ButtonBackgroundColor}\" \/>\n            <\/Style>\n            <\/code><\/pre>\n
5.3 Applying Animations<\/h3>\n
Applying animations to UI elements can provide a more immersive user experience. The following is an example that gives an animation effect when a button is clicked:<\/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. Using Theme Resource Dictionaries<\/h2>\n
In UWP apps, resource dictionaries can be used to manage themes. This allows for dynamic changes between various themes. For example, it is possible to create an app that supports dark mode and light mode.<\/p>\n
\n            <ResourceDictionary>\n                <Color x:Key=\"PrimaryColor\">#FF0078D7<\/Color>\n                <Color x:Key=\"SecondaryColor\">#FFD83B00<\/Color>\n            <\/ResourceDictionary>\n            <\/code><\/pre>\n
With the resources defined this way, the app can be easily adjusted to fit the theme.<\/p>\n<\/section>\n
\n
7. Conclusion<\/h2>\n
Effectively using styles in UWP apps enables a consistent user experience while facilitating maintenance. In this article, we learned various styling methods through the basic concepts and application methods of styles, as well as advanced styling techniques. Since styling is an important element in UWP app development, it is essential to properly manage and utilize the styles of each element.<\/p>\n<\/section>\n