×
iFour Logo

A simple guide on WPF RelativeSources

Hemangi Tank - August 19, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

Sustainable

Table of Content

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

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.


    
        
            
            
                
                    
                        
                        
                        
                        
                    
                
            
        
    
  
				
Self_Property-Output
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.

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.


    
        
            
                
                    
                       

         
       
                            
                                
                                
                            
                        
                    
                
            
        
    

				
Find Ancestor Property-Output
Image: Find Ancestor Property-Output

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.



    
        
    

				
Templated Parent Property-Output
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 ? Your Search ends here.

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.


             
                      


				
Previous Data Property-Output
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.

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 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. 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? 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.

Author Bio

User Image

Author Name : Hemangi Tank

Hemangi Tank is an accomplished .NET professional specialized in the WPF platform. Taking a wide view of the process and development, she fabulously demonstrates concepts and shares impeccable insights on various platforms.

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 

Blog Our insights

The best optimization possibilities for your ASP.NET web application
The best optimization possibilities for your ASP.NET web application

Table of Content 1. Reduce the size of images 2. Reduce HTTP requests & use server-side redirects 3. Identify bottlenecks for a better user experience 4. Application...

Read More
 Is ASP.NET good platform to build an eCommerce website?
Is ASP.NET good platform to build an eCommerce website?

Table of Content 1. High security functionality that ASP.NET confers 2. Create website with the absolute minimum of functionality 3. Ability to enable simple integrations 4....

Read More
Is .NET framework dead and what is its future?
Is .NET framework dead and what is its future?

Table of Content 1. Feel a gap exists between release & sustainability of the Microsoft products 2. It will never update 3. Microsoft will replace .NET with something...

Read More