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:

  1. <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:

  1. <Grid ShowGridLines="True" Background="White">
  2. <Grid.RowDefinitions>
  3. <RowDefinition></RowDefinition>
  4. <RowDefinition></RowDefinition>
  5. </Grid.RowDefinitions>
  6. <Grid.ColumnDefinitions>
  7. <ColumnDefinition></ColumnDefinition>
  8. <ColumnDefinition></ColumnDefinition>
  9. <ColumnDefinition></ColumnDefinition>
  10. </Grid.ColumnDefinitions>
  11. </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:

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

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

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

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

  1. <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:

  1. <RowDefinition Height="*"></RowDefinition>
  2. <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. Codeforces 86D - Powerful array(莫队算法)

    题目链接:http://codeforces.com/problemset/problem/86/D 题目大意:给定一个数组,每次询问一个区间[l,r],设cnt[i]为数字i在该区间内的出现次数,求 ...

  2. SPOJ D-query(莫队算法模板)

    题目链接:http://www.spoj.com/problems/DQUERY/ 题目大意:给定一个数组,每次询问一个区间内的不同元素的个数 解题思路:直接套莫队的裸题 #include<cs ...

  3. 号外,号外 -几乎所有的binary search和mergesort都有错

    号外,号外 -几乎所有的binary search和mergesort都有错 这是Joshua Bloch(Effective Java的作者)在google blog上发的帖子.在说这个帖子之前,不 ...

  4. Flume(二)Flume的Source类型

    一.概述 官方文档介绍:http://flume.apache.org/FlumeUserGuide.html#flume-sources 二.Flume Sources 描述 2.1 Avro So ...

  5. TeX中的引号(UVa272)

    问题: 在Tex中,做双引号的" `` ",右双引号是"  '' "(两个回车左边的).输入一篇包含双引号的文章,你的任务是把它转换成TeX的格式. 样例输入: ...

  6. vue插件集合

    Vue2.0+组件库总结 UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview  ...

  7. Gitlab基本管理<一>

    一. 创建Gitlab中第一个项目 1. Gitlab项目的可见类型有三种级别. Private project: 该级别是只有项目拥有者或者已经得到授权的人可以访问该项目,或者这些人是该项目组的成员 ...

  8. webpack3.0+总结

    ul>li{ color:blue; font-size:20px } .items>ul>li>ul>li{ color:crimson } --> webpac ...

  9. C++快速文件输入输出

    转载请注明: 仰望高端玩家的小清新 http://www.cnblogs.com/luruiyuan/ C语言可以获得接近汇编的性能,而输入输出常常是最为耗时的过程,因此可以使用 C 语言中的 fre ...

  10. 洛谷P2704 [NOI2001]炮兵阵地 [状压DP]

    题目传送门 炮兵阵地 题目描述 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用“H” 表示),也可能是平原(用“P”表示),如下图 ...