LOB application case study: applying what we have learned_Mastering LOB Development for Silverlight 5：A Case Study in Action-QQ阅读男生玄幻网

上QQ阅读APP看书，第一时间看更新

LOB application case study: applying what we have learned

Now we will lay out the main window of our application:

This window lets the user see the meeting room reservations which are already made, as well as edit them, or create new ones.

First, we must create a new project, and then edit the XAML code of the MainPage file.

We must now define three rows to the grid layout container:

One of them will contain a DataGrid control, which shows the list of reservations assigned to our account.
Another one will allow us to edit/create a particular reservation.
The last one will contain the buttons that will permit us to execute commands such as New, Save, and Delete.

The resulting user control includes the grid and rows created:

<UserControl x:Class="ReservationLayout.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignHeight="300" d:DesignWidth="400">

 <Grid x:Name="LayoutRoot" Background="White">
 <Grid.RowDefinitions>
 <RowDefinition Height="300"/>
 <RowDefinition Height="300"/>
 <RowDefinition Height="90"/>
 </Grid.RowDefinitions>
 </Grid>

</UserControl>

Next, we must add a DataGrid control to the layout and indicate the row in which its parent container will be assigned:

<UserControl 
  x:Class="ReservationLayout.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
  mc:Ignorable="d"
  d:DesignHeight="300" d:DesignWidth="400">

  <Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
      <RowDefinition Height="200"/>
      <RowDefinition Height="150"/>
      <RowDefinition Height="90"/>
    </Grid.RowDefinitions>

    <sdk:DataGrid Grid.Row="0"/>
  </Grid> 
</UserControl>

Note

The easiest way to insert DataGrid control is by dragging it directly from the Toolbox window in Visual Studio and then dropping it in our layout (it adds all the necessary references for us). After that, we only have to jump to the XAML of the application and define the row and/or column where we want it to appear.

If we execute the application, the result is not very appealing. We will only see a white rectangle that represents the DataGrid control. We will learn how to manage this control in subsequent chapters. For now, we will add some column definitions to make it look more similar to the following example screen.

To make it easier, we have to select the DataGrid object and use the Properties tab.

On the one hand, we disable auto-generation of columns.
On the other hand, we will define the columns manually, clicking on the property Columns.

The following is the XAML that we get:

<sdk:DataGrid Grid.Row="0" AutoGenerateColumns="False">
  <sdk:DataGrid.Columns>
    <sdk:DataGridTextColumn
      CanUserReorder="True" 
      CanUserResize="True" 
      CanUserSort="True" 
      Header="City" 
      Width="Auto" 
    />
    <sdk:DataGridTextColumn 
      CanUserReorder="True" 
      CanUserResize="True" 
      CanUserSort="True" 
      Header="Building"
      Width="Auto" 
    />
    <sdk:DataGridTextColumn 
      CanUserReorder="True"
      CanUserResize="True" 
      CanUserSort="True" 
      Header="Room" 
      Width="Auto" 
    />
    <sdk:DataGridTextColumn 
      CanUserReorder="True" 
      CanUserResize="True"
      CanUserSort="True" 
      Header="Date" 
      Width="Auto"
    />
    <sdk:DataGridTextColumn 
      CanUserReorder="True" 
      CanUserResize="True" 
      CanUserSort="True" 
      Header="Start" 
      Width="Auto"
    />
    <sdk:DataGridTextColumn 
      CanUserReorder="True"
      CanUserResize="True" 
      CanUserSort="True" 
      Header="End" 
      Width="Auto" 
    />
    <sdk:DataGridTextColumn 
      CanUserReorder="True" 
      CanUserResize="True" 
      CanUserSort="True" 
      Header="Comments" 
      Width="*" 
    />
  </sdk:DataGrid.Columns>
</sdk:DataGrid>

Let's take a look at the final result:

We now move to the detailed area. The easiest thing to do here will be to design the page using Expression Blend or Visual Studio. We will use the knowledge acquired in this chapter to design the window manually using grid control. To do this, we must define the following area of rows and columns:

