我希望有一个可以通过按下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,自动调整大小就会停止。有谁知道如何解决这个问题?
答案 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问题中所述 -
答案 1 :(得分:0)
听起来你遇到了与这个问题相同的问题:
GridSplitter disables my RowDefinition style
由于akjoshi已经解释了GridSplitter更改行的高度属性(列的宽度属性)。如果在使用GridSplitter调整行或列的大小后检查高度或宽度属性的值源,您将看到它已设置为“本地”。 “本地”值会覆盖样式,模板或触发器设置的任何值。清除“高度”或“宽度”属性允许再次使用触发器和/或样式设置“高度”或“宽度”属性。