Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating the User Interface
The user interface of the sample application is made up of two main parts. The first part is a ListBox control that will show the list of entities read from the service. The second part is the application bar that will host some buttons for saving, adding, and deleting data.
The main page of the application (MainPage.xaml) includes by default a Grid panel called ContentPanel. Listing 2 shows how to implement a ListBox inside the ContentPanel control, specifying data-binding to the appropriate properties of each entity that will be displayed.
Listing 2—Defining a data-bound ListBox for displaying entities.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<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>
</Grid>
Notice that a DataTemplate has been defined to represent every item, and dates are formatted by using the StringFormat syntax. The second part of the application's user interface is the application bar, represented in Listing 3.
Listing 3—Defining the application 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>
Notice these facts:
- The application bar is already defined in the main page code. You must uncomment the lines of code in the last part of the main page definition.
- You can remove the lines of code related to the ApplicationBarMenuItem objects; that code won't be used here.
- For the sake of simplicity in this article, I'm using default icons. You can replace the default icons with more appropriate versions.
Now that we've defined the user interface, we can write managed code that will connect to the service and perform the actual work against data.