Silverlight tutorial Part 2: Use layout management

[Original address] Silverlight Tutorial Part 2: Using Layout Management
[Original article] Friday, February 22,200 AM

This is Part 1 of the eight series of tutorials. This series demonstrates how to use Beta1 of Silverlight 2 to create a simple Digg client application. Please read These tutorials in sequence to help you understand some core programming concepts of Silverlight.

Understanding layout management

Both Silverlight and WPF support a flexible layout management system that allows developers and designers to easily locate controls on the UI. The layout system supports a fixed Positioning Model for controls with explicitly specified coordinates. In addition, it also supports a more dynamic positioning model, controls and la s can automatically change the browser size and orientation as the browser size changes.

In Silverlight and WPF, developers can use the layout Panel to coordinate the position and size of the control contained in it. The built-in layout panel in Silverlight Beta1 includes three most commonly used layout panels in WPF:

• Canvas
• StackPanel
• Grid

Canvas panel

Canvas panel is a basic layout panel that supports absolute coordinate positioning of controls.

You can locate the elements in the Canvas through a XAML feature-"additional attribute. With additional attributes, you can specify the upper, lower, left, and right coordinates of the control relative to its direct parent Canvas control. Additional attributes are useful because they allow the parent panel to expand the property set of the controls contained in them. Canvas defines the Top and Left attributes of the extended attributes to define the Left and Top attributes of the Button (or any other UI element) without actually adding this attribute to the Button class, or modify the Button class.

We can add two buttons to the Canvas container to specify that the distance from the left side of the Canvas is 50 pixels, and the distance from the top side is 50 pixels and 150 pixels respectively. You can use the following XAML syntax (Canvas. Top and Canvas. Left are examples of additional attributes ):

The effects of the Code on the interface are as follows:

Canvas is suitable for scenarios where the UI elements are relatively fixed. However, if you want to add more controls to the Canvas, or the UI needs to be changed or moved, Canvas is not flexible. At this time, you have to be busy writing code to move something in the Canvas (this is painful ). To cope with such dynamic scenarios, it is usually better to use other built-in semantic layout panels with relevant functions, such as StackPanel and Grid.

StackPanel

StackPanel is a simple layout panel that allows you to locate the control contained in it by using rows or columns. StackPanel is often used to arrange a small UI part on a page.

For example, we can use the following XAML label to vertically arrange three buttons on the page:

At runtime, StackPanel will automatically arrange our buttons in a vertical stack, as shown below:

Similarly, we can set the Orientation attribute to Horizontal instead of Vertical (default ):

This allows the StackPanel to arrange three buttons horizontally, as shown in:

Grid panel

The Grid control is the most flexible layout Panel. It supports multi-row and multi-column layout controls. Conceptually, it is similar to a Table in HTML.

Unlike Table, you do not need to embed controls into row/column elements, but define <Grid. rowDefinitions> and <Grid. columnDefinitions> attribute to define the rows and columns of the Grid. These two attributes must be defined in the <Grid> label. In this way, you can use the "Additional attributes" Syntax of XAML to specify the row and column in the control.

For example, we can use the following syntax to define the Grid layout of three rows and three columns, and then place four buttons in it:

The above code will arrange the buttons as follows:

In addition to the absolute dimension definition (such as Height = "60"), the RowDefinition and ColumnDefinition controls of the Grid also support the automatic size change mode (Height = "Auto "), this will automatically change the size of the Grid or Row based on the size of the content (you can also specify the maximum or minimum size limit ).

Grid Row and ColumnDefinitions also support features called "Proportional Sizing" (Proportional scaling. With this feature, the row and column of the Grid can be discharged in a relative proportion (for example, you can specify that the size of the second row is twice the size of the first row ).

You will find that Grid provides a lot of functions and flexibility-and it may become your most commonly used layout panel control.

Deploy our Digg page with layout panel

The goal of creating the Digg example is to get the page that eventually looks like:

To create this layout, first add a root-level Grid panel containing two RowDefinition. The Height of the first line is 40 pixels, while that of the second line occupies all the remaining space (Height = "*"):

Tip: note that I set the ShowGridLines attribute of Grid to True, so that we can easily see the line between the row and column at runtime:

Next, we add the second Grid panel to the position of the first row in the root-level Grid panel, and use it to arrange the rows at the top of the page (the page header ). Three columns are created: the title, the search text box, and the Search button:

After completing these steps, we get the basic layout of the Digg search page, as shown below:

Note: If you do not need a nested Grid, you can use a Grid with two rows and three columns to complete the layout, use the ColSpan/RowSpan feature of Grid to merge content in multiple columns (similar to your practice in HTML table ). I chose to use nested Grid because it is easier to learn and understand.

Now we have finished the layout. Next we need to add controls to it.

For the rows in the header, we use the built-in <Border> Control (set its CornerRadius to 10 to get the rounded corner effect) and add some text to it to create the title. We use the built-in <WatermarkedTextBox> Control to create the search text box in the second column. And put a search <Button> In column 3rd. Then we put some placeholder text in the second row. We will display the search result here later.

Note: Below I will directly embed style information (FontSize, Colors, Margins, etc.) in the control ). Later in this series of tutorials, I will demonstrate how to use Styles to extract and encapsulate these settings into a separate file (similar to CSS) for reuse throughout the application.

 

Now, let's run the application and the following interface will be displayed:

Dynamically change application size

You may have noticed that in the above XAML, our top-level control is set to a fixed height and width:

In this way, our Silverlight application keeps this fixed size. To enlarge the browser size, it will be more obvious:

Although in some cases, it is useful to fix embedded applications in a fixed area of the HTML page, our Digg search programs are different, we would rather it automatically scales with the browser, just like a common HTML page.

The good news is that this is easy to implement. Just remove the Width and Height attributes on the root control:

In this way, our Silverlight application will automatically expand (or contract) to fill in its embedded HTML container. Because the SilverlightTestPage.html file we used to test places the Silverlight control in an HTML <div> element and the width and height of its CSS settings are both 100%, the Digg application will eventually fill the entire browser:

Note how the size of the text content in the page header automatically changes with the browser width:

When we narrow down the browser size, the watermark text box and search button will keep the same size, because the width of its Grid container column is fixed. The <Border> control containing the "Digg Search" title automatically adjusts the size because the Width of its Grid column is set to Width = "*".

We can enable this layout without writing a line of code. The Grid container and layout system automatically resize or flow anything.

Next step

Now we have created the layout structure of the Digg program and defined the rows in the page header.

Next, we will implement the search behavior of the program-so that it can actually get the story content from Digg.com when the end user of the program searches for a title.

If you want to know how to implement it, read the next article: Use Networking to obtain data and fill in the DataGrid.