使用 gridSplitter 可调整大小和可协作的 gridColumn

Question

我希望有一个侧边栏，可以通过按下切换按钮来隐藏它，并由用户使用 GridSplitter 控件通过鼠标重新调整大小。最后我希望它看起来像这样：

(请看图1)

还有：

(请看图2)

这是我目前所拥有的：

<Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" HorizontalAlignment="Left" Width="4"
 BorderThickness="1,0" Foreground="{x:Null}" Background="#01000000" BorderBrush="{DynamicResource ColorControlBorder}"/>
<Grid x:Name="grid" Grid.Column="1" Margin="4,0,0,0" Background="{DynamicResource IconErrorFilter}" RenderTransformOrigin="0.5,0.5">
    <Grid.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Grid.RenderTransform>
    <Expander x:Name="expander2" Style="{DynamicResource AddExpanderStyle}" 
        ExpandDirection="Up" Background="#D8FFFFFF" BorderBrush="{DynamicResource ColorControlBorder}"
        DataContext="{Binding FilterTypesPMod}" d:LayoutOverrides="Height" VerticalAlignment="Bottom">
        <Expander.Resources>
            <CollectionViewSource x:Key="CollectionFilterTypes" Source="{Binding FilterTypes}">
                <CollectionViewSource.SortDescriptions>
                    <ComponentModel:SortDescription PropertyName="Order" Direction="Ascending" />
                </CollectionViewSource.SortDescriptions>
            </CollectionViewSource>
        </Expander.Resources>
        <Grid>
            <ItemsControl BorderThickness="0" Background="Transparent" BorderBrush="Transparent"
                ItemsSource="{Binding Source={StaticResource CollectionFilterTypes}}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Bla... />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>
    </Expander>
</Grid>
<ToggleButton x:Name="toggleButton" Grid.Column="1" HorizontalAlignment="Left" Style="{DynamicResource CollapsingToggleButtonStyle}" Background="{DynamicResource ColorMainForeground}" RenderTransformOrigin="0.5,0.5">
    <ToggleButton.LayoutTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </ToggleButton.LayoutTransform>
</ToggleButton>

当我在没有 GridSplitter 的情况下使用它时，它工作正常（调整大小除外）：当我按下 ToggleButton 时，Grid 'grid' 的内容消失并且 GridColumn(1) 变得更小，为 GridColumn(0) 留下更多空间.但是，一旦我放入 GridSplitter，自动调整大小就会停止。有谁知道如何解决这个问题？

Answer 1

听起来你和这个问题有同样的问题：

GridSplitter disables my RowDefinition style

正如 akjoshi 所解释的，GridSplitter 更改了行的 Height 属性（列的 Width 属性）。如果在使用 GridSplitter 调整行或列的大小后检查 Height 或 Width 属性的值源，您会看到它已设置为“local”。 “本地”值会覆盖由样式、模板或触发器设置的任何值。清除 Height 或 Width 属性允许使用触发器和/或样式再次设置 Height 或 Width 属性。

Answer 2

我试图重现您的情况，看起来我了解您的情况。这就是你的问题 -

如果您只使用ToggleButton，那么您的列将正确展开/折叠； 如果您使用GridSplitter，那么它也会正确展开/折叠； 但是如果你使用GridSplitter 然后尝试使用ToggleButton 那么该列将不会正确收缩。

Here 是我用来复制问题的 xaml。

原因是一旦你使用GridSplitter，它会将列的宽度更改为固定值，因此ColumnDefinition Width="Auto"/>不再适用；它更改为固定值<ColumnDefinition Width="154"/>。现在，即使该列内的内容被折叠，列宽仍然是固定的（即 154）。这可以使用 SNOOP 轻松验证。

对此的一种解决方案是在按下 ToggleButton 时（通过动画或代码）将第二列的宽度更改为 Auto；通过动画设置列的宽度并不直接，但可以使用一些解决方法（创建 GridLengthAnimation ），如这些 SO 问题中所述 -

Grid Column changing Width when animating

In WPF, has anybody animated a Grid?