Silverlight 超丑动态布局

效果图：

在线显示地址：http://www.cnwp7.net/demo/website2/

其他站点（不是俺的）：http://pjd.mscui.net/PrimaryCareAdmin.htm

如果看了上面的图片和在线演示，还是不明俺是要实现什么效果的盆友，好吧，请点击左上角类似这样的按钮。一路走好啊，哈哈。

好了，接下来咱们来实现类似效果，实现此效果我们只需要用Blend（以下简称“神器”）简单操作几下，也就10来分钟左右吧（纯实现动态布局的这个效果，在线演示俺是花了将近俩小时搞的）。接下来我们就开始吧。

1.打开神器-新建一个Silverlight Application。

2.在这里为了简单起见，我们创建一个只有4个模块的页面（在线演示是6个模块），将MainPage.xaml中的<Grid x:Name="LayoutRoot" Background="White"/>替换成以下代码，

切换到设计界面应该是如下图：

这是一个4行3列的Grid，第三列的宽度是Auto。

3.在 Objects and Timeline 窗口中，我们选中 LayoutRoot，单击 States 窗口中，单击类似这样按钮，添加一个状态组，此步骤应该如下图所示：

4.在 VisualStateGroup 上单击按钮，连续单击5次即可，此时应如下图：

为什么要添加5个状态呢？我们需要这么想，所有模块同等大小填充页面的时候应该为一个状态，也就是默认状态（VisualState 对应默认状态，无需修改），有4个模块，1个模块对应一个状态，其中4个状态分别是：1模块变大填充页面，2、3、4模块左边垂直对齐变小；2模块变大填充界面，1、3、4模块左边垂直对齐……；3、4模块依次类推。

5.在 States 窗口中选中 VisualState1，在 Objects and Timeline 窗口中选中第一个 Grid 中的第一个按钮，第一个按钮是“放大”，此时应该如下所示：

在 Properties 窗口中将 Visibility 属性设置成 Collapsed，将下一个按钮，也就是“变小”按钮的 Visibility 属性设置成 Visible，此时应该如下图：

这样做是为了在单击“放大”按钮时，将“放大”按钮隐藏，并显示出“变小”按钮。

6.接下来，我们需要设置每个 Grid 的状态，我们先来分析一下：当单击第一个 Grid 中的“放大”按钮时，第一个 Grid 的 RowSpan 要跨4行才可以填充整个垂直界面（如果要跨4行，则 Row 必须为0），而 ColumnSpan 需要跨2列才能填充整个水平界面（如果需要跨2行，则 Column 必须为0）。有盆友问，不是一共有3列么？对啊，最后一列是给其他变小的 Grid 的容身之处（最后一列是宽度为 Auto，每个 Grid 的 MinWidth="200"），其他 Grid 需要垂直排列在最后一列中。开始操作，在 Objects and Timeline 窗口中选中第一个 Grid，分别在 Properties 窗口中将 Row=0、Column =0、RowSpan =4、ColumnSpan =2；第二个 Grid：Row=0、Column =2、RowSpan =1、ColumnSpan =1；第三个 Grid：Row=1、Column =2、RowSpan =1、ColumnSpan =1；第四个 Grid：Row=2、Column =2、RowSpan =1、ColumnSpan =1。这样一个状态就做好了，第一个状态做好了，其他的就不用我说了吧？依此类推即可。当我们设置完所有状态，每个状态应该对应如下：
VisualState：

VisualState1：

VisualState2：

VisualState3：

VisualState4：

7.在 States 窗口中，选中 Default transition，将值设置为0.5s，如下图：

8.最为关键的一步，在 States 窗口中，VisualStateGroup 状态组单击类似的按钮，如果需要在设计时预览状态切换的过渡效果：在 States 窗口中，单击右上角类似按钮，如果你按照我说的步骤操作，此时用鼠标切换每个状态，可以看到状态切换时的过渡效果。
9.万事俱备，只欠东风了，现在所有的状态都已经完工，还差将每个状态绑定到每个按钮的 Click 事件上，我们可以使用 GoToStateAction行为侦听按钮的单击事件来激活指定的可视状态。单击 Assets 窗口并选中 Behaviors，在右侧选中 GoToStateAction ，如下界面：

将 GoToStateAction 拖到 Objects and Timeline 中的每个按钮上（可以偷懒的哦，复制一下嘛），然后选中第一个 Grid 中的“放大”按钮下的 GoToStateAction，在 Properties 窗口中将 StateName 设置成 VisualState1，“变小”按钮下的 GoToStateAction 的 StateName 设置成 VisualState；第二个 Grid 中的“放大”按钮下的 GoToStateAction 的 StateName 则设置为 VisualState2，“变小”按钮下的 GoToStateAction 的 StateName 设置成 VisualState。依此类推。
10.貌似我们已经大功告成了？我想想，还有什么？哦，在 Objects and Timeline 窗口中选中 UserControl，Properties 窗口中将 Width 和 Height 设置为自动（单击属性后面的按钮即可），此步骤也可以省略。现在好像没什么了，ctrl+F5吧，运行看看吧。

应该还可以吧。最后一句，10分钟，你学会了么？
源码下载