Can we use multi xaml layout on a window?

Question

I think that we can use multi layout on a windows with XAML. So I try to create a window like this: I want to create an ListView in left and it can be resized. The Grid and Textbox at the left side will be fit to the right grid. I have tried to use other layouts, StackPanel, DockPanel. How can I create a resizable grid

    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <ToolBar Name="toolBar" Grid.Row="0">
        <Button Name="btnLoad" Width="Auto" Height="25" ToolTip= Click="btnLoad_Click" VerticalAlignment="Bottom">
            <StackPanel Orientation="Horizontal">
                <Image Source="Resources/reload.png" Width="16" Height="16" HorizontalAlignment="Left" Margin="0 0 5 0"/>
                <TextBlock>Load/Reload</TextBlock>
            </StackPanel>
        </Button>
        <Button Name="btnSave" Width="Auto" Height="25"  Click="btnSave_Click">
            <StackPanel Orientation="Horizontal">
                <Image Source="Resources/save.png" Width="16" Height="16" HorizontalAlignment="Left" Margin="0 0 5 0"/>
                <TextBlock>Save</TextBlock>
            </StackPanel>
        </Button>
    </ToolBar>
    <ComboBox Name="cbTypeOfShop" Grid.Row="1" Margin="5 5 5 5"/>
    <Grid Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ListView Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
        <GridSplitter Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="Black" ShowsPreview="true" Width="5"/>
        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="2">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <DataGrid Name="dtgListItem" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

            </DataGrid>
            <TextBox Grid.Row="1" Height="100" TextWrapping="Wrap" AcceptsReturn="True" Text="1231231231 22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222221231231231231231123123123123123123123123123123123123123123123123123" />
        </Grid>
    </Grid>
    <StatusBar Grid.Row="3" Height="25" HorizontalAlignment="Stretch">
        <TextBlock Name="abc">abc</TextBlock>
    </StatusBar>
</Grid>

But when I resize the left side.

Answer 1

try this

    <Grid>
           <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="5" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
            <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
            <TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
</Grid>

As you can see, I've simply created a Grid with two equally wide columns, with a 5 pixel column in the middle.