Toggle button and vertical grid splitter is not working simultaneously

Question

This is my sample code ,Please help me to achieve both goals simultaneouslyImage On click toggle button collapse and visible column and vertical split button.

In the below fig. First add toggle button and First column contain two column . It contains second sub column is collapse or disable based on toggle button click. and Spltter is working on outside two main column please help me as soon as possible

<Window.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Window.Resources>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="5"/>
        <ColumnDefinition  />
    </Grid.ColumnDefinitions>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40" />
            <ColumnDefinition Width="300"/>                
        </Grid.ColumnDefinitions>
        <Border Background="Green"
                Grid.Column="0">
            <Grid Grid.Column="1"
                  Visibility="{Binding IsChecked, ElementName=toggleButton, Converter={StaticResource BooleanToVisibilityConverter}}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition  Width="300" />
                </Grid.ColumnDefinitions>

                <WrapPanel Grid.Column="1"
                           Background="Aqua" />
            </Grid>
        </Border>
        <ToggleButton x:Name="toggleButton"
                      Width="30"
                      Height="30"
                      Margin="0,10,10,0"
                      IsChecked="True"
                      HorizontalAlignment="Left"
                      VerticalAlignment="Top" />
    </Grid>

    <GridSplitter Width="5"
                  Grid.Column="1"
                  ResizeBehavior="CurrentAndNext" />
    <Grid Grid.Column="2"></Grid>

</Grid>

Answer 1

From reading your question, I believe this is what you are trying to achieve. Please let me know if I didn't understand you properly.

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="5" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Border
                Grid.Column="0"
                Background="Green">
                <ToggleButton x:Name="toggleButton"
                    Width="30"
                    Height="30"
                    Margin="0,10,10,0"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    IsChecked="True" />
            </Border>
            <Grid
                Grid.Column="1"
                MaxWidth="300"
                Visibility="{Binding ElementName=toggleButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
                <WrapPanel Background="Aqua">
                    <TextBlock
                        Margin="8"
                        Text="Item 01" />
                    <TextBlock
                        Margin="8"
                        Text="Item 02" />
                    <TextBlock
                        Margin="8"
                        Text="Item 03" />
                    <TextBlock
                        Margin="8"
                        Text="Item 04" />
                    <TextBlock
                        Margin="8"
                        Text="Item 05" />
                </WrapPanel>
            </Grid>
            <GridSplitter
                Grid.Column="1"
                Width="5"
                Visibility="{Binding ElementName=toggleButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}" />
            <Grid Grid.Column="3">
                <TextBlock
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Text="Column 2" />
            </Grid>
        </Grid>