Wednesday, February 20, 2013

WP7 - Weather App in Window Phone 7

In this article i will explain how to create a basic Weather app in window phone 7 using XML data World Weather Online (API) service.

In this Example we get and display the weather in the user's specified location. We can search for weather based on the get the based on city name,state and also specify the how many days weather information should return (we get only minimum five days weather information including current day).

Let see how to create Weather app in Window Phone 7.

Step 1
First we need to register following website for generating API Key.
http://www.worldweatheronline.com/register.aspx 

Step 2
To Develop application for Windows Phone 7 devices, we need to install Windows Phone 7.1 SDK.We can download latest SDK for Windows Phone
http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=27570

SDK 7.1.1 Update
https://dev.windowsphone.com/en-us/downloadsdk

Step 3

Create a Window Phone Application and give the solution name as SolWeatherApp.

To start creating a new Windows Phone application, start Microsoft Visual Studio then create a new Project and select Windows Phone Application Template,it is look like this



Click on Image for better View

Step 4
Select the Window Phone Platform,it is look like this



Click on Image for better View

Step 5
Add a System.Xml.Linq Assemble reference to the project.Right click on the project name in Solution Explorer, select Add Reference and Select System.Xml.Linq  and select OK button,it is look like this



Click on Image for better View

Step 6
Let make a weather app XAML design, This design divided into three section,it is look like this

  • Search Box
  • Current Weather Information
  • Five Days Weather information

First create three Row on Content Panel Grid it is look like this   
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
			<Grid.RowDefinitions>
				<RowDefinition Height="0.126*"/>
				<RowDefinition Height="0.23*"/>
				<RowDefinition Height="0.644*"/>
			</Grid.RowDefinitions>	

</Grid>


Now create search box Inside Content panel Grid,it is look like this
<Grid x:Name="GSearchBox" Grid.Row="0" Grid.Column="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="317*" />
                    <ColumnDefinition Width="139*" />
                </Grid.ColumnDefinitions>


                <TextBox x:Name="txtSearchCity" Grid.Row="0" Grid.Column="0" Height="75"/>
                <Button x:Name="btnGo" Grid.Row="0" Grid.Column="1" Content="GO" Height="75" Click="btnGo_Click" />

            </Grid>


Add a controls for display current weather information Inside Content panel Grid,it is look like this
<Grid x:Name="GCurrentWeather" Grid.Row="1" Grid.Column="0">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="150*"/>
					<ColumnDefinition Width="300*"/>
				</Grid.ColumnDefinitions>
				<Grid.RowDefinitions>
					<RowDefinition Height="0.25*"/>
					<RowDefinition Height="0.25*"/>
					<RowDefinition Height="0.25*"/>
					<RowDefinition Height="0.25*"/>
				</Grid.RowDefinitions>

                <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding WeatherIconUrl}" Stretch="Fill" Height="120" Width="120" HorizontalAlignment="Center"></Image>
                <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Temperature,StringFormat='Temperature: \{0\} °C'}" FontSize="22" Margin="25,0,0,0"></TextBlock>
                <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding ObservationTime,StringFormat='Observ.Time: \{0\}'}" FontSize="22" Margin="25,0,0,0"></TextBlock>
                <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Humidity,StringFormat='Humidity: \{0\} %'}" FontSize="22" Margin="25,0,0,0"></TextBlock>
                <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding WindSpeedKmph,StringFormat='Wind Speed: \{0\} Kmph'}" FontSize="22" Margin="25,0,0,0"></TextBlock>	

			</Grid>


Add a stack panel (Header) and List Box for display Five days weather information Inside Content panel Grid,it is look like this
<Grid x:Name="GWeather" Grid.Row="2" Grid.Column="0" Visibility="Visible">
				<Grid.RowDefinitions>
					<RowDefinition Height="0.107*"/>
					<RowDefinition Height="0.893*"/>
				</Grid.RowDefinitions>
				        
                        <!-- Display Header -->
						<StackPanel Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Center" Margin="0,0,0,0">
                            <TextBlock Text="Date" FontSize="22" TextAlignment="Left" Width="170" Foreground="OrangeRed"/>
                    <TextBlock Text="FC" FontSize="22" TextAlignment="Left" Width="60" Foreground="OrangeRed"/>
                    <TextBlock Text="Max" FontSize="22" TextAlignment="Right" Width="90" Foreground="OrangeRed"/>
                    <TextBlock Text="Min" FontSize="22" TextAlignment="Right" Width="110" Foreground="OrangeRed"/>
                        </StackPanel>
				        
                        <!-- Display Five Days Weather info -->
				        <ListBox x:Name="LstWeather" Grid.Row="1" Grid.Column="0" ItemTemplate="{StaticResource WeatherDataTemplate}" ItemsSource="{Binding}"></ListBox>
				
			</Grid>

