WPF SharedSizeGroup GridSplitter 问题答案

【问题标题】：WPF SharedSizeGroup GridSplitter IssueWPF SharedSizeGroup GridSplitter 问题
【发布时间】：2012-07-14 05:21:42
【问题描述】：

我希望将 Grid 用于我的顶级布局。网格将有 1 列和 n 行。 Grid 中的每一行还应包含一个 Grid，该 Grid 应具有 3 列和 1 行。第二列是一个 GridSplitter，我正在尝试使用 SharedSizeGroup，以便更改所有嵌套网格中第一列的大小。

这就是我所拥有的......它可以工作......好吧......如果你点击拆分器并调整大小而不放手它工作......但出于某种原因，如果你调整某些东西并让放开鼠标，然后尝试使用似乎“粘住”的不同行来调整大小。

有什么想法吗？

<!-- Parent Grid -->
<Grid Grid.IsSharedSizeScope="True">
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>

    <!-- First Grid -->
    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="A" Width="Auto"></ColumnDefinition>
            <ColumnDefinition SharedSizeGroup="B" Width="Auto"></ColumnDefinition>
            <ColumnDefinition SharedSizeGroup="C" Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Label Grid.Column="0">One-Left</Label>
        <GridSplitter Grid.Column="1" Width="5" Background="DarkGray"></GridSplitter>
        <Label Grid.Column="2">One-Right</Label>
    </Grid>

    <!-- Second Grid -->
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="A" Width="Auto"></ColumnDefinition>
            <ColumnDefinition SharedSizeGroup="B" Width="Auto"></ColumnDefinition>
            <ColumnDefinition SharedSizeGroup="C" Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Label Grid.Column="0">Two-Left</Label>
        <GridSplitter Grid.Column="1" Width="5" Background="DarkGray"></GridSplitter>
        <Label Grid.Column="2">Two-Right</Label>
    </Grid>

</Grid>

【问题讨论】：

在 .net 4.0 的 VS2010 beta 2 中也尝试过这个并得到同样的问题。
如果是这种情况，您应该立即在 Microsoft Connect 上报告此错误。他们仍有机会在 4.0 中修复它！！！
尝试在所有子网格上使用网格分割器，看看我的回答，希望对您有所帮助
当有多个 gridsplitter 的网格单元在相同大小范围内时，似乎会发生这种情况。

标签： wpf grid gridsplitter

【解决方案1】：

从ms connect转发我的回答：

您通常可以通过不使用 SharedSizeGroup 而是将所有共享大小绑定到一个对象（例如您的数据上下文）上的单个属性来解决此问题：

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:WpfApplication3"
        Height="350" Width="525" Title="MainWindow">

    <Window.DataContext>
        <my:MainWindowData Width0="1*" Width1="1*" />
    </Window.DataContext>

    <Window.Resources>

        <DataTemplate x:Key="dt">
         <Grid>
            <Grid.ColumnDefinitions>
             <ColumnDefinition Width="{Binding Path=Width0, Mode=TwoWay}" />
             <ColumnDefinition Width="Auto" />
             <ColumnDefinition Width="{Binding Path=Width1, Mode=TwoWay}" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Content="{Binding Width0}" />
            <GridSplitter Grid.Column="1" Width="10" ResizeBehavior="PreviousAndNext" ResizeDirection="Columns" />
            <Button Grid.Column="2" Content="{Binding Width1}" />
         </Grid>
        </DataTemplate>

    </Window.Resources>

    <StackPanel>
        <ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource dt}" />
        <ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource dt}" />
    </StackPanel>

</Window>

其中 Width0 和 Width1 是匹配类型 (GridLength)。它适用于任何组合的任何尺寸（固定、星形和自动）。

更新：

另外，也许更好的是，您可以完全在 XAML 中完成，而不是绑定到 DataContext。只需定义一个带有命名列的主网格（不一定是父网格，但您需要某种方式来引用它），然后按名称绑定到它们。

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="350" Width="525" Title="MainWindow">

    <!-- shared sizing used only on fixed size columns therefore safe -->
    <!-- alternatively you can hardcode width of splitter column -->
    <Grid Name="masterGrid" Grid.IsSharedSizeScope="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" Name="masterColumn0" />
            <ColumnDefinition Width="Auto" SharedSizeGroup="masterColumn1" />
            <ColumnDefinition Width="1*" Name="masterColumn2" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.ColumnSpan="3">
            <StackPanel.Resources>
                <DataTemplate x:Key="dt">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{Binding Path=Width, Mode=TwoWay, ElementName=masterColumn0}" />
                            <ColumnDefinition Width="Auto" SharedSizeGroup="masterColumn1" />
                            <ColumnDefinition Width="{Binding Path=Width, Mode=TwoWay, ElementName=masterColumn2}" />
                        </Grid.ColumnDefinitions>
                        <Button Grid.Column="0" Content="{Binding Path=Width, Mode=TwoWay, ElementName=masterColumn0}" />
                        <Button Grid.Column="2" Content="{Binding Path=Width, Mode=TwoWay, ElementName=masterColumn2}" />
                    </Grid>
                </DataTemplate>
            </StackPanel.Resources>
            <ContentPresenter ContentTemplate="{StaticResource dt}" />
            <ContentPresenter ContentTemplate="{StaticResource dt}" />
        </StackPanel>
        <GridSplitter Grid.Column="1" Width="10" ResizeBehavior="PreviousAndNext" ResizeDirection="Columns" ShowsPreview="True" />
    </Grid>

</Window>

这增加了使用所有网格共享的单个网格拆分器的好处。

【讨论】：

【解决方案2】：

我能够重现这个，老实说，它看起来像一个错误。具体来说，如果在第一行扩大列的宽度，我无法将宽度减小到比另一行的宽度更远的程度。我打算再试试这个，但是……不知道怎么解决这个问题。

【讨论】：

感谢您的回复。我就是这么想的。它似乎应该可以工作，而且确实可以……但也完全不行。它把我逼疯了！！

【解决方案3】：

如果您觉得合适，请尝试此解决方案（在 Kaxaml 中效果很好）。

<!-- Parent Grid -->
<Grid Grid.IsSharedSizeScope="True">

  <Grid.RowDefinitions>
    <RowDefinition></RowDefinition>
    <RowDefinition></RowDefinition>
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition SharedSizeGroup="A" Width="Auto"></ColumnDefinition>
    <ColumnDefinition Width="Auto"></ColumnDefinition>
    <ColumnDefinition SharedSizeGroup="C" Width="Auto"></ColumnDefinition>
  </Grid.ColumnDefinitions>

  <Label Grid.Column="0" Grid.Row="0">One-Left</Label>
  <Label Grid.Column="0" Grid.Row="1">Two-Left</Label>
  <GridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Width="5" Background="DarkGray"></GridSplitter>
  <Label Grid.Column="2" Grid.Row="0">One-Right</Label>
  <Label Grid.Column="2" Grid.Row="1">Two-Right</Label>

</Grid>

希望对你有帮助

【讨论】：