WPF筆記(2.4 Grid)——Layout

第一章已經簡單介紹過這個容器，這一節詳細介紹。

Grid一般是用表格(Grid.Row 和Grid.Column )的，比StackPanel更細緻一些，但是，這麼玩很麻煩，先橫着豎着定義一大堆，然後把元素指定其表格位置，即插入資料，和我們平常習慣的HTML表格不太一樣，甚至更麻煩了。

原因如下：Html空單元格要放占位符，這樣會放很多；Grid玩法則是用什麼元素就指定單元格位置，不用的單元格預設是空，不用指定。另外，Grid單元格中的多個控件可以按照Z軸堆疊，這個順序是由控件在xaml上的出現順序決定的。

Grid列寬的定義：

<Grid.ColumnDefinitions>

    <ColumnDefinition Width="50" />

    <ColumnDefinition Width="Auto" />

    <ColumnDefinition Width="2*" />

    <ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

第一種，固定長度——寬度不夠，會裁剪，不好用。機關pixel。

第二種，自動長度——自動比對列中最長元素的寬度。

第三種，比例長度——*表示占用剩餘的全部寬度；兩行都是*，将平分剩餘寬度；像上面的一個2*，一個*，表示前者2/3寬度。

單元格合并，1.4已經介紹過，這裡強調一點，雖然一個控件A跨越2個單元格，但是并未改變原來Grid的所有單元格，也就是說，這是兩個對象Grid和控件A，互相不影響。那麼，另一個控件B仍然可以使用這兩個單元格中的一個，最後根據A與B的先後出現順序會有重疊效果。這是不同于html單元格合并概念的。這段話是我自己想的，多精辟啊，一針見血。終于對xaml有點感覺了。

接下來講的是多個Grid共享寬度組的技術。smaple講的是把grid放入ScrollViewer中，但是一旦滾動ScollBar，grid的Title會跟着一起滾動，為了做到滾動時Title定住不動，要做兩個Grid：一個放Title；另一個放主體，并嵌套進ScrollViewer中。這樣滾動問題解決了，另一個問題又出現了，就是兩個Grid的字段對不齊，于是要使用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"

                <TextBlock>Location</TextBlock>

            <Border Grid.Column="2" Grid.Row="0" BorderThickness="1"

                    Grid.ColumnSpan="2"

                <TextBlock>Rank</TextBlock>

            <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 設定共享：Grid.IsSharedSizeScope="True"。這樣做的目的是使得DockPanel外的同名列不受影響。

DockPanel中兩個容器，Grid和ScrollViewer，前者設定标題，後者内嵌Grid，裝載内容行(紅色字型)。

先說Grid，有4列，接着，設定第二列第三列為Shared-size Group，第一列寬度為*(自适用)；第四列的增加是因為width=*對SharedSize無效，是以增加這一列為ScrollBar占位：

Rank跨占了2列，為了相容多生成的第四列，

接着，設定Grid第4列為滾動條寬度 ，于是因為Rank跨占了2列，是以Rank寬度為自己最大寬度+滾動條寬度，這樣就保證了後面的都對齊了，進而前面第一列也對齊了：

          <FrameworkElement Grid.Column="3"

再說ScrollViewer容器，在内嵌的Grid中設定Shared-size Group與第一個Grid中的列相對應：

注：這裡用到了DynamicResource ，而不是StaticResource，具體技術見第6章。

分析完畢。