Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating a Windows 8 Store App Client
Now let's examine how useful portable libraries are, by creating an app for Windows 8. Select File > Add > New Project. In the New Project dialog box, select the Windows Store templates folder. Finally, choose the Blank App (XAML) project template. When the new project is ready, follow the same steps described previously to add a reference to the CustomersLibrary project. In Windows Store apps, things work a little bit differently. For example, no DataGrid control is available, and you can't use buttons as you like, due to the user interface guidelines for this kind of application. For controls, a good alternative is to use a GridView control. This needs a template that defines how each item in the list must be presented. For buttons, a valid choice is to use the application bar.
Listing 9 shows the full XAML code of the app's main page.
Listing 9—Defining the user interface of the Windows 8 app.
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.BottomAppBar>
<AppBar Padding="10,0,10,0">
<Grid>
<!-- Important! Assign a style to the button!-->
<Button Name="DeleteButton" Command="{Binding DeleteCustomerCommand}"
HorizontalAlignment="Left"
/>
</Grid>
</AppBar>
</Page.BottomAppBar>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="130"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Your customers:" FontSize="72" Margin="20"/>
<GridView ItemsSource="{Binding Customers}" SelectedItem="{Binding CurrentCustomer}"
Grid.Row="1" Margin="20">
<GridView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="White" BorderThickness="2" Width="250" Height="120">
<StackPanel>
<TextBlock Text="{Binding CompanyName}"/>
<TextBlock Text="{Binding EmailAddress}"/>
<TextBlock Text="{Binding PhysicalAddress}"/>
<TextBlock Text="{Binding Phone}"/>
</StackPanel>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</Page>
There's another difference at the code-behind level. Windows Store apps work with pages and rely on a navigation framework. For this reason, the instance of the ViewModel cannot be created in the constructor. Instead, a delegate called OnNavigatedTo is invoked when the page is being navigated, and this is the place where the instance must be created and assigned to the page's DataContext. Listing 10 shows how to accomplish this.
Listing 10—Creating and assigning an instance of the ViewModel.
Imports CustomersLibrary
''' <summary>
''' An empty page that can be used on its own or navigated to within a Frame.
''' </summary>
Public NotInheritable Class MainPage
Inherits Page
Private customers As CustomerViewModel
''' <summary>
''' Invoked when this page is about to be displayed in a Frame.
''' </summary>
''' <param name="e">Event data that describes how this page was reached. The Parameter
''' property is typically used to configure the page.</param>
Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
If Me.customers Is Nothing Then
Me.customers = New CustomerViewModel
Me.DataContext = Me.customers
End If
End Sub
End Class
Since the user might be navigating to a page multiple times, a private field holding the ViewModel is used. This will be null only when the user reaches the page for the first time. At all other times, creating a new instance isn't necessary, since one already exists. Run the application to see how the information exposed by the portable library is correctly displayed (see Figure 8).
)
Figure 8 The Windows 8 client in action.
Still not convinced of how cool portable libraries are? Our final example is based on Windows Phone 7.x.