×

iFour Logo

A simple guide on WPF RelativeSources

Kapil Panchal - August 19, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  • play
  • pause
  • pause
A simple guide on WPF RelativeSources

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 });
        }
}

				

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.

Build Your Agile Team

Enter your e-mail address Please enter valid e-mail

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 

Blog Our insights

Streamlining E-commerce Operations with Microsoft PowerApps
Streamlining E-commerce Operations with Microsoft PowerApps

In today's rapidly changing digital world, eCommerce is a dynamic industry. Every day, millions of transactions take place online, so companies are always looking for new and creative methods to improve consumer satisfaction and optimize operations.

Boost Your Sales Strategy Using AI and Power Platform Services
Boost Your Sales Strategy Using AI and Power Platform Services

Did you know that businesses with a well-defined sales strategy are 33% more likely to achieve their revenue targets? It's true; a strategic approach to selling can make all the difference. From brand promotion to customer targeting, each aspect plays a crucial role in driving success. And with the integration of AI and Power Platforms, businesses are seeing even greater results – with efficiency and effectiveness at an all-time high.

9 Ways AI Is Changing the Technology Trends in 2024
9 Ways AI Is Changing the Technology Trends in 2024

Nothing in the world is immune to the effects of technology which will eventually change everything beyond recognition. Some changes happen immediately and those that take time people...