Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Attached Properties are an elegant solution to an old problem. For illustration of the problem, let's look at the Windows form model. The form class in Windows forms serves as a container for controls. The form excels at arranging the child controls on the screen. You can set the position of each control with an X and Y coordinate, or you can use other layout methods like Docking and Anchoring. The Windows forms controls are tied to the forms implementation. They have dedicated properties like Button.Left or Button.Dock or even TextBox.Anchor.
The problem with this model is that you end up with tight coupling between the form and any controls that are hosted by the form. If an innovative new layout ID appears, both the form and every hosted control must be changed to make this work. Granted, you can create a control base class to mitigate some of the coupling, but there are other issues. For an example, let's say you come up with an innovative new polar layout where controls are arranged around a center point in a circular fashion. You'd have to modify the form to arrange the controls in this pattern and you'd have to change the controls to have a new polar property.
And third-party developers would be out of luck, unless they could subclass the form class. Silverlight has a better way to handle this scenario. That better way is called the Attached Property. The Attached Property is a Dependency Property which means that it is managed by the Dependency Property system and it helps provide a decoupled extensible model. You can think of Attached Properties as Global Properties; global in the sense that they are available as a property on any XAML type. They are defined within a type or owned by that type, let's say the Canvas class. The canvas registers an Attached Property with the Dependency Property system.
It does that with the DependencyProperty.RegisterAttached method. Once that is done, then the property is no longer isolated to the Canvas class. Any other element can set the new attach property. To differentiate it from normal dependency properties, it uses a special dotted syntax which is TypeName. And the AttachProperty name. Let me show you an example. I'm inside Visual Studio and I'm inside a project called UnderstandingAttachedProperties. I've opened MainPage.xaml and I have scrolled down to the section where I have a Grid that contains a RadioButton.
If I set a property on this RadioButton that doesn't exist, let's say I call one Bogus= 5. The parser looks at my code and sees that the Bogus is not a property on the RadioButton class and it flags it as a parser error. If, I added the Bogus property to the RadioButton, it would not be available to any of the other elements. What it could do is attach it to a Grid or the StackPanel. And then I can use just dotted syntax like here. Here is an example of an Attached Property the ToolTipService class has registered a property called ToolTip.
And now, I can use this on any XAML element. Because it's been registered, I don't get a parser error. Here are some other examples. I have a Grid that has a ListBox. In this case I'm setting the Grids Attached Property Column = to a value of 4. And I am setting this TextBlock Canvas.Top property = to 50. I'm inside a Grid, but I am setting a Canvas property. That's allowed because it's an Attached Property. I will show you more what happens with that in a minute and return back to my slides.
Here are some other examples. Some of the other attached properties you can find AutomationProperties.AcceleratorKey, InputMethod.IsInputMethodEnabled, and so on. I would say that the most common place that you can find attached properties are in the Layout panels like the Canvas, the Grid or the Dock panel. They have attached properties that are used by children elements. The child communicates where it should be positioned within the panel by setting an Attached Property. Let's take a look at the key points here. An Attached Property value is stored in the Dependency Property System.
And element sets the Attached Property. The setting is stored in the system and affiliated with the element that set the value. The owning class can query that dependency system to see if an element has set the Attached Property and if so, can get the current value. And then it can make a decision about what to do with that value. So returning back to my project and looking at the Attached Property here. This is a Canvas.Top and there is no canvas that is interested in listening to that, and otherwise my TextBlock is not inside a Canvas at the moment, so there's no parent element that can query this.
However, there it is a Grid as a parent. So the Grid is going to go to the dependency system say, I've got a ListBox, does it have any Grid attached properties. If so, let me know what they are. And I have a TextBlock, does it have any Grid attached properties, if so, let me know what they are. And then they can use these to make a decision about what to arrange the two controls on the screen. If I add a Polar Panel in the future, none of the existing controls need to be modified, so let me show you that example. I have created a Polar Panel.
I'm deriving from the Panel base class. It's got a number of properties on it that are used for arranging items on the screen, and it has registered an Attached Property here. There is an Attached Property called Angle and an Attached Property called Radius. Now I can go over to my project and show you how to use this Attached Property. I'm going to go to this UsePolarPanel.xaml. I'm going to instantiate a PolarPanel. I'm going to add a Button and I'm going to set this property to PolarPanel.Angle = 0, and PolarPanel.Radius = 100.
Again, my Button control did not need to be modified in order to use this Attached Property. Let's see what this looks like when I run the application. I will go to App.xaml, open my CS file uncomment this line of code to use that PolarPanel and comment out this first line, and you can see that these buttons are being arranged around the center point. As I have said, Attached Properties are commonly use with Layout panels and you can find more information about their usage in other movies in this series.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101682 Viewers
61 Video lessons · 88435 Viewers
71 Video lessons · 72274 Viewers
56 Video lessons · 104000 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.