My first Windows 8 Metro style app using VB.NET

Taking a look around Visual Studio 11, Me & my friend Asif decided to get a Windows 8 Metro Style App developed using Visual Basic .NET, the below screenshot is of this app where it picks the list of tools available at Microsoft download center and makes you download them while staying within your application..  It’s a Windows 8 metro style native app using WIN RT and has been developed on Visual Studio 11 express Beta for Windows 8. VS 11 provide templates and the abstraction layer of WIN RT makes life very easy to program such an app while staying in your favorite dev environment.

The inspiration and some of the code was drawn from:
http://msdn.microsoft.com/en-us/library/windows/apps/br211380.aspx

However this app is quite simple and I am sharing the UI & Backend code below:

In UI it’s all about a listview, webview and a button control and below is it’s XAML:

<Grid Background=”{StaticResource ApplicationPageBackgroundBrush}”>

<Grid.RowDefinitions>

<RowDefinition Height=”140″ />

<RowDefinition Height=”*” />

</Grid.RowDefinitions>

<!– Title –>

<TextBlock x:Name=”TitleText” Text=”{Binding Title}”

VerticalAlignment=”Center” FontSize=”48″ Margin=”56,0,0,0″/>

<!– Content –><Button x:Name=”btnExit” Content=”Exit” HorizontalAlignment=”Right”  />

<Grid Grid.Row=”1″>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”2*” MinWidth=”320″ />

<ColumnDefinition Width=”3*” />

</Grid.ColumnDefinitions>

<!– Left column –>

<!– The default value of Grid.Column is 0, so we do not need to set it

to make the ListView show up in the first column. –>

<ListView x:Name=”ItemListView”

ItemsSource=”{Binding Items}”

Margin=”60,0,0,10″ SelectionChanged=”ItemListView_SelectionChanged”>

<ListView.ItemTemplate>

<DataTemplate>

<StackPanel>

<TextBlock Text=”{Binding Title}”

FontSize=”24″ Margin=”5,0,0,0″ TextWrapping=”Wrap” />

<TextBlock Text=”{Binding Description}”

FontSize=”16″ Margin=”15,0,0,0″/>

</StackPanel>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

<!– Right column –>

<!– We use a Grid here instead of a StackPanel so that the WebView sizes correctly. –>

<Grid DataContext=”{Binding ElementName=ItemListView, Path=SelectedItem}”

Grid.Column=”1″ Margin=”25,0,0,0″>

<Grid.RowDefinitions>

<RowDefinition Height=”Auto” />

<RowDefinition Height=”*” />

</Grid.RowDefinitions>

<TextBlock x:Name=”PostTitleText” Text=”{Binding Title}” FontSize=”34″/>

<WebView x:Name=”ContentView” Grid.Row=”1″ Margin=”0,5,20,20″/>

</Grid>

</Grid>

</Grid>

The backend is all about getting the data from RSS feed, parsing it and assigning it to the controls:

(this is not all the code)

Public Async Function GetFeedsAsync() As Task

Dim feed1 As Task(Of FeedData) =

GetFeedAsync(“http://www.microsoft.com/download/en/rssfeeds?hid=1097&biq=rss_windows_allproducts”)

Me.Feeds.Add(Await feed1)

End Function

Private Async Function GetFeedAsync(feedUriString As String) As Task(Of FeedData)

Dim Client As New SyndicationClient

Dim FeedUri As New Uri(feedUriString)

Try

Dim Feed As SyndicationFeed = Await Client.RetrieveFeedAsync(FeedUri)

‘ This code is executed after RetrieveFeedAsync returns the SyndicationFeed.

‘ Process the feed and copy the data we want into our FeedData and FeedItem classes.

Dim FeedData As New FeedData

FeedData.Title = Feed.Title.Text

If Feed.Subtitle.Text IsNot Nothing Then

FeedData.Description = Feed.Subtitle.Text

End If

‘ Use the date of the latest post as the last updated date.

FeedData.PubDate = Feed.Items(0).PublishedDate.DateTime

For Each Item As SyndicationItem In Feed.Items

Dim FeedItem As New FeedItem

FeedItem.Title = Item.Title.Text

FeedItem.Description = Item.Title.Text

‘ Handle the differences between RSS and Atom feeds.

If Feed.SourceFormat = SyndicationFormat.Rss20 Then

FeedItem.Description = Item.Summary.Text

FeedItem.Link = Item.Links(0).Uri

End If

FeedData.Items.Add(FeedItem)

Next

Return FeedData

Catch Ex As Exception

Return Nothing

End Try

End Function

So just two things: and you’re good to go with App Development:

1)      XAML

2)      The same old backend programming techniques

Happy Coding J

Detailed Reference: http://msdn.microsoft.com/en-us/library/windows/apps/br211380.aspx