Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Preparing the User Interface
Now we can move on to designing the user interface of the sample client application. It's a XAML-based app, so you'll be able to use familiar techniques. The goal is providing a view for orders, as well as the commands to add and remove orders.
The first thing to do is open MainPage.xaml and enable Visual Studio's designer. The Windows Runtime for Windows 8 Store Apps doesn't provide a ListBox control to display a list of items, but it offers a ListView control, which is a good alternative.
Place the cursor between the second Grid and the VisualStateManager.VisualStateGroups element, and add the code shown in Listing 1.
Listing 1—Defining the user interface.
<!-- The container must have a name
for code-behind usage -->
<Grid Grid.Row="1" Name="ContentPanel" Margin="100,0,50,0">
<!-- The ListView is data-bound (ItemsSource) -->
<ListView ItemsSource="{Binding}" Name="OrdersListView">
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderThickness="2" Margin="3" BorderBrush="White"
Width="250" CornerRadius="2">
<StackPanel>
<TextBlock Text="Order description: "/>
<TextBlock Text="{Binding Description}"/>
<TextBlock Text="Order date: "/>
<TextBlock Text="{Binding OrderDate}"/>
<TextBlock Text="Shipped date: "/>
<TextBlock Text="{Binding ShippedDate}"/>
<TextBlock Text="Required date: "/>
<TextBlock Text="{Binding RequiredDate}"/>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Notice the container of type Grid called ContentPanel. A name is required because you'll need to reference the control in managed code. The data template for each item in the ListView is very simple; it's essentially made of TextBlock controls, each bound to a property in the collection representing orders.
An attractive user interface is very important for Windows 8 Store Apps, but for the sake of simplicity and maintaining the focus on our original goal, here the code is very simple. Windows 8 Store Apps don't have menus or normal buttons for user interaction. They typically use an app bar, which can be opened with a right-click or by moving a finger from the bottom of the app itself. This feature is represented by an object called AppBar. The app bar must be implemented at the bottom for general-purpose commands, as in our case. Applications such as web browsers should implement an app bar at the top of the application to provide shortcuts to pages, tabs, and websites. Listing 2 shows how to implement the app bar for the current application.
Listing 2—Defining the app bar.
<common:LayoutAwarePage.BottomAppBar>
<AppBar Padding="10,0,10,0" x:Name="MyCommandBar">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Name="InsertButton" Click="InsertButton_Click_1"
Style="{StaticResource AddAppBarButtonStyle}" />
<Button Name="DeleteButton" Click="DeleteButton_Click_1"
Style="{StaticResource DeleteAppBarButtonStyle}" />
<Button Name="SaveButton" Click="SaveButton_Click_1"
Style="{StaticResource SaveAppBarButtonStyle}"/>
</StackPanel>
</AppBar>
</common:LayoutAwarePage.BottomAppBar>
Notice that you don't need to define custom styles or assign icons to buttons; you just take advantage of predefined styles that the project template offers by default. In particular, to enable these styles you need to open the StandardStyles.xaml file (available in the Common folder in the project) and uncomment the style definitions summarized in Listing 3.
Listing 3—Using predefined button styles.
<Style x:Key="SaveAppBarButtonStyle" TargetType="ButtonBase"
BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="SaveAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="Save"/>
<Setter Property="Content" Value=""/>
</Style>
<Style x:Key="DeleteAppBarButtonStyle" TargetType="ButtonBase"
BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="DeleteAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="Delete"/>
<Setter Property="Content" Value=""/>
</Style>
<Style x:Key="AddAppBarButtonStyle" TargetType="ButtonBase"
BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="AddAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="Add"/>
<Setter Property="Content" Value=""/>
</Style>
Such style definitions rely on a base style that's common to every app bar button. Explaining these styles in detail isn't the goal of this article, but the MSDN documentation has useful information about them.
The next step is writing managed code to interact with the service and with the user interface.