Grid一般是用表格(Grid.Row 和Grid.Column )的，比StackPanel更細(xì)致一些，但是，這么玩很麻煩，先橫著豎著定義一大堆，然后把元素指定其表格位置，即插入數(shù)據(jù)，和我們平常習(xí)慣的HTML表格不太一樣，甚至更麻煩了。
原因如下：Html空單元格要放占位符，這樣會(huì)放很多；Grid玩法則是用什么元素就指定單元格位置，不用的單元格默認(rèn)是空，不用指定。另外，Grid單元格中的多個(gè)控件可以按照Z(yǔ)軸堆疊，這個(gè)順序是由控件在xaml上的出現(xiàn)順序決定的。

Grid列寬的定義：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="50" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="2*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

第一種，固定長(zhǎng)度——寬度不夠，會(huì)裁剪，不好用。單位pixel。
第二種，自動(dòng)長(zhǎng)度——自動(dòng)匹配列中最長(zhǎng)元素的寬度。
第三種，比例長(zhǎng)度——*表示占用剩余的全部寬度；兩行都是*，將平分剩余寬度；像上面的一個(gè)2*，一個(gè)*，表示前者2/3寬度。

單元格合并，1.4已經(jīng)介紹過(guò)，這里強(qiáng)調(diào)一點(diǎn)，雖然一個(gè)控件A跨越2個(gè)單元格，但是并未改變?cè)瓉?lái)Grid的所有單元格，也就是說(shuō)，這是兩個(gè)對(duì)象Grid和控件A，互相不影響。那么，另一個(gè)控件B仍然可以使用這兩個(gè)單元格中的一個(gè)，最后根據(jù)A與B的先后出現(xiàn)順序會(huì)有重疊效果。這是不同于html單元格合并概念的。這段話(huà)是我自己想的，多精辟啊，一針見(jiàn)血。終于對(duì)xaml有點(diǎn)感覺(jué)了。

接下來(lái)講的是多個(gè)Grid共享寬度組的技術(shù)。smaple講的是把grid放入ScrollViewer中，但是一旦滾動(dòng)ScollBar，grid的Title會(huì)跟著一起滾動(dòng)，為了做到滾動(dòng)時(shí)Title定住不動(dòng)，要做兩個(gè)Grid：一個(gè)放Title；另一個(gè)放主體，并嵌套進(jìn)ScrollViewer中。這樣滾動(dòng)問(wèn)題解決了，另一個(gè)問(wèn)題又出現(xiàn)了，就是兩個(gè)Grid的字段對(duì)不齊，于是要使用shared-size組。

    <DockPanel Grid.IsSharedSizeScope="True">
        <Grid DockPanel.Dock="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
                <ColumnDefinition Width="Auto" />

//省略若干行代碼

            <Border Grid.Column="0" Grid.Row="0" BorderThickness="1"
                    Background="LightGray" BorderBrush="Gray">
                <TextBlock>Title</TextBlock>
            </Border>
            <Border Grid.Column="1" Grid.Row="0" BorderThickness="1"
                    Background="LightGray" BorderBrush="Gray">
                <TextBlock>Location</TextBlock>
            </Border>
            <Border Grid.Column="2" Grid.Row="0" BorderThickness="1"
                    Grid.ColumnSpan="2"
                    Background="LightGray" BorderBrush="Gray">
                <TextBlock>Rank</TextBlock>
            </Border>

            <FrameworkElement Grid.Column="3"
               Width="{DynamicResource {x:Static SystemParameters.ScrollWidthKey}}" />

        </Grid>

        <ScrollViewer>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
                </Grid.ColumnDefinitions>

//省略若干行代碼

            </Grid>
        </ScrollViewer>
    </DockPanel>

首先，在DockPanel 設(shè)置共享：Grid.IsSharedSizeScope="True"。這樣做的目的是使得DockPanel外的同名列不受影響。
DockPanel中兩個(gè)容器，Grid和ScrollViewer，前者設(shè)置標(biāo)題，后者內(nèi)嵌Grid，裝載內(nèi)容行(紅色字體)。
先說(shuō)Grid，有4列，接著，設(shè)置第二列第三列為Shared-size Group，第一列寬度為*(自適用)；第四列的增加是因?yàn)閣idth=*對(duì)SharedSize無(wú)效，所以增加這一列為ScrollBar占位：
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
                <ColumnDefinition Width="Auto" />

Rank跨占了2列，為了兼容多生成的第四列，
            <Border Grid.Column="2" Grid.Row="0" BorderThickness="1"
                    Grid.ColumnSpan="2"
                    Background="LightGray" BorderBrush="Gray">
                <TextBlock>Rank</TextBlock>
            </Border>
接著，設(shè)置Grid第4列為滾動(dòng)條寬度 ，于是因?yàn)镽ank跨占了2列，所以Rank寬度為自己最大寬度+滾動(dòng)條寬度，這樣就保證了后面的都對(duì)齊了，從而前面第一列也對(duì)齊了：
          <FrameworkElement Grid.Column="3"
               Width="{DynamicResource {x:Static SystemParameters.ScrollWidthKey}}" />

再說(shuō)ScrollViewer容器，在內(nèi)嵌的Grid中設(shè)置Shared-size Group與第一個(gè)Grid中的列相對(duì)應(yīng)：
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />

注：這里用到了DynamicResource ，而不是StaticResource，具體技術(shù)見(jiàn)第6章。

分析完畢。

• 1. Re:禪道Bug管理工具環(huán)境搭建

• 如：
  改為

• --高速蟲(chóng)

• 2. Re:禪道Bug管理工具環(huán)境搭建

• 請(qǐng)問(wèn)網(wǎng)址的域名怎么改成公司的名稱(chēng)？

• --高速蟲(chóng)

• 3. Re:禪道Bug管理工具環(huán)境搭建

• 請(qǐng)問(wèn)

• --高速蟲(chóng)

• 4. Re:用javascript 面向?qū)ο笾谱魈箍舜髴?zhàn)（二）

• 為什么頁(yè)面上沒(méi)有代碼的解析

• --勞倫斯law

• 1. 在Myeclipse中配置Maven(41624)

• 2. atan()與atan2()(16268)

• 3. CHM文件無(wú)法打開(kāi)的解決方法(14805)

• 4. Android中如何設(shè)置字體大小(14333)

• 5. PHP HTTP請(qǐng)求(12573)