Hello! In this tutorial, we will take a closer look at two important concepts in Windows UWP (Universal Windows Platform) development: Dependency Properties and Attached Properties. UWP is a powerful platform that supports the development of applications that can run on a variety of devices. Dependency Properties and Attached Properties play a crucial role in setting and controlling the properties of UI elements within this platform.<\/p>\n
Dependency Properties are a concept introduced in WPF (Windows Presentation Foundation) that is also adopted in UWP. Dependency Properties have the following characteristics:<\/p>\n
To define a Dependency Property, you need to create a class that inherits from the The code above defines a custom control named Dependency Properties have various characteristics. By default, here are some of them:<\/p>\n Attached Properties are properties used to provide additional properties to specific objects. These properties are typically used in other classes and are very useful in design scenarios. They are useful for providing directional information (e.g., layout information regarding specific UI elements).<\/p>\n The method of defining Attached Properties is similar to that of defining Dependency Properties. They can be defined accordingly.<\/p>\n The code above defines an Attached Property named Attached Properties are primarily useful in the following situations:<\/p>\n Dependency Properties are properties defined within a class, while Attached Properties are properties that can be set externally on specific UI elements. Dependency Properties can be directly used in instances of the class, whereas Attached Properties are primarily used as additional properties for UI elements.<\/p>\n Below is a simple example of using both Dependency Properties and Attached Properties together.<\/p>\n Now, let’s apply the above Dependency Properties and Attached Properties to a simple UWP application.<\/p>\n In this tutorial, we explored the concepts of Dependency Properties and Attached Properties in UWP development. Dependency Properties manage the properties of custom controls, while Attached Properties are used to dynamically add additional properties to UI elements. Properly leveraging these two concepts can greatly assist in developing large-scale applications.<\/p>\n Now you have the foundation to enrich your UWP applications using Dependency Properties and Attached Properties. Furthermore, apply these concepts to create applications with various features!<\/p>\n","protected":false},"excerpt":{"rendered":"DependencyObject<\/code> class and register the necessary Dependency Properties. For this, you will use the DependencyProperty.Register<\/code> method.<\/p>\nExample: Defining a Custom Dependency Property<\/h4>\n
using Windows.UI.Xaml;\n\npublic class MyCustomControl : Control\n{\n \/\/ Defining Dependency Property\n public static readonly DependencyProperty MyPropertyProperty =\n DependencyProperty.Register(\n \"MyProperty\",\n typeof(string),\n typeof(MyCustomControl),\n new PropertyMetadata(default(string)));\n\n \/\/ CLR Property Wrapper\n public string MyProperty\n {\n get { return (string)GetValue(MyPropertyProperty); }\n set { SetValue(MyPropertyProperty, value); }\n }\n}\n<\/code><\/pre>\nMyCustomControl<\/code> and registers a Dependency Property called MyProperty<\/code>.<\/p>\n1.2 Characteristics of Dependency Properties<\/h3>\n
\n
2. What are Attached Properties?<\/h2>\n
2.1 Structure of Attached Properties<\/h3>\n
Example: Defining an Attached Property<\/h4>\n
public static class MyAttachedProperties\n{\n public static readonly DependencyProperty IsMyPropertyProperty =\n DependencyProperty.RegisterAttached(\n \"IsMyProperty\",\n typeof(bool),\n typeof(MyAttachedProperties),\n new PropertyMetadata(false));\n\n public static void SetIsMyProperty(UIElement element, bool value)\n {\n element.SetValue(IsMyPropertyProperty, value);\n }\n\n public static bool GetIsMyProperty(UIElement element)\n {\n return (bool)element.GetValue(IsMyPropertyProperty);\n }\n}\n<\/code><\/pre>\nIsMyProperty<\/code> in the MyAttachedProperties<\/code> class. Attached Properties can be applied to UI elements of other classes from outside the class.<\/p>\n2.2 Use of Attached Properties<\/h3>\n
\n
3. Comparison of Dependency Properties and Attached Properties<\/h2>\n
4. Examples of Dependency Properties and Attached Properties<\/h2>\n
Example: Combining Custom Control with Attached Properties<\/h4>\n
public class MyCustomControl : Control\n{\n \/\/ Defining Dependency Property\n public static readonly DependencyProperty MyPropertyProperty =\n DependencyProperty.Register(\n \"MyProperty\",\n typeof(string),\n typeof(MyCustomControl),\n new PropertyMetadata(default(string)));\n\n public string MyProperty\n {\n get { return (string)GetValue(MyPropertyProperty); }\n set { SetValue(MyPropertyProperty, value); }\n }\n}\n\npublic static class MyAttachedProperties\n{\n public static readonly DependencyProperty IsMyPropertyProperty =\n DependencyProperty.RegisterAttached(\n \"IsMyProperty\",\n typeof(bool),\n typeof(MyAttachedProperties),\n new PropertyMetadata(false));\n\n public static void SetIsMyProperty(UIElement element, bool value)\n {\n element.SetValue(IsMyPropertyProperty, value);\n }\n\n public static bool GetIsMyProperty(UIElement element)\n {\n return (bool)element.GetValue(IsMyPropertyProperty);\n }\n}\n<\/code><\/pre>\n5. Practical Example: Building a Simple UWP App<\/h2>\n
5.1 Writing the XAML File<\/h3>\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 xmlns:controls=\"using:MyApp.Controls\">\n\n <Grid>\n <controls:MyCustomControl MyProperty=\"Hello, World!\" \n local:MyAttachedProperties.IsMyProperty=\"True\" \/>\n <\/Grid>\n<\/Page><\/code><\/pre>\n5.2 Writing the C# Code<\/h3>\n
using Windows.UI.Xaml.Controls;\n\nnamespace MyApp\n{\n public sealed partial class MainPage : Page\n {\n public MainPage()\n {\n this.InitializeComponent();\n }\n }\n}<\/code><\/pre>\nConclusion<\/h2>\n