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:
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 theorientation
property, setting it to vertical or horizontal, as applicable (another valid approach to position them is to play with eachMargin
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: