使用GridSplitter作为扩展器，我这样做对吗？

Question

I'm trying to create aa screen with hidden Journal screen on right hand side. I would like it to expand when clicked and hide when clicked again. Also would like it to be able to slide it left and right so user can see both screens if want to. Also would like to call the function to expand right screen from outside of the View. Ok, so this what I have done so far:

on the XAML side:

<Grid x:Name="grdWorkArea" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" Name="MainWindow"/>
                <ColumnDefinition Width="8" />
                <ColumnDefinition Width="0" Name="JournalWindow"/>
            </Grid.ColumnDefinitions>

            <ContentControl Name="ContentMain" Content="{Binding Path=CurrentViewModel}"/>
            <Rectangle Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Fill="LightGray"/>
            <GridSplitter PreviewMouseDown="GridSplitter_PreviewMouseDown" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch">
                <GridSplitter.Style>
                    <Style TargetType="{x:Type GridSplitter}">
                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush Stretch="None" ImageSource="/Views;component/Images/ToggleWorkflow.png"/>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GridSplitter.Style>
            </GridSplitter>
            <ContentControl Grid.Column="2" Name="ContentJournal" Content="{Binding Path=CurrentViewModel}"/>
        </Grid>

on the View back end code:

bool journalExpanded;
journalExpanded = false;

private void GridSplitter_PreviewMouseDown(object sender, MouseButtonEventArgs e)
    {
        if(journalExpanded)
        {
            MainWindow.Width = new GridLength(1, GridUnitType.Star); 
            JournalWindow.Width = new GridLength(0);
            journalExpanded = false;
        }
        else
        {
            MainWindow.Width = new GridLength(0);
            JournalWindow.Width = new GridLength(1, GridUnitType.Star);
            journalExpanded = true;
        }
    }

So this works fantastic I can move splitter manually or click splitter and Left screen expands or hides. But I need to be able to call GridSplitter_PreviewMouseDown from outside of this View. Basically on the top of the screen I have a TopBar which contains button btnJournal. When I click it I would like Journal to expand. So I decided to move this function to MainWindowViewModel and bind columns width to properties:

on the XAML side:

<Grid x:Name="grdWorkArea" HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{Binding Path=MainWindowWidth}" Name="MainWindow"/>
                <ColumnDefinition Width="8" />
                <ColumnDefinition Width="{Binding Path=JournalWindowWidth}" Name="JournalWindow"/>
            </Grid.ColumnDefinitions>

            <ContentControl Grid.Column="0" Name="ContentMain" Content="{Binding Path=CurrentViewModel}"/>

            <Rectangle Grid.Column="1" VerticalAlignment="Stretch" Fill="LightGray"/>
            <GridSplitter PreviewMouseUp="clickJournalExpand"  Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch">
                <GridSplitter.Style>
                    <Style TargetType="{x:Type GridSplitter}">
                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush Stretch="None" ImageSource="/Views;component/Images/ToggleWorkflow.png"/>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GridSplitter.Style>
            </GridSplitter>

            <ContentControl Name="JournalMain" Content="{Binding Path=JournalVM}" Grid.Column="2" VerticalAlignment="Stretch"  />  
        </Grid>

And on the View back end code:

private void clickJournalExpand(object sender, MouseButtonEventArgs e)
    {
        var vm = (MainWindowViewModel)this.DataContext;
        vm.clkJournalExpand.Execute(null);
    }

In the MainWindowViewModel:

private string _MainWindowWidth = "*";
private string _JournalWindowWidth = "0";

public ICommand clkJournalExpand
    {
        get
        {
            return clickJournalExpand ?? (clickJournalExpand = new RelayCommand(() => ObeyclickJournalExpand()));
        }
    }

private void ObeyclickJournalExpand()
    {
        if (JournalExpanded)
        {

            MainWindowWidth = "*";
            JournalWindowWidth = "0";
            //JournalExpanded = false;
        }
        else
        {
            MainWindowWidth = "0";
            JournalWindowWidth = "*";
            //journalExpanded = true;
        }
        JournalExpanded = !JournalExpanded;
    }

So this works ok when I click spliiter. When I move splitter it stops working and it not react to clicks as well. The event fires but the Left screen doesn't expand. When I restart program it works again until I move splitter.

I'm very new to Wpf and Xaml and probably doing this completely wrong. Could some one give me direction what I'm doing wrong here?

Answer 1

I think your main problem might be the binding (I say might, because the first solution did not work perfectly for me neither, so I guessed what you are trying to achieve. Also this made my solution a bit different from yours). While your binding works at first, moving the grid slider overwrites the width values and so you're losing the binding. You can try this with a TextBlock and TextBox binding to a string an inside a button set TextBlock's value to something specific. After this, the binding will be lost.

To get this to work you would have multiple possibilities. One would be to create a GridSplitter which works on the ViewModel.

Another approach could be setting the Width as in your first solution and subscribe to an event of that ViewModel:

