- Mastering LOB Development for Silverlight 5:A Case Study in Action
- Braulio Diez Botella José Fernando Almoguera Pablo Nú?ez Sebastian Stehle Rocio Serrano Rudilla Reyes García Rosado
- 542字
- 2021-08-20 15:36:39
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:

- 從零開始學(xué)Hadoop大數(shù)據(jù)分析(視頻教學(xué)版)
- InfluxDB原理與實戰(zhàn)
- Python金融大數(shù)據(jù)分析(第2版)
- Neural Network Programming with TensorFlow
- 數(shù)字媒體交互設(shè)計(初級):Web產(chǎn)品交互設(shè)計方法與案例
- Proxmox VE超融合集群實踐真?zhèn)?/a>
- 云原生數(shù)據(jù)中臺:架構(gòu)、方法論與實踐
- INSTANT Apple iBooks How-to
- Python數(shù)據(jù)分析與挖掘?qū)崙?zhàn)(第3版)
- 實現(xiàn)領(lǐng)域驅(qū)動設(shè)計
- 領(lǐng)域驅(qū)動設(shè)計精粹
- 數(shù)據(jù)挖掘與數(shù)據(jù)化運營實戰(zhàn):思路、方法、技巧與應(yīng)用
- 社交網(wǎng)站的數(shù)據(jù)挖掘與分析(原書第2版)
- 實用預(yù)測分析
- 反饋:化解不確定性的數(shù)字認(rèn)知論