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

时间:2012-07-03 11:35:12

标签: c# wpf xaml togglebutton gridsplitter

我希望有一个可以通过按下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,自动调整大小就会停止。有谁知道如何解决这个问题?

2 个答案:

答案 0 :(得分:0)

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

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?

答案 1 :(得分:0)

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

GridSplitter disables my RowDefinition style

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