Now create a DataTemplate for List Box.The below template is used to show five day forecast. Each row is showing Date, Image and maximum and minimum temperature,it is look like this
<phone:PhoneApplicationPage.Resources>
		<DataTemplate x:Key="WeatherDataTemplate">
			 <StackPanel Height="40" Orientation="Horizontal" Margin="0,10,0,0">
                <TextBlock Text="{Binding Date}" FontSize="22" TextAlignment="Left" Width="150"/>
                <TextBlock Text="   " FontSize="20"/>
                <Image Source="{Binding WeatherIconUrl}" Width="40" Height="40"/>
                <TextBlock Text="   " FontSize="20"/>
                <TextBlock Text="{Binding TemperatureMaxC, StringFormat='\{0\} °C'}" FontSize="22" TextAlignment="Right" Width="100"/>
                <TextBlock Text="   " FontSize="20"/>
                <TextBlock Text="{Binding TemperatureMinC, StringFormat='\{0\} °C'}" FontSize="22" TextAlignment="Right" Width="100"/>
            </StackPanel>
		</DataTemplate>
	</phone:PhoneApplicationPage.Resources>



Click on Image for better View

Now Hide Gwether Grid Control,Set Visibility Property as Collapsed,it is look like this
<Grid x:Name="GWeather" Grid.Row="2" Grid.Column="0" Visibility="Collapsed">


Full XAML Code
<phone:PhoneApplicationPage
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
	x:Class="SolWeatherApp.MainPage"
	FontFamily="{StaticResource PhoneFontFamilyNormal}"
	FontSize="{StaticResource PhoneFontSizeNormal}"
	Foreground="{StaticResource PhoneForegroundBrush}"
	SupportedOrientations="Portrait" Orientation="Portrait"
	shell:SystemTray.IsVisible="True">
	<phone:PhoneApplicationPage.Resources>
		<DataTemplate x:Key="WeatherDataTemplate">
			 <StackPanel Height="40" Orientation="Horizontal" Margin="0,10,0,0">
                <TextBlock Text="{Binding Date}" FontSize="22" TextAlignment="Left" Width="150"/>
                <TextBlock Text="   " FontSize="20"/>
                <Image Source="{Binding WeatherIconUrl}" Width="40" Height="40"/>
                <TextBlock Text="   " FontSize="20"/>
                <TextBlock Text="{Binding TemperatureMaxC, StringFormat='\{0\} °C'}" FontSize="22" TextAlignment="Right" Width="100"/>
                <TextBlock Text="   " FontSize="20"/>
                <TextBlock Text="{Binding TemperatureMinC, StringFormat='\{0\} °C'}" FontSize="22" TextAlignment="Right" Width="100"/>
            </StackPanel>
		</DataTemplate>
	</phone:PhoneApplicationPage.Resources>

	<!--LayoutRoot is the root grid where all page content is placed-->
	<Grid x:Name="LayoutRoot" Background="Transparent">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>

		<!--TitlePanel contains the name of the application and page title-->
		<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
			<TextBlock x:Name="ApplicationTitle" Text="WEATHER APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>		
		</StackPanel>

		<!--ContentPanel - place additional content here-->
		<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
			<Grid.RowDefinitions>
				<RowDefinition Height="0.126*"/>
				<RowDefinition Height="0.23*"/>
				<RowDefinition Height="0.644*"/>
			</Grid.RowDefinitions>		
			
            <Grid x:Name="GSearchBox" Grid.Row="0" Grid.Column="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="317*" />
                    <ColumnDefinition Width="139*" />
                </Grid.ColumnDefinitions>


                <TextBox x:Name="txtSearchCity" Grid.Row="0" Grid.Column="0" Height="75"/>
                <Button x:Name="btnGo" Grid.Row="0" Grid.Column="1" Content="GO" Height="75" Click="btnGo_Click" />

            </Grid>
            
			<Grid x:Name="GCurrentWeather" Grid.Row="1" Grid.Column="0">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="150*"/>
					<ColumnDefinition Width="300*"/>
				</Grid.ColumnDefinitions>
				<Grid.RowDefinitions>
					<RowDefinition Height="0.25*"/>
					<RowDefinition Height="0.25*"/>
					<RowDefinition Height="0.25*"/>
					<RowDefinition Height="0.25*"/>
				</Grid.RowDefinitions>

                <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding WeatherIconUrl}" Stretch="Fill" Height="120" Width="120" HorizontalAlignment="Center"></Image>
                <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Temperature,StringFormat='Temperature: \{0\} °C'}" FontSize="22" Margin="25,0,0,0"></TextBlock>
                <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding ObservationTime,StringFormat='Observ.Time: \{0\}'}" FontSize="22" Margin="25,0,0,0"></TextBlock>
                <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Humidity,StringFormat='Humidity: \{0\} %'}" FontSize="22" Margin="25,0,0,0"></TextBlock>
                <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding WindSpeedKmph,StringFormat='Wind Speed: \{0\} Kmph'}" FontSize="22" Margin="25,0,0,0"></TextBlock>	

			</Grid>
			
            <Grid x:Name="GWeather" Grid.Row="2" Grid.Column="0" Visibility="Collapsed">
				<Grid.RowDefinitions>
					<RowDefinition Height="0.107*"/>
					<RowDefinition Height="0.893*"/>
				</Grid.RowDefinitions>
				        
                        <!-- Display Header -->
						<StackPanel Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Center" Margin="0,0,0,0">
                            <TextBlock Text="Date" FontSize="22" TextAlignment="Left" Width="170" Foreground="OrangeRed"/>
                    <TextBlock Text="FC" FontSize="22" TextAlignment="Left" Width="60" Foreground="OrangeRed"/>
                    <TextBlock Text="Max" FontSize="22" TextAlignment="Right" Width="90" Foreground="OrangeRed"/>
                    <TextBlock Text="Min" FontSize="22" TextAlignment="Right" Width="110" Foreground="OrangeRed"/>
                        </StackPanel>
				        
                        <!-- Display Five Days Weather info -->
				        <ListBox x:Name="LstWeather" Grid.Row="1" Grid.Column="0" ItemTemplate="{StaticResource WeatherDataTemplate}" ItemsSource="{Binding}"></ListBox>
				
			</Grid>
			
		</Grid>
	</Grid>
