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
![[ridley]](http://si.wsj.net/public/resources/images/OB-SR153_ridley_G_20120420181525.jpg)
