Age Calculation Using Calendar Date Picker Control In Universal Application Development With XAML And C#

Before reading this article, please go through the article's hyperlink, given below:

1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

Reading this article, you can learn, how to use Calendar Date Picker control, TextBlock control, and Button Control in Visual C# environment. Also, you are able to develop age calculation between your birth date and current date in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP:

1. Windows 10 (Recommended)
2. Visual Studio 2015 Community Edition (It is a free software available online)

Now, we can discuss step by step app development.

Step1: Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank App -> Give the Suitable name for your app (Agecalculation) ->OK, choose the Target and minimum platform version for your Windows Universal Application will support. After the project, create App.xaml and MainPage.xaml.



Step 2: Open (double click) the file MainPage.xaml in the Solution Explorer and click on the Toolbox tab on the left to open the list of common XAML controls. Expand common XAML controls, drag the required control to the middle of the design canvas, based on our age calculation.

Control Name	Name Property	Text /Content Property	Click Event Method
TextBlock	tblTitle	Age calculation	-
TextBlock	tblFrom	From Date	-
TextBlock	tblTo	To Date	-
CalendarDatePicker	CDPFromDate	-	-
CalendarDatePicker	CDPTODate	-	-
Button	btnCalculate	Calculate	calculate
TextBlock	tblResult	-	-

After dragging and dropping of the TextBlock control, you have to change the name and text property.



After dragging  and dropping of the Calendar Date Picker control, you have to change the name property.



After dragging and dropping the Button control, you have to change the name and content of the button control property.



After dragging and dropping of the TextBlock control, you have to change the name and set the text property as empty (don’t give any content) for result view.



Add an event method in the button control, ex., click event is used for calculate method.



The age calculation code is given below: 



Final design of your project is:



Note: Automatically, the following code will be generated in XAML code view, while we are done in the design view.

<Page x:Class="Agecalculation.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Agecalculation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,0,10,255">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="74,67,0,0" TextWrapping="Wrap" Text="Age Calculation" VerticalAlignment="Top" Height="36" Width="185" FontWeight="Bold" FontSize="24" />
        <TextBlock x:Name="tblFrom" HorizontalAlignment="Left" Margin="28,149,0,0" TextWrapping="Wrap" Text="From Date" VerticalAlignment="Top" ToolTipService.ToolTip="Select Your Birth Date" />
        <TextBlock x:Name="tblTodate" HorizontalAlignment="Left" Margin="209,149,0,0" TextWrapping="Wrap" Text="To Date" VerticalAlignment="Top" />
        <CalendarDatePicker x:Name="CDPFromDate" HorizontalAlignment="Left" Margin="28,174,0,0" VerticalAlignment="Top" />
        <CalendarDatePicker x:Name="CDPTODate" HorizontalAlignment="Left" Margin="209,174,0,0" VerticalAlignment="Top" />
        <Button x:Name="btnCalculate" Content="Caculate" HorizontalAlignment="Left" Margin="135,297,0,0" VerticalAlignment="Top" FontWeight="Bold" Click="Calculate" />
        <TextBlock x:Name="tblResult" HorizontalAlignment="Left" Margin="28,222,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" Width="308" /> </Grid>
</Page>

Step 3 : Deploy your app in the local machine and the output of the age calculation app on the local machine is:



Summary: Now, it is successfully created and you can test your age calculation app. Also, you learned the use of Calendar Date Picker, Button Control, and TextBlock control in Visual C# environment.