public partial class MainWindow : Window
{
    private double? _oldColumnJournalWindowWidth;

    // it is expanded when Width > 0
    public bool JournalExpanded
    {
        get { return ColumnJournalWindow.Width.Value > 0; }
    }

    public MainWindow()
    {
        InitializeComponent();
        var viewModel = new MainWindowViewModel();
        // Subscribe to event
        viewModel.JournalExpandedChanged += ViewModel_JournalExpandedChanged;
        DataContext = viewModel;
    }

    // When expanded set to either 100-0 or 50-50
    private void ViewModel_JournalExpandedChanged(object sender, EventArgs e)
    {
        ColumnMainWindow.Width = new GridLength(1, GridUnitType.Star);
        ColumnJournalWindow.Width = JournalExpanded ? new GridLength(0) : new GridLength(1, GridUnitType.Star);
    }

    // Handle expanding by click on splitter 
    private void GridSplitter_PreviewMouseUp(object sender, MouseButtonEventArgs e)
    {
        if (_oldColumnJournalWindowWidth == null)
            return;
        // if splitter was moved do not change expand
        if (Math.Abs((double)_oldColumnJournalWindowWidth - ColumnJournalWindow.Width.Value) > 1)
            return;
        _oldColumnJournalWindowWidth = null;
        ViewModel_JournalExpandedChanged(sender, e);
    }

    // Only on left button
    private void GridSplitter_PreviewMouseDown(object sender, MouseButtonEventArgs e)
    {
        if (e.LeftButton != MouseButtonState.Pressed)
            return;
        _oldColumnJournalWindowWidth = ColumnJournalWindow.Width.Value;
    }
}

internal class MainWindowViewModel : INotifyPropertyChanged
{
    private ICommand _journalExpandCommand;

    public ICommand JournalExpandCommand
    {
        get
        {
            return _journalExpandCommand ?? (_journalExpandCommand = new RelayCommand(OnJournalExpandedChanged));
        }
    }

    // Event to trigger JournalExpanded should change
    public event EventHandler JournalExpandedChanged;

    protected virtual void OnJournalExpandedChanged()
    {
        if (JournalExpandedChanged != null)
            JournalExpandedChanged(this, EventArgs.Empty);
    }


    // ...
}

The corresponding XAML:

<Grid x:Name="grdWorkArea" HorizontalAlignment="Stretch">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" Name="ColumnMainWindow"/>
        <ColumnDefinition Width="8" />
        <ColumnDefinition Width="*" Name="ColumnJournalWindow"/>
    </Grid.ColumnDefinitions>

    <Rectangle Grid.Column="0" Name="ContentMain"  Fill="#FFBD4444" Grid.Row="1"/>

    <Rectangle Grid.Column="1" Grid.Row="1" VerticalAlignment="Stretch" Fill="LightGray" />
    <GridSplitter PreviewMouseUp="GridSplitter_PreviewMouseUp" PreviewMouseDown="GridSplitter_PreviewMouseDown"  Grid.Column="1" Grid.Row="1" HorizontalAlignment="Stretch">
        <GridSplitter.Style>
            <Style TargetType="{x:Type GridSplitter}">
                <Setter Property="Background">
                    <Setter.Value>
                        <ImageBrush Stretch="None" ImageSource="image.png"/>
                    </Setter.Value>
                </Setter>
            </Style>
        </GridSplitter.Style>
    </GridSplitter>

    <Rectangle Name="JournalMain"  Grid.Column="2" VerticalAlignment="Stretch" Fill="#FF5E912A" Grid.Row="1"  />
    <Button Grid.Row="0" Grid.ColumnSpan="3" x:Name="button" Content="Expand" Command="{Binding JournalExpandCommand}"  Height="20"/>
</Grid>

You could also subscribe to PropertyChanged or you could implement an interface (which is known by the ViewModel) and change the expand method directly.

Hope I got your intention right and this helps you.

Answer 2

Most likely cause of such behavior is the way the GridSplitter works. If I'm not mistaken, once you move the splitter, it sets Width values for corresponding columns (or Height for rows). The key part of that is that it uses DependencyObject 's SetValue method, and not SetCurrentValue . The problem with the former is that it behaves differently depending on the mode of the binding set on the corresponding property - if that mode supports target-to-source direction ( TwoWay and OneWayToSource modes), it updates the source, otherwise ( OneWay and OneTime modes) it overwrites the property value source and sets it to local, effectively "breaking" the binding.

Now since you don't explicitly specify the binding mode, the default is used (which is OneWay for ColumnDefinition.Width property). Hence it "breaks" once you move the splitter.

In order to get it to work as expected it should be sufficient to explicitly set the binding modes to TwoWay :

<ColumnDefinition Width="{Binding Path=MainWindowWidth, Mode=TwoWay}"
                  Name="MainWindow"/>
<ColumnDefinition Width="8" />
<ColumnDefinition Width="{Binding Path=JournalWindowWidth, Mode=TwoWay}"
                  Name="JournalWindow"/>