DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

How does AI transform chaos engineering from an experiment into a critical capability? Learn how to effectively operationalize the chaos.

Data quality isn't just a technical issue: It impacts an organization's compliance, operational efficiency, and customer satisfaction.

Are you a front-end or full-stack developer frustrated by front-end distractions? Learn to move forward with tooling and clear boundaries.

Developer Experience: Demand to support engineering teams has risen, and there is a shift from traditional DevOps to workflow improvements.

Related

  • Comprehensive Guide to Property-Based Testing in Go: Principles and Implementation
  • Implement Hibernate Second-Level Cache With NCache
  • Modify JSON Data in Postgres and Hibernate 6
  • Top 10 C# Keywords and Features

Trending

  • Smarter IoT Systems With Edge Computing and AI
  • From OCR Bottlenecks to Structured Understanding
  • Beyond Java Streams: Exploring Alternative Functional Programming Approaches in Java
  • MCP Client Agent: Architecture and Implementation

Introduction to binding in WPF

By 
Denzel D. user avatar
Denzel D.
·
May. 19, 10 · Interview
Likes (0)
Comment
Save
Tweet
Share
12.0K Views

Join the DZone community and get the full member experience.

Join For Free

First of all, as you can see from the term “binding”, something is going to be bound to something else. In WPF, various control properties can be bound to other properties (from other controls or user-specified).

Binding can be performed both from the XAML side of a WPF project, and from code-behind. In this article I will focus on the XAML representation.

There are two type of binding behaviors – one-way and two-way binding. One-way binding means that a property can influence another one, but not the other way around. Two-way binding means that both properties influence each other. To illustrate both examples, let’s take a look at this sample XAML, that shows one-way binding to a Text property:

<Window x:Class="WPF_Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="300" Width="300"
Loaded="Window_Loaded">

<Grid>
<TextBox Height="35" HorizontalAlignment="Left" Margin="12,12,0,0" Name="textBox1" VerticalAlignment="Top" Width="150" />
<TextBox Height="35" HorizontalAlignment="Left" Margin="12,53,0,0" Name="textBox2" VerticalAlignment="Top" Width="150" Text="{Binding ElementName=textBox1,Path=Text}"/>
</Grid>
</Window>
As you see here, the second TextBox control doesn’t have a direct Text property assignment, but rather a binding element - "{Binding ElementName=textBox1,Path=Text}" Binding elements are placed inside braces. For this specific example, I am binding the property of a control to another one, therefore I am using ElementName to point to the referenced element. Path shows the path to the property I am going to bind to, inside the referenced control. If you run the application, you will see that once you modify the text in the first TextBox control, the same text will appear in the second TextBox. This is a very simple representation of one-way binding.

Now let’s take a look at an example showing the capabilities of two-way binding.
<Window x:Class="WPF_Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="300" Width="300"
Loaded="Window_Loaded">
<Grid>
<TextBox Height="35" HorizontalAlignment="Left" Margin="12,12,0,0" Name="textBox2" VerticalAlignment="Top" Width="150" />
<TextBox Height="35" HorizontalAlignment="Left" Margin="12,53,0,0" Name="textBox1" VerticalAlignment="Top" Width="150" Text="{Binding ElementName=textBox2,Path=Text,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
</Window>
The XAML markup is quite similar, but now the binding element has changed a bit - "{Binding ElementName=textBox1,Path=Text,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}".

I am binding to the same property, however, I am explicitly showing that this is a two-way binding via Mode. UpdateSourceTrigger indicates the cause of the source (in this case the first TexBox) property change and PropertyChanged means that the analogue property (same as I am binding to) is changed.

I am using this instead of another "{Binding ElementName=textBox1,Path=Text}" inside the second TextBox element, however this is also an acceptable solution.

Binding can be made to almost anything. Let’s experiment a bit with user-set properties. In the code-behind, I am going to create a property called ProgressValue:
double progress = 0;
public double ProgressValue
{
get { return progress; }
set { progress = value / 100; }
}
I am going to use it to bind to a ProgressBar control, that will later pass the value to the progress bar in the Taskbar (if you are using Windows 7 only). If you are not using Windows 7, you can familiarize yourself with the basic principles of external property binding, as these can apply to anything the user wants to specify (not only ProgressBar controls).

I also modified the XAML markup for my window, to add the ProgressBar control inside the main window, as well as reference the one in the Taskbar.
<Window x:Class="WPF_Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="300" Width="300"
Loaded="Window_Loaded">

<Window.TaskbarItemInfo>
<TaskbarItemInfo ProgressValue="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=ProgressValue}" ProgressState="Normal"></TaskbarItemInfo>
</Window.TaskbarItemInfo>
<Grid x:Name="Grid1">
<ProgressBar x:Name="progressBar1" Height="59" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="256" Value="50" ValueChanged="progressBar1_ValueChanged" />
</Grid>
</Window>
You can see here the Window.TaskbarItemInfo element – this handles the Taskbar contents in Windows 7, but at this point I am more interested how it is bound to a property. The ProgressValue property is set to "{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=ProgressValue}"  - I am actually showing that the property I am binding to is located inside the ancestor class (WPF_Test.MainWindow – set by RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}) and the property is called ProgressValue (set by Path).

You might be wondering – what is RelativeSource? This is a way to reference properties located in controls that are relative to the current element. For example, the window is relative to the ProgressBar by being its ancestor of type Window. This way, I can also search for child elements.

At this point you might also be wondering why inside the property I am setting the value of progress to the passed value divided by 100. This is because the ProgressValue property of the TaskBarItemInfo is ranged between 0 and 1, therefore I need to pass a proportional value to it, since in a regular ProgressBar the values range between 0 and 100. This can be adjusted to personal needs.

But let’s get back to binding. Now, inside the progressBar1_ValueChanged event handler (that is triggered every time the value is changed in the ProgressBar control I am using this code to set the value to the existing property:
ProgressValue = progressBar1.Value;
Simple as that. Now all you need to do is run the application and see the progress bar in the Taskbar filled to 50% (I am using this pre-set value in XAML).

As you see, binding is a very important capability in WPF and once you fully understand its concept, you can easily apply it to a multitude of situations that require the developer to bind control properties and to change them depending on the state of other properties.
Binding (linguistics) Windows Presentation Foundation Property (programming)

Opinions expressed by DZone contributors are their own.

Related

  • Comprehensive Guide to Property-Based Testing in Go: Principles and Implementation
  • Implement Hibernate Second-Level Cache With NCache
  • Modify JSON Data in Postgres and Hibernate 6
  • Top 10 C# Keywords and Features

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • [email protected]

Let's be friends: