Question

我希望有一个可以通过按下ToggleButton隐藏的侧边栏，并由用户通过鼠标使用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时，网格'网格'消失的内容和GridColumn（1）变小，为GridColumn（0）留下更多空间。但是一旦我放入GridSplitter，自动调整大小就会停止。有谁知道如何解决这个问题？

Answer 1

我试图重现你的场景，看起来我理解你的情况发生了什么。这是你的问题 -

If you just use ToggleButton then your column would expand/collapse correctly; 
if you use GridSplitter, then too it would expand/cllapse correctly; 
but if you once use GridSplitter and then try and use ToggleButton 
than column won't shrink correctly.

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

原因是，一旦您使用GridSplitter，它会将列的宽度更改为固定值，因为＆lt; 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?

Answer 2

听起来你遇到了与这个问题相同的问题：

GridSplitter disables my RowDefinition style

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

可调整大小和可折叠的网格列宽gridSplitter

2 个答案: