- 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
- 351字
- 2021-08-20 15:36:39
Basic elements for layout definition
When you work with HTML, you build the basic visual structure of a page by using tables or divs (in more modern browsers, you can use a canvas as well). In Silverlight 5 we have three basic elements: Canvas
, StackPanel
, and Grid
.
Canvas
This layout control permits us to place Child controls in coordinates relative to the canvas parent (taking into account that the upper-left corner of the canvas is the (0,0) coordinate) X, Y, Z (Z for the ZIndex
). It is perfect for the implementation of drawing applications or those devoted to diagram management.
In the following code you can see an example where a rectangle and an ellipse are drawn:
<Canvas> <Rectangle Canvas.Top="25" Canvas.Left="50" Fill="Blue" Width="70" Height="80" StrokeThickness="3" Stroke="Black" /> <Ellipse Canvas.Top="50" Canvas.Left="80" Fill="Yellow" Width="120" Height="80" StrokeThickness="3" Stroke="Black" /> </Canvas>
Canvas.Top
and Canvas.Left
are attached properties. Such properties allow a child element to store a value associated with a property defined on an ancestor element.
The result is as shown in the following screenshot:

StackPanel
The StackPanel
control allows us to pile up child controls in horizontal or vertical rows. We can nest several StackPanel
controls. This combination makes it possible to implement complex layouts, as shown in the following code and the resulting screenshot:
<StackPanel Orientation="Vertical" HorizontalAlignment="Center"> <Image Source="./images/Hydrangeas.jpg" Height="200" Margin="5"/> <StackPanel Orientation="Horizontal"> <Image Source="./images/Chrysanthemum.jpg" Height="100" Margin="5"/> <Image Source="./images/Hydrangeas.jpg" Height="100" Margin="5"/> <Image Source="./images/Jellyfish.jpg" Height="100" Margin="5"/> </StackPanel> </StackPanel>

Grid
A grid permits us to place content in rows and columns. The concept is similar to an HTML table, but much more evolved. Before you start adding controls to the grid, you need to specify its layout. This is done with the Grid.RowDefinitions
and Grid.ColumnDefinitions
collection.
To set the position of the element inside the grid, we use the attached properties Grid.Row
and Grid.Column
. The first position starts at 0
. To establish the width or height of a given row or column, we can use a fixed pixel width/height. Let the layout manager autoadjust the size to the space available (auto), or provide a given width/height based on percentages instead of pixels.
<Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="100"/> <RowDefinition Height="100"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="150"/> <ColumnDefinition Width="90"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Source="./images/Desert.jpg" Height="100" Margin="5" Grid.Row="0" Grid.Column="0"/> <TextBlock Text="Desert" Grid.Row="0" Grid.Column="1"/> <TextBlock Text="Geographical area whose average annual precipitation is less than 250 millimeters (10 in) per year." Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" /> <Image Source="./images/Tulips.jpg" Height="100" Margin="5" Grid.Row="1" Grid.Column="0"/> <TextBlock Text="Tulip" Grid.Row="1" Grid.Column="1"/> <TextBlock Text="Perennial, bulbous plant which belongs to the family Liliaceae." Grid.Row="1" Grid.Column="2" TextWrapping="Wrap" /> </Grid>

Controls
Silverlight offers us a series of user controls, which are available in the Toolbox palette. The most common ones are shown in the following screenshot:

You can find additional controls (for free) in the Silverlight Toolkit (http://silverlight.codeplex.com/). There are plenty of commercial libraries available.
- 數據庫基礎教程(SQL Server平臺)
- 大數據:規劃、實施、運維
- 大數據算法
- 數據驅動設計:A/B測試提升用戶體驗
- 中國數字流域
- Remote Usability Testing
- Hands-On Mathematics for Deep Learning
- 信息學競賽寶典:數據結構基礎
- gnuplot Cookbook
- IPython Interactive Computing and Visualization Cookbook(Second Edition)
- 數據挖掘競賽實戰:方法與案例
- Access 2010數據庫程序設計實踐教程
- 企業大數據處理:Spark、Druid、Flume與Kafka應用實踐
- 推薦系統全鏈路設計:原理解讀與業務實踐
- Learn Selenium