</phone:PhoneApplicationPage>


Finally design part is finished.Lets move to code behind section.

Step 7
Create a WeatherEntity Class.Weather Online offers lots of different weather information but  i used only those entity which i want to display in this example.Just Check the XML data which come from API and according to that create a Entity,it is look like this
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SolWeatherApp
{
    public class WeatherEntity
    {
        #region Property
        
        public String ObservationTime
        {
            get;
            set;
        }

        public String Date
        {
            get;
            set;
        }

        public String Temperature
        {
            get;
            set;
        }

        public String TemperatureMaxC
        {
            get;
            set;
        }

        public String TemperatureMinC
        {
            get;
            set;
        }
        
        public String WindSpeedKmph
        {
            get;
            set;
        }

        public String Humidity
        {
            get;
            set;
        }

        public String WeatherIconUrl
        {
            get;
            set;
        }
        #endregion
    }
}

Step 8
Create a two method in weather static class for retrieving data from XML.One method should return current date of weather information and another method should return the five days of weather information,it is look like this  
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;

namespace SolWeatherApp
{
    public static class Weather
    {
        #region Method

        /// <summary>
        /// Get Current Weather Data
        /// </summary>
        /// <param name="APIResultSet">Specify the Result Object which data come from Weather API</param>
        /// <returns>WeatherEntity</returns>
        public static WeatherEntity GetCurrentWeatherData(String APIResultSet)
        {
            try
            {
                XDocument XDocumentObj = XDocument.Parse(APIResultSet);
                var Query = from Q in XDocumentObj.Descendants("current_condition")
                            select new WeatherEntity
                            {
                                ObservationTime = (string)Q.Element("observation_time"),
                                Temperature = (string)Q.Element("temp_C"),
                                WeatherIconUrl = (string)Q.Element("weatherIconUrl"),
                                Humidity = (string)Q.Element("humidity"),
                                WindSpeedKmph = (string)Q.Element("windspeedKmph")
                            };

                return  Query.ToList<WeatherEntity>()[0];
            }
            catch (Exception ex)
            {
                throw new Exception(ex.Message); 
            }
        }

        /// <summary>
        /// Get Five Days Weather Data including Current Date
        /// </summary>
        /// <param name="APIResultSet">Specify the Result Object which data come from Weather API</param>
        /// <returns>List</returns>
        public static List<WeatherEntity> GetWeatherData(String APIResultSet)
        {
            try
            {
                XDocument XDocumentObj = XDocument.Parse(APIResultSet);
                var Query = from Q in XDocumentObj.Descendants("weather")
                            select new WeatherEntity
                            {
                                Date = (string)Q.Element("date"),
                                TemperatureMaxC = (string)Q.Element("tempMaxC"),
                                TemperatureMinC = (string)Q.Element("tempMinC"),
                                WeatherIconUrl = (string)Q.Element("weatherIconUrl"),
                            };

                return Query.ToList<WeatherEntity>();
            }
            catch (Exception ex)
            {
                throw new Exception(ex.Message); 
            }
        }

