GridSplitter是否会覆盖ColumnDefinition的样式触发器？

Question

我遇到了一个奇怪的问题...
看起来使用GridSplitter调整Grid的列会禁用（或者以其他方式失效）在Grid的列上定义的触发器。

这是我的设置：

一个Grid有3个列，定义如下：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition>
        <ColumnDefinition.Style>
            <Style>
                <Setter Property="ColumnDefinition.Width" Value="Auto"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=OpenItemViewModels.Count}" Value="0">
                        <Setter Property="ColumnDefinition.Width" Value="0"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ColumnDefinition.Style>
    </ColumnDefinition>
    <ColumnDefinition>
        <ColumnDefinition.Style>
            <Style>
                <Setter Property="ColumnDefinition.Width" Value="4*"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=OpenItemViewModels.Count}" Value="0">
                        <Setter Property="ColumnDefinition.Width" Value="0"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ColumnDefinition.Style>
    </ColumnDefinition>
</Grid.ColumnDefinitions>

期望的是，当第三列中没有任何项构成控件的ItemsSource时，第二列和第三列（分别用于容纳GridSplitter和辅助项控件）将被赋为0宽度。

只要我不触摸拆分器（当辅助控件中的所有选项卡都关闭时，只有第一列保持可见），这个方法就很好用。如果我移动拆分器，从而有效地改变了列0和2之间的比例，则会出现问题。在这种情况下，当右侧控件中的所有项关闭时，这些列的宽度不会重置。

我怀疑这与GridSplitter在XAML中“覆盖”我的定义有关。请问有谁能够证实或反驳这个理论，并提出如何解决这个问题的建议？

- Alex

Answer 1

我曾经遇到过行定义的同样问题。无论我们在样式或设置中提供什么，Gridsplitter都会覆盖它。可以使用动画来解决此问题（因为动画在依赖属性值分辨率中具有最高优先级）。对于第三列也要这样做。

<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition>
    <ColumnDefinition.Style>
        <Style>
            <Setter Property="ColumnDefinition.Width" Value="Auto" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=OpenItemViewModels.Count}" Value="0">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard Name="BeginStoryboard1">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width">
                                    <ObjectAnimationUsingKeyFrames.KeyFrames>
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                                Value="{x:Static GridLength.Auto}" />
                                    </ObjectAnimationUsingKeyFrames.KeyFrames>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <RemoveStoryboard BeginStoryboardName="BeginStoryboard1" />
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ColumnDefinition.Style>
</ColumnDefinition>

- Socrates

---

惊人的解决方案。我曾经为解决类似的问题苦苦挣扎了两天，但是使用这个解决方案，只需要一个小时就可以通过行来适应我的xaml。非常感谢！ - XMight

Answer 2

我设计了一个辅助类来解决可折叠的列/行与GridSplitter一起调整大小的问题。

public class CollapsibleRowDefinition : RowDefinition
{
    public static readonly DependencyProperty IsCollapsedProperty = DependencyProperty.Register(
        "IsCollapsed",
        typeof(bool),
        typeof(CollapsibleRowDefinition),
        new FrameworkPropertyMetadata(
            false,
            (s,e) => { ((CollapsibleRowDefinition) s).IsCollapsed = (bool)e.NewValue; }));

    private bool isCollapsed = false;

    public CollapsibleRowDefinition()
    {
        DependencyPropertyDescriptor.FromProperty(RowDefinition.HeightProperty, typeof(RowDefinition)).AddValueChanged(this,
            (sender, args) =>
            {
                if (!this.IsCollapsed)
                {
                    this.ExpandedHeight = this.Height;
                }
            });
    }

    public GridLength CollapsedHeight { get; set; }
    public GridLength ExpandedHeight { get; set; }

    public bool IsCollapsed
    {
        get { return this.isCollapsed; }
        set
        {
            if (this.isCollapsed != value)
            {
                this.isCollapsed = value;
                this.Height = value ? this.CollapsedHeight : this.ExpandedHeight;
            }
        }
    }
}

标记语言的格式如下：

这里是标记内容

。

        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="5"/>
            <c:CollapsibleRowDefinition CollapsedHeight="20" ExpandedHeight="*" IsCollapsed="{Binding ElementName=Btn_BottomCollapse, Path=IsChecked}"/>
        </Grid.RowDefinitions>
        <GridSplitter Grid.Row="2" HorizontalAlignment="Stretch"
                      IsEnabled="{Binding ElementName=Btn_BottomCollapse, Path=IsChecked}"/>

- Ghostrider

---

优秀的解决方案... 对我很有效。这是我的版本，包括ColumnDefinition的实现。请注意，我反转了布尔逻辑（使用IsExpanded而不是IsCollapsed）。https://gist.github.com/brinko99/5e7121740b7042604ad47d98750e2961 - Terrence

Answer 3

我曾经遇到同样的问题...

我唯一能够想出来的东西是这样的：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" x:Name="theColumn"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <Expander Grid.Column="0" x:Name="theExpander" Expander.Collapsed="theExpander_Collapsed">
        ...
    </Expander>
    <GridSplitter Grid.Column="0" HorizontalAlignment="Right" Width="5">
        <GridSplitter.Style>
            <Style TargetType="{x:Type GridSplitter}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=theExpander, Path=IsExpanded}" Value="False">
                        <Setter Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </GridSplitter.Style>
    </GridSplitter>
    <Grid Grid.Column="1">
        ...    
    </Grid>
</Grid>

代码如下：

    private void theExpander_Collapsed(object sender, RoutedEventArgs e)
    {
        theColumn.Width = GridLength.Auto;
    }

这不是我偏爱的方式，但尝试在列定义上使用样式触发器就是行不通。

- Rino Farina

Answer 4

我采用了Terrence的解决方案（Ghostriders answer中的评论），并修复了一个小问题，即默认值有时未正确应用。

源代码可以在此处找到：https://gist.github.com/medarion/5ff6d04be5630748e8bf92006d0b4472

使用方法不变：

<Grid.ColumnDefinitions>
    <controls:CollapsibleColumnDefinition 
        CollapsedWidth="0" ExpandedWidth="500" IsExpanded="{Binding HeaderVisible}"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

- martin