A simple guide on WPF RelativeSources

WPF RelativeSource Modes

---

Self Mode

This mode is used when an object binds its property to its own other property or its parent. It means that we can use this mode when the source element is similar to the target property.

Image: Self Property-Output

This property is used to link the property of the given element to one of its direct parents in all elements as it has the parent property defined inside it. Here, the height of the window is the parent for the width of the Ellipse.

Planning to Hire Desktop App Development Company?

LET'S DISCUSS

FindAncestor Mode

This mode is similar to the self-mode. The only difference is, here we can choose the ancestor or parent of the element to which the actual property is defined. It has two properties to give the value i.e. ancestor type and ancestor rank.

Image: Find Ancestor Property-Output

Read More: What Is New In Xaml Developer Tools In Visual Studio 2019 For Wpf & Uwp?

WPF RelativeSource TemplatedParent Mode

To link any control template property with the other control to which the control template is applied. At the time, when we have to apply the property to the ControlTemplate of any control, then we can use this method.

Image: Templated Parent Property-Output

There is a similar property available called TemplateBinding evaluated at the compile time. It is the short-hand of the TemplatedParent which runs first at the time of execution.

PreviousData Mode

This mode is very puzzling and the less used mode out of all modes of RelativeSource modes. It is used for discrete cases. The agenda of this method is to link the value of any control to the new one. For example, if we have to use the value of textbox in any other textbox or text block, we can use PreviousData mode. And from this, we get that we have to use this mode with the item controls.

Example:

Firstly, create the ItemsControl using the custom collection.

class Items : ObservableCollection
{
        public Items()
        {
            Add(new Item { Value = 110.30 });
            Add(new Item { Value = 200 });
            Add(new Item { Value = 70.89 });
            Add(new Item { Value = 123.45 });
            Add(new Item { Value = 222.00 });
            Add(new Item { Value = 50.50 });
        }
}

				

Planning to Hire WPF App Development Company ?

LET'S DISCUSS

In this, we use ObservableCollection of Item type. It has only one value of type double.

Now, we create the class for Item.

namespace RelativeSrc
{
    class Item : INotifyPropertyChanged
    {
        private double _value;

        public double Value
        {
            get { return _value; }
            set { _value = value; OnPropertyChanged("Value"); }
        }
        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string PropertyName)
        {
            if (null != PropertyChanged)
            {
                PropertyChanged(this,
                     new PropertyChangedEventArgs(PropertyName));
            }
        }
    }
}
				

Now, for binding the ItemsControl to the collection of data, we set constructor level collection of DataContext property to the whole Document

public partial class PreviousDataProp: Window
{
   public PreviousDataProp()
   {
      InitializeComponent();
      this.DataContext = new Items();
    }
}				
				

Now by adding the ItemsControl with the Binding property and we can observe bit improvement with the actual view of the ItemsControl.

This code only shows the actual present data specified in the Items collection. To get the previous data of the collection we have to add one textblock having the PreviousData property. And in this textblock, we add the value of previous border value to the items list control and through this, we get the actual output as visualized.

Image: Previous Data Property-Output

Here, we can see the value of the previous item is displayed in the new text block which we added recently.

A simple guide on WPF RelativeSources Table of Content 1. RelativeSource Modes 1.1. Self Mode 1.2. FindAncestor Mode 1.3. TemplatedParent Mode 1.4. PreviousData Mode 2. Conclusion WPF RelativeSource is a Markup Extension that assists us in binding data of an element with another source element using its relationship. It states about the source position that where it falls relative to a given element. It can be used with the Bindings property of any object to another object’s property or its relative parent or when we bind them to a dependency property and lastly, the distinctive series of the bounded data. It Gets or Sets the binding property of the source by specifying the location relative to the position of the target element type. Its default value is NULL. { and } (curly braces) are used to write all the markup extension codes in XAML. It is the syntax for the markup extension attributes. And through this only, the XAML processor diagnoses that a markup extension must have to process the particular attribute WPF RelativeSource Modes Self Mode This mode is used when an object binds its property to its own other property or its parent. It means that we can use this mode when the source element is similar to the target property. Image: Self Property-Output This property is used to link the property of the given element to one of its direct parents in all elements as it has the parent property defined inside it. Here, the height of the window is the parent for the width of the Ellipse. Planning to Hire Desktop App Development Company? LET'S DISCUSS FindAncestor Mode This mode is similar to the self-mode. The only difference is, here we can choose the ancestor or parent of the element to which the actual property is defined. It has two properties to give the value i.e. ancestor type and ancestor rank. Image: Find Ancestor Property-Output Read More: What Is New In Xaml Developer Tools In Visual Studio 2019 For Wpf & Uwp? WPF RelativeSource TemplatedParent Mode To link any control template property with the other control to which the control template is applied. At the time, when we have to apply the property to the ControlTemplate of any control, then we can use this method. Image: Templated Parent Property-Output There is a similar property available called TemplateBinding evaluated at the compile time. It is the short-hand of the TemplatedParent which runs first at the time of execution. PreviousData Mode This mode is very puzzling and the less used mode out of all modes of RelativeSource modes. It is used for discrete cases. The agenda of this method is to link the value of any control to the new one. For example, if we have to use the value of textbox in any other textbox or text block, we can use PreviousData mode. And from this, we get that we have to use this mode with the item controls. Example: Firstly, create the ItemsControl using the custom collection. class Items : ObservableCollection { public Items() { Add(new Item { Value = 110.30 }); Add(new Item { Value = 200 }); Add(new Item { Value = 70.89 }); Add(new Item { Value = 123.45 }); Add(new Item { Value = 222.00 }); Add(new Item { Value = 50.50 }); } } Planning to Hire WPF App Development Company ? LET'S DISCUSS In this, we use ObservableCollection of Item type. It has only one value of type double. Now, we create the class for Item. namespace RelativeSrc { class Item : INotifyPropertyChanged { private double _value; public double Value { get { return _value; } set { _value = value; OnPropertyChanged("Value"); } } public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(string PropertyName) { if (null != PropertyChanged) { PropertyChanged(this, new PropertyChangedEventArgs(PropertyName)); } } } } Now, for binding the ItemsControl to the collection of data, we set constructor level collection of DataContext property to the whole Document public partial class PreviousDataProp: Window { public PreviousDataProp() { InitializeComponent(); this.DataContext = new Items(); } } Now by adding the ItemsControl with the Binding property and we can observe bit improvement with the actual view of the ItemsControl. This code only shows the actual present data specified in the Items collection. To get the previous data of the collection we have to add one textblock having the PreviousData property. And in this textblock, we add the value of previous border value to the items list control and through this, we get the actual output as visualized. Image: Previous Data Property-Output Here, we can see the value of the previous item is displayed in the new text block which we added recently. Conclusion As we know, RelativeSource is a Markup extension. So markup extensions are generally implemented at the time when we have to escape the values of the attribute to be the value of any other literal or handler named. However, the requirement should also be global not just to put the type converters determined properties or types.

Kapil Panchal

A passionate Technical writer and an SEO freak working as a Technical Content Manager at iFour Technolab, USA. With extensive experience in IT, Services, and Product sectors, I relish writing about technology and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.