        #endregion
    }
}

We parse the XMLs in two sections. One is the Current Condition of weather, and another is the information of present day along with the next four days.

Step 9
In MainPage Constructor,we have to check the if there are network connection available or not,it is look like this
public MainPage()
        {
            InitializeComponent();

            try
            {
                // Is there network connection available
                if (!System.Net.NetworkInformation.NetworkInterface.GetIsNetworkAvailable())
                {
                    MessageBox.Show("There is no network connection available!");
                    return;
                }
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message); 
            }
        }

Step 10
Add a Following Code on Go Button Click event,it is look like this
private void btnGo_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                WebClient WCObj = new WebClient();
                WCObj.DownloadStringCompleted += new DownloadStringCompletedEventHandler(WCObj_DownloadStringCompleted);
                WCObj.DownloadStringAsync(new Uri("http://free.worldweatheronline.com/feed/weather.ashx?key=bed6524371124406111310&q=" + txtSearchCity.Text.Trim() + "&num_of_days=5&format=xml"));
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message); 
            }
        }

 WebClient Class to load XML data asynchronously from Weather Online Server.

Step 11
Add a following code on DownloadStringCompleted event,it is look like this
void WCObj_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            try
            {
                if (e.Result != null || e.Error == null)
                {

                    // Bind Current Weather Data
                    GCurrentWeather.DataContext = Weather.GetCurrentWeatherData(e.Result);

                    // Visible Grid
                    GWeather.Visibility = System.Windows.Visibility.Visible;

                    // Bind Five Days Weather Data Info
                    LstWeather.DataContext = Weather.GetWeatherData(e.Result);
                }
                else
                {
                    MessageBox.Show("Cannot load Weather Forecast!");
                }
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message); 
            }
        }


Run the Application.

Output



Click on Image for better View

Full MainPage Code Behind Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace SolWeatherApp
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();

            try
            {
                // Is there network connection available
                if (!System.Net.NetworkInformation.NetworkInterface.GetIsNetworkAvailable())
                {
                    MessageBox.Show("There is no network connection available!");
                    return;
                }
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message); 
            }
        }

        private void btnGo_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                WebClient WCObj = new WebClient();
                WCObj.DownloadStringCompleted += new DownloadStringCompletedEventHandler(WCObj_DownloadStringCompleted);
                WCObj.DownloadStringAsync(new Uri("http://free.worldweatheronline.com/feed/weather.ashx?key=bed6524371124406111310&q=" + txtSearchCity.Text.Trim() + "&num_of_days=5&format=xml"));
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message); 
            }
        }

        void WCObj_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            try
            {
                if (e.Result != null || e.Error == null)
                {

                    // Bind Current Weather Data
                    GCurrentWeather.DataContext = Weather.GetCurrentWeatherData(e.Result);

                    // Visible Grid
                    GWeather.Visibility = System.Windows.Visibility.Visible;

                    // Bind Five Days Weather Data Info
                    LstWeather.DataContext = Weather.GetWeatherData(e.Result);
                }
                else
                {
                    MessageBox.Show("Cannot load Weather Forecast!");
                }
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message); 
            }
        }
    }
}

Download
Download Source Code

I was created a Google Weather application before three month ago but unfortunately Google Corporation stop this service.I hope you like this example.  

Monday, February 18, 2013

C#.net - Asynchronous Programming with Async and Await

When your user interface is unresponsive or your server does not scale, chances are your code needs to be more asynchronous. Microsoft .NET Framework 4.5 introduces new language features in C# and Visual Basic to provide a new foundation for asynchronous in .NET programming. This new foundation makes asynchronous programming very similar to synchronous programming.

There are several ways of doing asynchronous programming in .Net.  Visual Studio 2012 introduces a new approach using the ‘Async’ and ‘Await’ keywords.  These tell the compiler to construct task continuations in quite an unusual way.


Asynchronous operations are operations that are initiated and continue running concurrently with the invoking code.

When conforming to the .NET Task-Based Asynchronous Pattern (TAP), asynchronous methods return a task, which represents the ongoing operation and enables you to wait for its eventual outcome.


