Expander's content doesn't resize with grid column.

[ms-somanna]

I'm trying to build a application that has two expanders one on the left-side and other on the right-side and grid in between them both. The expanders must be able to resize themselves correspondingly automatically resizing the grid in between them. I've used the code below to try and achieve the results but what's happening is the the expander's content doesn't resize when I drag the grid splitter but the column containing the expander is resized. But if I use the same code in a non-HandyControls application it works as expected.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Expander x:Name="ProjectsExpander" Header="Projects" IsExpanded="True" ExpandDirection="Right">
        <TextBlock>...</TextBlock>
    </Expander>

    <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" />

    <Grid Grid.Column="2" Background="Yellow">
        <TextBlock>...</TextBlock>
    </Grid>

    <GridSplitter Grid.Column="3" HorizontalAlignment="Stretch" />

    <Expander Grid.Column="4" Header="Properties" ExpandDirection="Left" HorizontalAlignment="Right" Width="235">
        <TextBlock>...</TextBlock>
    </Expander>
</Grid>

Also note, the grid inside the expander's content appears as a thin vertical green line as shown in image below which is unexpected.