Windows Store App Radio Button Validation

Introduction

In this article we will create a Metro Style application implementing validation on Radio buttons of XAML controls. Here we will create a simple registration form that will collect basically three peices of information of user input; they are User Name, User Email Id and Course. Course is the course that the user completes as their professional education. There are three options for the course of the user; MCA, MBA and B.Tech that is implemented by the radio buttons. The user can select one of the radio buttons depending on their professional education. On the submitted button click event, if the user does not select a course then it will show the message "select a course" otherwise it shows the message that the registration was successful. 

In the following we are putting whole code of XAML file and code behind file to create this mini application. 

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how you will create it.

• Open Visual Studio 2012
• File -> New -> Project
• Choose Template -> Visual C# -> Metro Style Application
• Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the MainPage.xaml and MainPage.xaml.cs files.

Step 3 : The MainPage.xaml file is as in the following code:

Code :

<Page

    x:Class="App9.MainPage"

    IsTabStop="false"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:App9"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

<Grid x:Name="LayoutRoot">

        <Grid.RowDefinitions>

            <RowDefinition Height="0.112*"/>

            <RowDefinition Height="0.081*"/>

            <RowDefinition Height="0.058*"/>

            <RowDefinition Height="0.054*"/>

            <RowDefinition Height="0.052*"/>

            <RowDefinition Height="0.056*"/>

            <RowDefinition Height="0.056*"/>

            <RowDefinition Height="0.529*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="0.333*"/>

            <ColumnDefinition Width="0.022*"/>

            <ColumnDefinition Width="0.312*"/>

            <ColumnDefinition Width="0.333*"/>

        </Grid.ColumnDefinitions>

        <Grid.Background>

            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="Yellow" Offset="1"/>

                <GradientStop Color="Green"/>

            </LinearGradientBrush>

        </Grid.Background>

        <TextBlock Text="Registration Form" FontSize="30" Foreground="Red" FontWeight="Bold"

                   TextWrapping="Wrap" Margin="0" Grid.Row="1" HorizontalAlignment="Right"

                   VerticalAlignment="Center"/>

        <TextBlock Text="User Name" FontSize="20" TextWrapping="Wrap" Margin="0" Grid.Row="2"

                   HorizontalAlignment="Right" VerticalAlignment="Center"/>

        <TextBlock HorizontalAlignment="Right" FontSize="20" Margin="0" VerticalAlignment="Center"

                   Grid.Row="3" Text="Email ID" TextWrapping="Wrap"/>

        <TextBlock HorizontalAlignment="Right" FontSize="20" Margin="0" VerticalAlignment="Center"

                    Grid.Row="4" Text="Course" TextWrapping="Wrap"/>

        <TextBlock x:Name="txtval" Grid.Column="2" Grid.Row="5" Text="Please select one course"

                  FontSize="30" Foreground="Red" FontWeight="Bold" Margin="50,0,0,0"

                  Visibility="Collapsed">

        </TextBlock>

        <TextBox x:Name="txtUserName" TextWrapping="Wrap" Margin="0" Grid.Column="2" Grid.Row="2"

                 d:LayoutOverrides="Height" VerticalAlignment="Center">

        <TextBox.Text>

                <Binding Mode="TwoWay" Path="UserName" />

            </TextBox.Text>

        </TextBox>

        <TextBox x:Name="txtEmailID" Margin="0" VerticalAlignment="Center"

                 Grid.Column="2" Grid.Row="3" TextWrapping="Wrap">

            <TextBox.Text>

                <Binding Mode="TwoWay" Path="EmailID" />

            </TextBox.Text>

        </TextBox>

        <RadioButton x:Name="rbtn1" Grid.Column="2" Grid.Row="4"></RadioButton>

        <TextBlock Text="MCA" Grid.Column="2" Grid.Row="4" Margin="50,10,0,10" FontSize="16"></TextBlock>

        <RadioButton x:Name="rbtn2" Grid.Column="2" Grid.Row="4" Margin="150,0,0,0" ></RadioButton>

        <TextBlock Text="MBA" Grid.Column="2" Grid.Row="4" Margin="200,10,0,10" FontSize="16"></TextBlock>

        <RadioButton x:Name="rbtn3" Grid.Column="2" Grid.Row="4" Margin="300,0,0,0" ></RadioButton>

        <TextBlock Text="B.Tech" Grid.Column="2" Grid.Row="4" Margin="350,10,0,10" FontSize="16"></TextBlock>

        <Button Click="Button_Click_1" Grid.Column="2" Grid.Row="6"  Content="Submitted"

               Background="Red" HorizontalAlignment="Center"></Button>

    </Grid>

</Page>

Step 4 : The MainPage.xaml.cs file is as in the following code:

Code :

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

 

namespace App9

{

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

        }

 

        private void Button_Click_1(object sender, RoutedEventArgs e)

        {

            if (rbtn1.IsChecked == true || rbtn2.IsChecked == true || rbtn3.IsChecked == true)

            {

                txtval.Text = "Registered Successfully";

                txtval.Visibility = Windows.UI.Xaml.Visibility.Visible;

            }

            else

            {

                txtval.Visibility = Windows.UI.Xaml.Visibility.Visible;

            }

          

        }

    }

}

Step 5 : After running this code the output looks like this: