Layout

The Layout Containers

The Panel Background

By default, the Background of a layout panel is set to a null reference, which is equivalent to this:

 <Grid x:Name="layoutRoot" Background="{x:Null}">

When your panel has a null background, any content underneath will show through (similar to if you set a fully transparent background color). However, there’s an important difference—the layout container won’t be able to receive mouse events.

Brushes support automatic change notification. In other words, if you attach a brush to a control and change the brush, the control updates itself accordingly.

The Grid

You create grids and rows by filling the Grid.ColumnDefinitions and Grid.RowDefinitions collections with objects. For example, if you decide you need two rows and three columns, you’d add the following tags:

     <Grid ShowGridLines="True" Background="White">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>

As this example shows, it’s not necessary to supply any information in a RowDefinition or ColumnDefinition element. If you leave them empty (as shown here), the Grid will share the space evenly between all rows and columns. In this example, each cell will be exactly the same size, depending on the size of the containing page.

The Grid supports three sizing strategies:

  1. Absolute sizes: You choose the exact size using pixels. This is the least useful strategy, because it’s not flexible enough to deal with changing content size, changing container size, or localization.
  2. Automatic sizes: Each row or column is given exactly the amount of space it needs and no more. This is one of the most useful sizing modes.
  3. Proportional sizes: Space is divided between a group of rows or columns. This is the standard setting for all rows and columns.

For maximum flexibility, you can mix and match these different sizing modes. For example, it’s often useful to create several automatically sized rows and then let one or two remaining rows get the leftover space through proportional sizing.

You set the sizing mode using the Width property of the ColumnDefinition object or the Height property of the RowDefinition object to a number. For example, here’s how you set an absolute width of 100 pixels:

 <ColumnDefinition Width="100"></ColumnDefinition>

To use automatic sizing, you use a value of Auto:

 <ColumnDefinition Width="Auto"></ColumnDefinition>

Finally, to use proportional sizing, you use an asterisk (*):

 <ColumnDefinition Width="*"></ColumnDefinition>

If you want to divide the remaining space unequally, you can assign a weight, which you must place before the asterisk. For example, if you have two proportionately sized rows and you want the first to be half as high as the second, you could share the remaining space like this:

 <RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>

You can also use two more attached properties to make an element stretch over several cells: RowSpan and ColumnSpan. These properties take the number of rows or columns that the element should occupy.

The GridSplitter

To use the GridSplitter effectively, you need to know a little bit more about how it works. Although the GridSplitter serves a straightforward purpose, it can be awkward at first. To get the result you want, follow these guidelines:

  1. The GridSplitter must be placed in a Grid cell. You can place the GridSplitter in a cell with existing content, in which case you need to adjust the margin settings so it doesn’t overlap. A better approach is to reserve a dedicated column or row for the GridSplitter, with a Height or Width value of Auto.
  2. The GridSplitter always resizes entire rows or columns (not single cells). To make the appearance of the GridSplitter consistent with this behavior, you should stretch the GridSplitter across an entire row or column, rather than limit it to a single cell. To accomplish this, you use the RowSpan or ColumnSpan properties you considered earlier.
  3. Initially, the GridSplitter is invisibly small. To make it usable, you need to give it a minimum size. In the case of a vertical splitter bar (like the one in Figure 3-14), you need to set the VerticalAlignment to Stretch (so it fills the whole height of the available area) and the Width to a fixed size (such as 10 pixels). In the case of a horizontal splitter bar, you need to set HorizontalAlignment to Stretch and Height to a fixed size.
  4. To actually see the GridSplitter, you need to set the Background property. Otherwise, the GridSplitter remains transparent until you click it (at which point a light blue focus rectangle appears around its edges).
  5. The GridSplitter respects minimum and maximum sizes, if you’ve set them on your ColumnDefinition or RowDefinition objects. The user won’t be allowed to enlarge or shrink a column or row outside of its allowed size range.

Custom Layout Containers

The Two-Step Layout Process

Every panel uses the same plumbing: a two-step process that’s responsible for sizing and arranging children. The first stage is the measure pass, and it’s at this point that the panel determines how large its children want to be. The second stage is the layout pass, and it’s at this point that each control is assigned its bounds. Two steps are required, because the panel might need to take into account the desires of all its children before it decides how to partition the available space.

You add the logic for these two steps by overriding the oddly named MeasureOverride() and ArrangeOverride() methods, which are defined in the FrameworkElement class as part of the Silverlight layout system. The odd names represent that the MeasureOverride() and ArrangeOverride() methods replace the logic that’s defined in the MeasureCore() and ArrangeCore() methods that are defined in the UIElement class. These methods are not overridable.

Silverlight:《Pro Silverlight5》读书笔记 之 Layout的更多相关文章

  1. WPF,Silverlight与XAML读书笔记(3) - 标记扩展

    hystar的.Net世界 博客园 首页 新闻 新随笔 联系 管理 订阅 随笔- 103  文章- 0  评论- 107  WPF,Silverlight与XAML读书笔记(3) - 标记扩展   说 ...

  2. WPF,Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形

    原文:WPF,Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形 说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘> ...

  3. WPF,Silverlight与XAML读书笔记第四十八 - Silverlight网络与通讯

    说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 这一部分我们重点讨论下Silverlight ...

  4. WPF,Silverlight与XAML读书笔记第四十七 - Silverlight与浏览器

    说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 这部分内容主要介绍Silverlight与浏 ...

  5. WPF,Silverlight与XAML读书笔记第四十五 - 外观效果之模板

    说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 模板允许用任何东西完全替换一个元素的可视树, ...

  6. WPF,Silverlight与XAML读书笔记第四十四 - 外观效果之样式

    说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 如果你有Web编程的经验,你会知道使用Sty ...

  7. WPF,Silverlight与XAML读书笔记第四十三 - 多媒体支持之文本与文档

    说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. Glyphs对象(WPF,Silverlig ...

  8. WPF,Silverlight与XAML读书笔记第四十六 - 外观效果之三皮肤与主题

    说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 皮肤 皮肤是应用程序中样式与模板的集合,可以 ...

  9. pro mvvm 读书笔记

    一.分离关注点 目的是确保每一个模块值有单一的,明确的目的,不需要去负责其他的功能.单一的目的也称为关注点. 1.1依赖 引用程序集对于依赖来说不是必须的.依赖关系可能也存在于一个代码单元要知道另一个 ...

随机推荐

  1. 洛谷 P2036 Perket 题解

    题目传送门 这道题可以使用dfs深搜实现,在每次递归深搜时要更新ans. #include<bits/stdc++.h> using namespace std; ,s=,b; ]; st ...

  2. scrollview 滚动布局

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"    android:layou ...

  3. c#中值类型和引用类型的区别

    1.    值类型的数据存储在内存的栈中:引用类型的数据存储在内存的堆中,而内存单元中只存放堆中对象的地址. 2.     值类型存取速度快,引用类型存取速度慢. 3.     值类型表示实际数据,引 ...

  4. 通过 JS 实现错误页面在指定的时间跳到主页

    通过 JS 实现错误页面在指定的时间跳到主页 <!DOCTYPE html> <html> <head> <title>浏览器对象</title& ...

  5. [hdu3934] 凸包 旋转卡壳

    大致题意: 求多边形的最大内接三角形 旋转卡壳 模板题 #include<cstdio> #include<iostream> #include<cstring> ...

  6. java变量的命名使用规则

    1.环境变量通常是指在操作系统中,用来指定操作系统运行时需要的一些参数 2.变量名以字母.下划线或者美元符(4上面的¥)开头,不能以数字开头,后面跟字母.下划线.美元符.数字,变量名对大小写敏感,无长 ...

  7. Django+Nginx+uwsgi搭建自己的博客(一)

    最近对写爬虫有些厌倦了,于是将方向转移到了Web开发上.其实在之前自己也看过一部分Flask的资料,但总觉得Flask的资料有些零散,而且需要的各种扩展也非常多.因此,我将研究方向转移到了另一个主流的 ...

  8. java基础小测试

    1.JDK,JRE,JVM三者的区别 jdk:java 开发工具包 jre:运行环境 jvm:虚拟机 2.javac的作用 ,反编译工具的作用 javac:将java文件编译成class文件 反编译: ...

  9. 2017/11/6 Leetcode 日记

    2017/11/6 Leetcode 日记 344. Reverse String Write a function that takes a string as input and returns ...

  10. hdu 1690 Bus System (有点恶心)

    Problem Description Because of the huge population of China, public transportation is very important ...