Question

我刚刚开始使用版本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>

我希望能够拖动分割器来调整其他两列的大小。当我拖动栏时，其他两列都缩小了。任何人都可以解释原因吗？

Answer 1

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

虽然接受的答案提供了另一种方法来实现这一点，但实际上并没有解释问题发生的原因。将分离器放入自己的单元中是完全可以接受的 - 事实上，通常建议使用它。

Answer 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>

Silverlight Grid Splitter意外行为

2 个答案: