Wednesday, May 2, 2012

Windows 8 Metro Application Creation Step by Step

 

Sorry Friends after long time I am back to blog.  I was really busy with my Office and Personal work so not able to blog regularly. Now I got some free time so I downloaded Windows 8 Customer preview with VS.NET 2011 and start looking at new  Windows 8 Metro app.

In Windows 8 Run time called WinRT  I am not going to deep into WinRT now.    In Windows 8  we can develop Metro apps with two choices .

1)   C# , VB.NET , C++ , XAML

2)  HTML 5, CSS , and JavaScript. 

In this  blog I am going to use  C# and XAML to create simple Weather Forecast application. if you want to learn any new stuff better to create simple working application having said that we are going to create the following Windows 8 Metro App.

 

image

In this application I am calling Free Weather Web service passing the Zip code and getting XML and parsing and displaying  it in  Grid View controls.

Prerequisites

C# 5.0  ( async, await )

XAML

1) First create the Blank Windows Metro application

image

2) Open of the Blank Page.XAML and add the following XAML UI

<Page
    x:Class="WeatherApp.BlankPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WeatherApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <UserControl.Resources>
        <Style TargetType="TextBlock" x:Key="mytxtBlk">
            <Setter Property="Margin" Value="10"/>
            <Setter Property="FontFamily"  Value="Aerial Black"/>
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="FontWeight" Value="ExtraBold"/>
        </Style>
    </UserControl.Resources>
    <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition  Height="73"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Grid.Row="0" Height="50" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="143,0,277,0" Width="946" d:LayoutOverrides="VerticalMargin">
            <TextBlock Text="Sreeni.NET" Style="{StaticResource mytxtBlk}"/>
            <TextBlock Text="Enter the ZipCode to get Forecast"  VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="Arial Black" FontSize="30" Style="{StaticResource mytxtBlk}"></TextBlock>
        <TextBox Width="200"  VerticalAlignment="Center"   x:Name="txtzipcode" HorizontalAlignment="Center"></TextBox>
        <Button Content="Get Weather"  VerticalAlignment="Center" HorizontalAlignment="Center" Click="Button_Click_1"/>
        </StackPanel>
    
        <GridView x:Name="wg" Grid.Row="1" >
            <GridView.ItemTemplate>
             
                <DataTemplate>
                    <StackPanel Orientation="Vertical" Width="250" Height="250" Background="#FF161C8F">
                        <TextBlock Style="{StaticResource mytxtBlk}" >
                            <Run Text="City :"></Run>
                            <Run Text="{Binding City}" />
                        </TextBlock>
                        <TextBlock  Style="{StaticResource mytxtBlk}">
                             <Run Text="State :"/>
                            <Run   Text="{Binding State}"/>
                        </TextBlock>
                        <TextBlock Text="{Binding Date}" Style="{StaticResource mytxtBlk}">
                              <Run Text="Date :"/>
                               <Run Text="{Binding Date}"/>
                        </TextBlock>
                        <TextBlock  Style="{StaticResource mytxtBlk}">
                             <Run Text="Min :"/>
                               <Run Text="{Binding Min}"/>
                        </TextBlock>
                        <TextBlock  Style="{StaticResource mytxtBlk}">
                             <Run Text="Max :"/>
                               <Run Text="{Binding Max}"/>
                        </TextBlock>
                        <TextBlock  Style="{StaticResource mytxtBlk}">
                             <Run Text="Description :"/>
                               <Run Text="{Binding Description}"/>
                        </TextBlock>
                       
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
          
        </GridView>
       
    </Grid>
</Page>

3) Add code to call web service and parse the response XML as shown below.

 

  public async Task<List<WeatherInfo>> GetWeatherInfo(string zipcode)
{
HttpClient httpclient = new HttpClient();
var weatherinfo= await httpclient.GetStringAsync("http://wsf.cdyne.com/WeatherWS/Weather.asmx/GetCityForecastByZIP?ZIP=" + zipcode);

XNamespace ns = "http://ws.cdyne.com/WeatherWS/";
var xmlWeatherInfo=XElement.Parse(weatherinfo);

var city = xmlWeatherInfo.Element(ns + "City").Value;
var state = xmlWeatherInfo.Element(ns + "State").Value;
List<WeatherInfo> winfo = (from weather in xmlWeatherInfo.Descendants(ns+"Forecast")
select new WeatherInfo
{
State=state,
City=city,
Date =weather.Element(ns+"Date").Value,
Description=weather.Element(ns+"Desciption").Value,
Max = weather.Element(ns+"Temperatures").Element(ns+"DaytimeHigh").Value ,
Min = weather.Element(ns+"Temperatures").Element(ns + "MorningLow").Value

}).ToList<WeatherInfo>();

return winfo;
}

private async void Button_Click_1(object sender, RoutedEventArgs e)
{
if (string.IsNullOrEmpty(txtzipcode.Text))
return;
var wdata = await GetWeatherInfo(txtzipcode.Text);

wg.ItemsSource = wdata;
}


}


public class WeatherInfo
{
public string City { get; set; }
public string Date { get; set; }
public string State { get; set; }
public string Description { get; set; }
public string Min { get; set; }
public string Max { get; set; }

}




Nandri(Thanks)



Sreenivasaragavan

No comments: