0

我想要一个侧边栏，可以通过按下 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 时，Grid 'grid' 的内容消失并且 GridColumn(1) 变得更小，为 GridColumn(0) 留下更多空间。但是，一旦我放入 GridSplitter，自动调整大小就会停止。有谁知道如何解决这个问题？

4

2 回答 2

0

听起来您遇到了与此问题相同的问题：

GridSplitter 禁用我的 RowDefinition 样式

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

于 2013-09-27T23:56:52.177 回答
0

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

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

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

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

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

动画时网格列更改宽度

在 WPF 中，有没有人为 Grid 设置动画？

于 2012-07-10T13:36:26.457 回答