Controls available in Visual Studio 11 for designing Windows 8 Metro Style Apps


While it is very easy to create Metro Style Apps using Visual Studio while programming in VB, C#, JS, HTML, C++ & etc. A great deal of investment has been done by Microsoft in providing rich controls which glorify the beauty of Metro Style Apps.

It is really upon the creativity of a developer that how he/she leverages and various customization options by living in Visual Studio & Expression Blend environment.


Although you would nearly find all XAML controls in the toolbox but some of them which you would be regularly coming across and would be creating more impact to Metro Style Apps can be (visible in picture 1), Grid View, Flip View, App Bar, Panning Indicator, Toggle Switch, Rating, List View & Progress Bar etc.

Keep creating state of the art Apps! a big market is on your way…

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:

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}”>


<RowDefinition Height=”140″ />

<RowDefinition Height=”*” />


<!– 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″>


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

<ColumnDefinition Width=”3*” />


<!– 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”>




<TextBlock Text=”{Binding Title}”

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

<TextBlock Text=”{Binding Description}”

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





<!– 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″>


<RowDefinition Height=”Auto” />

<RowDefinition Height=”*” />


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

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




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) =


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)


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



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: