WPF, the Windows Presentation Foundation, is a .NET API for building Windows applications. Much has been written about how WPF makes it easier than ever before to create visually impressive applications, but it has other talents which, although less eye catching, make WPF a powerful technology for building front ends. In particular, the .NET framework’s strong support for connected systems combined with WPF’s approach to data binding to make it a compelling choice for presenting information from back-end services written in any technology, such as Java, Ruby, or .NET. In our recent articles we mentioned SSR, Gatsby, Next Js but today we will see What is WPF and how To Use Data Binding in WPF Framework?

WPF as a Rich Client API

WPF is not the first rich client API to be available in .NET. However its predecessor, Windows Forms, is essentially a .NET layer on top of Win32’s windowing system. And while Windows Forms added a lot of functionality on top of Win32, it was still constrained by certain limitations in the underlying UI platform. WPF does not build on Win32’s windowing system. Instead, it builds on DirectX, which enables it to exploit the full power of the local machine’s graphics card. However, WPF is not just about impressive-looking applications.

Front End Development In WPF

We can build some good front end design of many applications in WPF. As there is a lot of features availible that makes it easy. We can also easily make a WPF form in Visual studio and then drag and drop to make our program. Also we can edit the xaml file to extend our capabilities. WPF is designed to run only on Windows. This means it is able to take full advantage of the local PC’s capabilities, and especially the power of the graphics hardware. This enables features such as high performance rendering of advanced data visualization, or also more cosmetic touches like animation and video.

Data Binding (Contact Book as Example)

Compared with Swing, WPF offers two notable benefits. The first is WPF’s data binding system, especially the XML binding and the data template features. WPF is able to bind directly to XML as a data source. It does not require it to be wrapped in any way. To illustrate this, we’ll bind to a very simple but very popular form of XML data. I will be giving an example of a small Contact book developed by me. In which contacts are displayed in the Listbox. But by clicking a certain contact its information is displayed in the TextBox. As Shown in the Below image.

Its Xaml Code is given below of How a listbox is binded to the textboxes.

Code

<TextBox x:Name=”fn_txt” HorizontalAlignment=”Left” Height=”23″ Margin=”535,57,0,0″ TextWrapping=”Wrap” Text=”{Binding ElementName=listContacts,Path=SelectedItem.FirstName, Mode=OneWay}” />

<TextBox x:Name=”ln_txt” HorizontalAlignment=”Left” Height=”23″ Margin=”535,105,0,0″ TextWrapping=”Wrap” Text=”{Binding ElementName=listContacts,Path=SelectedItem.LastName, Mode=OneWay}”

/>

<TextBox x:Name=”company_txt” HorizontalAlignment=”Left” Height=”23″ Margin=”535,297,0,0″ TextWrapping=”Wrap” Text=”{Binding ElementName=listContacts,Path=SelectedItem.company, Mode=OneWay}” />

<TextBox x:Name=”job_txt” HorizontalAlignment=”Left” Height=”23″ Margin=”535,248,0,0″ TextWrapping=”Wrap” Text=”{Binding ElementName=listContacts,Path=SelectedItem.jobtitle, Mode=OneWay}” />

// We are binding the Text of TextBox to the certain class attibute of the contact selected.

Data Template

A data template is a reusable description of how to present a piece of data. You can apply a data template to multiple items, e.g. every item in a list, in order to present information consistently.

In the below example i had created a template for an item of the listbox. So it is reused for every other item. I simple show Name ,image and contact number of the item instead of showing whole details stored in the list.

To create a template.. Simply right click on the WPF element. And go to Edit Additiona template and click create empty. Then create your template according to your need.

Template

<ListBox.Resources>

   <DataTemplate x:Key=”listTemplate”>

      <Grid Height=”75″ Width=”275″ Background=”{x:Null}”>

          <Image Source=”{Binding imagePath}” />

          <Label Content=”{Binding FirstName}” HorizontalAlignment=”Left” />

          <Label Content=”{Binding phone}” HorizontalAlignment=”Left” />

                    </Grid>

      </DataTemplate>

In the above code image, name and contact is binded from the contact and only these fields are reused again and again. Each item in the list is presented by a DataTemplate, which in this example has been specified inline inside the ListBox. This template shows how to arrange and format each item, and which pieces of data to extract from the item.

Conclusion

 So this is how Data binding is used in WPF. Its advantage is that you can access data directly from an item or from a class without writing lengthy code. So simple bind two elements together and they work on the runtime.  Data Binding provides a very convenient means of connecting data retrieved from a service to the UI. Like any rich client application, a WPF application can of course provides whatever client-side intelligence and behavior we would like. While these examples deliberately used extremely simple visuals to emphasize that WPF is more than just a pretty face, WPF has the potential to take the prosaic but useful world of data binding and ordinary Windows controls, and enhance it with visually rich presentation.

Github

Here is the link of the Contact book i have developed using WPF data binding. You can access the complete code from here.      

https://github.com/uzair0439/ContactBook_WPF_Databinding

Keep visiting infosectweaks for more news and information on technology. For any queries, contact us

LEAVE A REPLY

Please enter your comment!
Please enter your name here