Q:

Using GridSplitter as an expander, am I doing this right? 

I'm trying to create a a 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?  

A:

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"/>

