GridSplitter禁用我的RowDefinition样式

Question

I have a Grid that contains three rows, and the third row visibility is bound to a boolean:

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="120"/>
        <RowDefinition Height="*" />
        <RowDefinition>
            <RowDefinition.Style>
                <Style TargetType="{x:Type RowDefinition}">
                    <Setter Property="Height"
              Value="0.35*" />
                    <Style.Triggers>
                       <DataTrigger Binding="{Binding ElementName=plotter2, Path=Visibility}" Value="Collapsed">
                            <Setter Property="Height"  Value="0" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </RowDefinition.Style>
        </RowDefinition>

I also have a GridSplitter :

 <GridSplitter
                ResizeDirection="Rows"
                ResizeBehavior="BasedOnAlignment"
                Grid.Column="0"
                Grid.ColumnSpan="2"
                Grid.Row="2"             
                Width="Auto"
                Height="6"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Top"
                Margin="0 20 0 0"
                Background="Transparent"/>

The purpose of this is that when I click a Checkbox the last row appears and occupy 35% of the second, but I can resize it with the GridSplitter . When the Checkbox is unchecked that row's visibility is Collapsed .

The problem is that if I use the GridSplitter the new height seems to overwrite the initial style definition and when I uncheck my Checkbox the last row remains visible.

I don't have any idea to some this, could anyone give me a hint? Thanks

Answer 1

If you use DependencyPropertyHelper.GetValueSource(Rowdefinition.HeightProperty) you can see that initially the property value is set by the style, but after the GridSplitter changes the height of the row the height property has a "local" value. Local values take precedence over all other sources for a dependency value, so when the data trigger attempts to set the height property to 0 nothing happens.

On top of this, the GridSplitter sets the height of the row above it and as soon as relative (star) values are involved the heights set look somewhat unfriendly.

Here is the way I found to work round this problem:

when hiding the row clear the value of the height property before attempting to set the height to 0

AND

when making the row visible clear the value of the height property of the upper row to reset the height to its initial value.

This second step caused me the biggest headache. The "unfriendly" height values set by the GridSplitter can be 181.7634545* for example. If you want to show the bottom row again and you give it a height of 0.35* it looks like it's not being made visible as it's only a couple of pixels high!

Unfortunately I haven't found a way to do this all in XAML. The solution relies on programmatically resetting the two affected rows heights at the appropriate moment.

In case the text isn't quite clear here's the code I used to test this:

MainWindow.cs.xaml:

<Window x:Class="GridRowHidingSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="120" />
        <RowDefinition Name="TopRow" />
        <RowDefinition Name="BottomRow">
            <RowDefinition.Style>
                <Style TargetType="{x:Type RowDefinition}">
                    <Setter Property="Height" Value="0.35*" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Path=IsRowVisible, Mode=OneWay}" Value="False">
                            <Setter Property="Height"  Value="0" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </RowDefinition.Style>
        </RowDefinition>
    </Grid.RowDefinitions>
    <Border Background="Yellow">
        <CheckBox Content="Show bottom row" HorizontalAlignment="Left" VerticalAlignment="Top" IsChecked="{Binding Path=IsRowVisible, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="10" />
    </Border>
    <Border Background="Red" Grid.Row="1">
    </Border>
    <Border Grid.Row="2" Background="Green">
    </Border>
    <GridSplitter Grid.Row="2" Height="10" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="DarkGray" Margin="0,20,0,0" />
</Grid>

MainWindow.cs:

using System.Windows;

namespace GridRowHidingSample
{
    public partial class MainWindow : Window
    {
        private MainWindowViewModel _viewModel;

        public MainWindow()
        {
            InitializeComponent();

            _viewModel = new MainWindowViewModel(TopRow, BottomRow);
            DataContext = _viewModel;
        }
    }
}

And finally the view model. The important bit is the method ResetHeight() and the Property IsRowVisible where the method is called.

MainWindowViewModel.cs:

using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;

namespace GridRowHidingSample
{
    public class MainWindowViewModel : INotifyPropertyChanged
    {
        private RowDefinition _topRow;
        private RowDefinition _bottomRow;
        private bool _isRowVisible = false;

        public MainWindowViewModel(RowDefinition topRow, RowDefinition bottomRow)
        {
            _topRow = topRow;
            _bottomRow = bottomRow;
        }

        private void ResetHeight(RowDefinition rowDefinition)
        {
            if (rowDefinition != null)
            {
                if (DependencyPropertyHelper.GetValueSource(rowDefinition, RowDefinition.HeightProperty).BaseValueSource == BaseValueSource.Local)
                rowDefinition.ClearValue(RowDefinition.HeightProperty);
            }
        }

        public bool IsRowVisible
        {
            get { return _isRowVisible; }
            set
            {
                if (_isRowVisible != value)
                {
                    _isRowVisible = value;
                    NotifyPropertyChanged("IsRowVisible");

                    if (_isRowVisible)
                        ResetHeight(_topRow);
                    else
                        ResetHeight(_bottomRow);
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void NotifyPropertyChanged(string propertyName)
        {
            var handler = PropertyChanged;
            if (handler != null)
                handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Hope this helps you, if you haven't already found another solution.