My Visual C#: Data Binding

In this example, we use data binding and bind a slider with a text. When we play with slider, the text will change.

App Name: DataBSlider

Actually, this task can be accomplished without using C#. Once we create a slide and textbox, we can bind them in XAML. Add the following lines in your XAML file to achieve this.

Now, you should have an app with a textbox whose value is controlled with a slide bar as shown in figure 1

Figure 1

However, we want to bind the slider to an integer since we can do a lot more this way. We are going to create two properties: sliderValue and sliderText. sliderText will be the property related to text box and sliderValue will be associated with the value coming from the slider. To do that, in XAML we use the following:

And here’s how my mainpage.xaml.cs looks like:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Navigation;

using Microsoft.Phone.Controls;

using Microsoft.Phone.Shell;

using DataBSlider.Resources;

using System.ComponentModel;

namespace DataBSlider

{

public class DataControls : INotifyPropertyChanged

{

public string sliderText

{

get { return Convert.ToString(sliderValue); }

}

public int _sliderValue;

public int sliderValue

{

get { return _sliderValue; }

set { _sliderValue=value; Notify("sliderText"); Notify("sliderValue"); }

}

public event PropertyChangedEventHandler PropertyChanged;

public void Notify(string propName)

{

if (PropertyChanged != null)

PropertyChanged(this, new PropertyChangedEventArgs(propName));

}

public partial class MainPage : PhoneApplicationPage

{

// Constructor

DataControls myData;

public MainPage()

{

InitializeComponent();

Loaded += MainPage_Loaded;

}

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

myData = new DataControls();

myData.sliderValue = 20;

ContentPanel.DataContext = myData;

}

The code works! I get a similar output as before but since I used an integer, the value is read as an integer. Image 2 shows my output for the code

Figure 2

In this example, we are moving one step further with data binding to a control element and we are updating our binding element with implementing INotifyPropertyChanged

The first task is to figure out how to group radio buttons. For example, you might have 2 group of options to select for a patient recording program. You might want to record the gender and age. If you want to do it with radio buttons, you’d have something like in the image

Here, gender and age range options are grouped differently so we can have two selected options at once. (If they were all grouped into one group, you’d only be able to select one option). This can be done in XAML, using the following:

</Grid>

Now that we figured how to add multiple groups of radio buttons, let's go back to data binding. Now, I want to add another text that is controlled by the radio buttons. This text should have the information related to patient’s gender. In addition, it should update every time I select the corresponding radio button. First, I add this text in XAML as:

In order to update this text with changes in radio buttons, the program should be able to tell if the status of the radio buttons are updated as well. For this, I need “Two Way Binding” so I have to change my radio buttons code in XAML file as:

Now, my work with XAML is done and I need to update my MaingPage.xaml.cs In short, here’s a list of what I need to do in my .cs file to implement the code:

1. I need to inherit from INotifyPropertyChanged so when a property changes, I can detect it and do as I wish

2. I need to add string and Boolean properties to control the flow of the program and change the variables as I wish

Here’s how my .cs file looks like:

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Navigation;

using Microsoft.Phone.Controls;

using Microsoft.Phone.Shell;

using RadioButtonsBinding.Resources;

namespace RadioButtonsBinding

{

public class Patient : INotifyPropertyChanged

{

public bool _patientMale;

public bool patientMale

{

get {return _patientMale;}

set { _patientMale = value; Notify("patientMale"); Notify("genderText"); }

}

public bool _patientFemale;

public bool patientFemale

{

get { return _patientFemale; }

set { _patientFemale = value; Notify("patientFemale"); Notify("genderText"); }

}

public event PropertyChangedEventHandler PropertyChanged;

public void Notify(string propName)

{

if (PropertyChanged != null)

PropertyChanged(this, new PropertyChangedEventArgs(propName));

}

public string _genderText;

public string genderText

{

get

{

string common_string = "The gender of the patient is: ";

if (_patientFemale)

{ return common_string+"Female"; }

else { return common_string + "Male"; }

}

public partial class MainPage : PhoneApplicationPage

{

// Constructor

Patient newPatient;

public MainPage()

{

InitializeComponent();

Loaded += MainPage_Loaded;

}

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

newPatient = new Patient();

ContentPanel.DataContext = newPatient;

}

Now the program works as I want and here are the screen outputs:

The text dynamically changes every time I select a different gender with the radio button!

My Visual C#

This blog is about learning visual c#, XAML and .NET environment to develop for windows OS.

Develop for mobile devices

Develop for personal computers

Develop for high performance servers

Develop games, apps, tools

Learn coding to think better

Saturday, January 25, 2014

Data Binding with a Slider

Data Binding with Radio Buttons and Two Way Binding

Categories

Blog Archive

Popular Posts

Useful Links

Blogroll

About