Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Preparing the User Interface
Windows Phone 8 shares with Windows 8 the core architecture of the operating system; in fact, both are based on the Windows Runtime (WinRT). However, due to its intrinsic nature, Windows Phone has some different controls (and a different number of classes for some scenarios). For instance, unlike WinRT for Windows Phone 8, WinRT for Windows 8 doesn't offer a ListBox control. You still work with XAML, though, so defining the user interface is easy. The goal of the sample application is providing a view for orders, as well as commands to add and remove orders. Inside the Grid called ContentPanel, write the code shown in Listing 1.
Listing 1—Defining the user interface.
<ListBox ItemsSource="{Binding}" Name="OrdersListBox">
<ListBox.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, StringFormat=d}"/>
<TextBlock Text="Shipped date: "/>
<TextBlock Text="{Binding ShippedDate, StringFormat=d}"/>
<TextBlock Text="Required date: "/>
<TextBlock Text="{Binding RequiredDate, StringFormat=d}"/>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In this code, the ListBox is data-bound (ItemsSource property), and the data source will be assigned at runtime. Also, the code defines a data template for each item in the ListBox. This template is very simple; it's just made of TextBlock controls. Every TextBlock is data-bound to a property in the collection representing orders. As discussed in Part 3 of this series, Windows Phone apps use the "app bar," which is still available in Windows Phone 8. This feature is represented by an object called AppBar, and it's the appropriate place for adding custom buttons. Listing 2 shows how to implement the app bar for the current application.
Listing 2—Defining the app bar.
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton Click="InsertButton_Click"
x:Name="InsertButton" IconUri="/Images/appbar_button1.png" Text="add order"/>
<shell:ApplicationBarIconButton Click="DeleteButton_Click"
x:Name="DeleteButton" IconUri="/Images/appbar_button2.png" Text="delete"/>
<shell:ApplicationBarIconButton Click="SaveButton_Click"
x:Name="SaveButton" IconUri="/Images/appbar_button2.png" Text="save"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
The next step is writing managed code to interact with the service and with the user interface.