Silverlight 网格拆分器意外行为答案

【问题标题】：Silverlight Grid Splitter Unexpected BehaviourSilverlight 网格拆分器意外行为
【发布时间】：2009-02-17 12:31:55
【问题描述】：

我刚开始使用 2.0 版的 Silverlight。我想在页面上显示一些数据网格，并通过将每个数据网格放入网格单元格中来完成。然后我想我会尝试使用以下标记添加网格拆分器：

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"  x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
 Loaded="UserControl_Loaded">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <basics:GridSplitter Grid.RowSpan="2" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Width="5" VerticalAlignment="Stretch" ></basics:GridSplitter>
        <data:DataGrid Name="TLGrid" Grid.Row="0" Grid.Column="0">
        </data:DataGrid>
        <data:DataGrid Name="TRGrid" Grid.Row="0" Grid.Column="2">
        </data:DataGrid>
        <data:DataGrid Name="BLGrid" Grid.Row="1" Grid.Column="0">
        </data:DataGrid>
        <data:DataGrid Name="BRGrid" Grid.Row="1" Grid.Column="2">
        </data:DataGrid>
    </Grid>
</UserControl>

我希望能够拖动拆分器来调整其他两列的大小。当我拖动栏时，其他两列都会缩小。谁能解释一下为什么？

【问题讨论】：

标签： silverlight-2.0

【解决方案1】：

单元格以您所经历的方式调整大小的原因归结为ColumnDefinition 值和GridSplitter 的HorizontalAlignment。因为您没有指定高度，所以列宽默认为 Star。这意味着它们具有相等的间距。 GridSplitter HorizontalAlignment 然后指定它调整大小的方向。如果你居中或拉伸它，那么你会调整两边的大小，但如果你将它对齐到一个边缘或另一边，它只会调整那个边缘的大小，但是因为单元格平等地共享空间，所以两边都会缩小而不是只有一个。

虽然接受的答案提供了一种替代方法来使其正常工作，但它实际上并没有解释问题发生的原因。在它自己的单元格中放置一个分离器是完全可以接受的 - 事实上，它经常被推荐。

【讨论】：

@beaudetious：很高兴能帮上忙。 :)

【解决方案2】：

gridsplitter 不需要中间列。如果您将拆分器放在第 0 列，则 Gridsplitter 将绑定到第 0 列的右边缘。您可以在左侧的网格中添加一个小边距，这样您就不会丢失最后 5 个像素。

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <!--<ColumnDefinition Width="Auto"/>-->
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>

    <data:DataGrid Name="TLGrid" Grid.Row="0" Grid.Column="0" />
    <data:DataGrid Name="BLGrid" Grid.Row="1" Grid.Column="0"/>

    <!-- Moved the grid splitter to column 0 -->
    <basics:GridSplitter Grid.RowSpan="2" Grid.Row="0" Grid.Column="0" Width="5" />

    <data:DataGrid Name="TRGrid" Grid.Row="0" Grid.Column="2" />
    <data:DataGrid Name="BRGrid" Grid.Row="1" Grid.Column="2" />        
</Grid>

【讨论】：