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 x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <RadioButton GroupName="ButtonGroup1" Content="12 or younger" HorizontalAlignment="Left" Margin="36,61,0,0" VerticalAlignment="Top"/>
            <RadioButton GroupName="ButtonGroup1" Content="Between 12 and 18" HorizontalAlignment="Left" Margin="36,136,0,0" VerticalAlignment="Top"/>
            <RadioButton GroupName="ButtonGroup1" Content="18 or older" HorizontalAlignment="Left" Margin="36,211,0,0" VerticalAlignment="Top"/>

            <RadioButton GroupName="ButtonGroup2" Content="Female" HorizontalAlignment="Left" Margin="29,338,0,0" VerticalAlignment="Top"/>
            <RadioButton GroupName="ButtonGroup2" Content="Male" HorizontalAlignment="Left" Margin="29,388,0,0" VerticalAlignment="Top"/>
            <TextBlock HorizontalAlignment="Left" Margin="50,29,0,0" TextWrapping="Wrap" Text="Select Age Range" VerticalAlignment="Top" Height="32" Width="155"/>
            <TextBlock HorizontalAlignment="Left" Margin="50,306,0,0" TextWrapping="Wrap" Text="Select Gender" VerticalAlignment="Top" Height="32" Width="155"/>

        </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:


<TextBlock x:Name="GenderText" HorizontalAlignment="Left" Margin="36,491,0,0" TextWrapping="Wrap" Text="{Binding genderText, Mode=TwoWay}" VerticalAlignment="Top" Height="32" Width="352"/>

 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:

            <RadioButton GroupName="ButtonGroup2" Content="Female" HorizontalAlignment="Left" Margin="29,338,0,0" VerticalAlignment="Top" IsChecked="{Binding patientFemale, Mode=TwoWay}"/>
            <RadioButton GroupName="ButtonGroup2" Content="Male" HorizontalAlignment="Left" Margin="29,388,0,0" VerticalAlignment="Top" IsChecked="{Binding patientMale, Mode=TwoWay}"/>


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!