The generated XAML can be seen in the code that follows. A few things should be taken care of. They are:

The grid container which we insert is inside the parent layout grid
We use Margin properties to assign space between grid rows, as well as between labels and controls
To lay out labels and controls, we will use a StackPanel control and adjust the orientation property, setting it to vertical or horizontal, as applicable (another valid approach to position them is to play with each Margin property of each control, this margin being related to its container cell)
For the Comments textbox to occupy all of the grid width, we add a property called ColSpan

<Grid Grid.Row="1" HorizontalAlignment="Center" MinWidth="670" Margin="5">
  <Grid.RowDefinitions>
    <RowDefinition Height="25"/>
    <RowDefinition Height="30"/>
    <RowDefinition Height="80"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="200"/>
    <ColumnDefinition Width="250"/>
    <ColumnDefinition Width="220"/>
  </Grid.ColumnDefinitions>

  <StackPanel 
    Orientation="Horizontal" 
    Grid.Row="0" 
    Grid.Column="0">
    <TextBlock 
      Text="Country" 
      Margin="0,5,5,0"/>
    <ComboBox Width="143"/>
  </StackPanel>

  <StackPanel 
    Orientation="Horizontal" 
    Grid.Row="0" 
    Grid.Column="1">
    <TextBlock 
      Text="City" 
      Margin="0,5,5,0"
    />
    <ComboBox Width="221"/>
  </StackPanel>

  <StackPanel 
    Orientation="Horizontal" 
    Grid.Row="0" 
    Grid.Column="2">
    <TextBlock 
      Text="Building" 
      Margin="0,5,5,0"/>
    <ComboBox Width="100"/>
  </StackPanel>

  <StackPanel 
    Orientation="Horizontal" 
    Grid.Row="1" 
    Grid.Column="0"
    Margin="0,5,0,0"
    >
    <TextBlock 
    Text="Date Reservation" Margin="0,5,5,0"
    />
     <TextBox Width="90"/>
  </StackPanel>

  <StackPanel 
    Orientation="Horizontal" 
    Grid.Row="1" 
    Grid.Column="1"
    Margin="0,5,0,0"
    >
    <TextBlock 
      Text="Start Time" 
      Margin="0,5,5,0"
    />
    <TextBox Width="70"/>
    <TextBlock 
      Text="Duration" 
      Margin="0,5,5,0"
    />
    <TextBox Width="61"/>
  </StackPanel>

  <StackPanel 
    Orientation="Horizontal" 
    Grid.Row="1" 
    Grid.Column="2" 
    Margin="0,5,0,0"
    >
    <TextBlock 
      Text="Room" 
      Margin="0,5,5,0"/>
    <ComboBox Width="113"/>
  </StackPanel>

  <StackPanel 
    Orientation="Vertical"
    HorizontalAlignment="Left" 
    Grid.Row="3" 
    Grid.Column="0" Grid.ColumnSpan="3" 
    Margin="0,5,0,0"
    >
    <TextBlock 
      Text="Comments" 
      Margin="0,5,5,0"/>
    <TextBox 
      Width="599" 
      Height="50"/>
  </StackPanel>

</Grid>

The result of the page layout is as follows:

We will add the control panel in the lower part of the window to complete the layout. We will use a StackPanel container with horizontal orientation to do so.

<StackPanel 
  Grid.Row="2" 
  Orientation="Horizontal" HorizontalAlignment="Right">
  <Button Content="New" 
    Width="60" Height="30"/>
  <Button Content="Save" 
    Margin="5,0,0,0" 
    Width="60" Height="30"/>
  <Button Content="Delete" 
    Margin="5,0,0,0" 
    Width="60" Height="30"/>
</StackPanel>

We have now laid out our window as shown in the following screenshot:

本周热推：

Creating Dynamic UIs with Android Fragments（Second Edition）Node.js High Performance Unity AI Programming Essentials Learning Proxmox VE Voice Application Development for Android