Use Task and Task<TResult> types from System.Threading.Tasks namespace to represent arbitrary asynchronous operations.

When invoking a task and its completion is expected, use the keyword "await" when you call a method. Use the syntax:

await MethodAsync();

In this way the code flow does not stop. No need to assign methods to events, even more, there is no callbacks because now the compiler is responsible for creating them.

Async and Await keywords

The async keyword can be used as a modifier to a method or anonymous method to tell the C# compiler that the respective method holds an asynchronous operation in it.

The await keyword  is used while invoking the async method, to tell the compiler that the remaining code in that particular method should be executed after the asynchronous operation is completed.

Return Type

The return type of an asynchronous method must be Task,Task <T> or Void.

In an asynchronous function with void return type or Task, return statements should not be an expression.

When the return type is Task <T> return statements should have an expression that is implicitly convertible to T.

Let see  how you can use async and await generate a small program that allows us to see the effect of TAP pattern.

Step 1
Create a WPF Application and give the solution name as SolAsynchronousSample.

Step 2
Add a TextBox and Two Button on Window,it is look like this
<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="3*"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        
        <TextBox x:Name="txtMessage" Grid.Row="0" Grid.Column="0" AcceptsReturn="True" TextWrapping="Wrap" IsReadOnly="True" Background="Black" Foreground="Green"></TextBox>
        <Button x:Name="btnFiles" Content="Get Files" Grid.Row="1" Grid.Column="0" Height="32" Margin="320,23,117,23" Click="btnFiles_Click" />
        <Button x:Name="btnDateTime" Content="Get Date_Time" Grid.Row="1" Grid.Column="0" Height="32" Margin="410,23,10,23" Click="btnDateTime_Click" />
        
    </Grid>


Click on Image for better View.

Step 3
In Code Behind,Write a Async Method to get file name from Directory,it is look like this
/// <summary>
        /// Get List of Files
        /// </summary>
        /// <returns>List</returns>
        private Task<List<String>> GetFilesAsync()
        {
            try
            {
                return Task.Run(() =>
                {
                    // Get Files Name from Specify Directory
                    return System.IO.Directory.GetFiles(@"C:\Windows\System32").ToList();
                });
              
            }
            catch (Exception ex)
            {
                throw new Exception(ex.Message); 
            }
        }

Step 4
In Code Behind,Write a Print Method to Bind File Names in TextBox Control,it is look like this
/// <summary>
        /// Print File Name in textBox
        /// </summary>
        /// <param name="FileName">specify the File Name</param>
        private void PrintFilesList(String FileName)
        {
            try
            {
                txtMessage.Text = txtMessage.Text + FileName + System.Environment.NewLine;
                txtMessage.ScrollToEnd();
            }
            catch (Exception ex)
            {
                throw new Exception(ex.Message);  
            }
        }


Step 5
Double-click on the button to generate a btnFiles_Click event handler and add async modifier,add the follwing code,it is look like this
private async void btnFiles_Click(object sender, RoutedEventArgs e)
        {
            try
            {

                btnFiles.IsEnabled = false;

                // Call GetFilesAsync Method with await Keyword
                List<String> ListFilesObj = await GetFilesAsync();

                // Check the List Object is Null or Not
                if (ListFilesObj != null)
                {
                    // Check the List Object Count is grether than 1 or not
                    if (ListFilesObj.Count >= 1)
                    {
                        foreach (String Item in ListFilesObj)
                        {
                            // Call PrintFilesList Method (Bind File Name in textBox)
                            PrintFilesList(Item);

                            // task that will complete after a time delay
                            await Task.Delay(100);
                        }
                    }
                }

            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);
            }
            finally
            {
                btnFiles.IsEnabled = true;
            }
        }


async modifier tells to compiler that this method contains code that will run asynchronously using await keyword. 

We can await the method lower down the call stack because it now returns a task we can await on.  What this means in practice is that the code sets up the task and sets it running and then we can await the results from the task when it is complete anywhere in the call stack.  This gives us a lot of flexibility as methods at various points in the stack can carry on executing until they need the results of the call.

Step 6
Double-click on the button to generate a btnDateTime_Click event handler and add the following Code,it is look like this 
private void btnDateTime_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                MessageBox.Show(System.DateTime.Now.ToString()); 
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message); 
            }
        }

Run the application, press the button Get Files and check that the application is not frozen and is receptive. You can now press the Get DateTime button without having to wait the end of the period.

if we use Synchronous Programming way then our application will freezes and we can not press the Get DateTime button until the first process not end.

I hope you understand now why asynchronous Programming  is Important.

Output


Click on Image for better View.

Download
Download Source Code