We Keep Coding

components does not scale properly

For my WPF project in C#, I have to create a menu state which should look like image below
So far, I have created
XAML Code for this window:
<UserControl x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="800">
<Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="125"/>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200*"/>
<ColumnDefinition Width="400*"/>
<ColumnDefinition Width="200*"/>
</Grid.ColumnDefinitions>
<!-- title -->
<Label Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Franklin Gothic Heavy">
<Viewbox>
<TextBlock>Title</TextBlock>
</Viewbox>
</Label>
<!-- menu -->
<Grid Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="15"/>
<RowDefinition Height="50"/>
<RowDefinition Height="15"/>
<RowDefinition Height="50"/>
<RowDefinition Height="15"/>
<RowDefinition Height="50"/>
<RowDefinition Height="15"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="2" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="4" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="6" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="8" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
</Grid>
</Grid>
</UserControl>
Problem with this window is this components (label and buttons with their contents) does not scale properly. What I want is, when I resize the window I want this components to be proportional to window. Not sure if the grid layout is problem, but how can I fix this components scale properly.
EDIT:
Ok, so I followed your instructions and I like the results (everything seems to scale good enough),
but I have two more minor problems:
1) With a new changes to XAML code, my last button is colliding with the south border of the window, which is not what I want. What I want is an empty space with size of almost exactly (if possible) or close space, like between Label "Title" and north border of the window.
I found solution by defining a new line at the end <RowDefinition Height="*"/>. Not sure if this is a correct way to go.
2) Thus, so far I understand that , 1, 2*,... multiplies the current size. However, it seems I still feel like I don't fully understand it. Currently, I am asking myself, how can I now change the size (width or height in some case) of the button components inside grid layout?
Finally, do I change properties for the size directly to button or via grid layout?
Here is the code for a new window.
<UserControl x:Class="TypeRacer_Client.state.MenuState"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="800">
<Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- title -->
<Label Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Franklin Gothic Heavy">
<Viewbox>
<TextBlock>Title</TextBlock>
</Viewbox>
</Label>
<!-- menu -->
<Grid Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="15"/>
<RowDefinition Height="*"/>
<RowDefinition Height="15"/>
<RowDefinition Height="*"/>
<RowDefinition Height="15"/>
<RowDefinition Height="*"/>
<RowDefinition Height="15"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="2" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="4" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="6" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="8" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
</Grid>
</Grid>
</UserControl>

Use star sizing (ratios) to size your grid's rows etc. Like , 2, 4* etc. This will make the rows and columns keep the same ratios, no matter what size the window is, like this:
<RowDefinition Height="*" />
<RowDefinition Height="2* /> //this will be 2x the previous row's height
Style the buttons for consistent width/height/other properties etc.
<Style TargetType="Button" x:Name="SomeButtonStyle">
<Setter Property="Width" Value="90" />
</Style>
then , for each button you want the same height/width/whatever property:
<Button Style="{StaticResource SomeButtonStyle}" />
This will keep you from putting a width, height or font etc. in EVERY button you made, and makes it much faster to change the value in one place, instead of every button.

ListView layouting

It looks simple, but it is unbelievable hard.
I want to have such layout:
It's ListView which should take a maximum height of buttons (number of visible buttons is dynamic).
I tried this
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
...
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel>
<Button/>
<Button/>
...
</StackPanel>
<ListView Grid.Column="1"/>
</Grid>
</Grid>
Problem: ListView has a very weird behavior to size self to content. If I add many items, then suddenly it takes all window space.
Question: how to limit ListView height to not exceed buttons total height (StackPanel height)?
P.S.: mvvm, so pure xaml is preferable.
P.S.S.: I have feeling it will be a binding of something to something. But of what to what?

You just need to data bind the ActualHeight of your StackPanel to the ListView.Height so that the ListView won't grow larger than the Button's StackPanel:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Name="ButtonPanel" Grid.Column="0">
<Button Content="Click" />
<Button Content="Click" />
<Button Content="Click" />
</StackPanel>
<ListView Grid.Column="1" ItemsSource="{Binding Tests}"
Height="{Binding ActualHeight, ElementName=ButtonPanel}" />
</Grid>
</Grid>

You can bind the MaxHeight property of your lower content grid to the ActualHeight of the buttons StackPanel. Futher more, you need to set the VerticalAlignment of the buttons panel to Bottom.
This way, you can add more parts in vertically, but still stick to the buttons panel height.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
...
<Grid Grid.Row="1"
MaxHeight="{Binding ElementName=ButtonPanel, Path=ActualHeight}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Name="ButtonPanel"
VerticalAlignment="Bottom">
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</StackPanel>
<ListView Grid.Column="1"/>
<!-- Multiple controls can be added here,
but the lower part will still stick
to the size of the buttons panel -->
</Grid>
</Grid>

Unwanted gap appears between GridSplitters

I want to prevent a gap from appearing in my wpf window without modifying the behavior of the remaining splitters. Please note that the longest vertical splitter is supposed to be able to slide to the left; I just don’t want the gap to appear when it is moved. A comment has been added to the GridSplitters that make up the undesired gap. How do I prevent the gap from appearing? My XAML code is listed below:
<Window x:Class="MyAdvancedGrid.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="480"
Width="600">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="250"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Row="0"
Grid.Column="2"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Grid.ColumnSpan="2"
Background="Black"
Height="5" /> <!-- A gap involves this splitter.-->
<GridSplitter Grid.Column="1"
HorizontalAlignment="Left"
Grid.RowSpan="2"
Background="Black"
VerticalAlignment="Stretch"
Width="5"/> <!-- A gap appears between this and the splitter above when this vertical splitter is moved to the left.-->
<GridSplitter Grid.Column="2"
Grid.Row="1"
Grid.ColumnSpan="1"
HorizontalAlignment="Right"
Grid.RowSpan="1"
Background="Black"
VerticalAlignment="Stretch"
Width="5"/>
</Grid>
</Window>

Its because your horizontal splitter is only spanning 2 columns.
If you want the horizontal splitter to span all 3 columns (left of the tall vertical splitter), then you should put it in Column 1, and make the ColumnSpan be 3.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="250"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Row="0"
Grid.Column="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Grid.ColumnSpan="3"
Background="Black"
Height="5" /> <!-- see changes above.-->
<GridSplitter Grid.Column="1"
HorizontalAlignment="Left"
Grid.RowSpan="2"
Background="Black"
VerticalAlignment="Stretch"
Width="5"/>
<GridSplitter Grid.Column="2"
Grid.Row="1"
Grid.ColumnSpan="1"
HorizontalAlignment="Right"
Grid.RowSpan="1"
Background="Black"
VerticalAlignment="Stretch"
Width="5"/>
</Grid>

XAML Property elements

For a project I am using XAML. I have devided my screen in different parts. The moment when I add a button, I get an error.
The error:
'property elements cannot be in the middle of an element's content'
The code I am using for the button where the error has been found:
<Button x:Name="cntButton" Content="Connect" Grid.Column="1" Grid.Row="2" Click="cntButton_Click" />
Does anyone know what the problem is and how I have to solve it?
The rest of the code:
<Window x:Class="Pesten.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Image Grid.RowSpan="4" Grid.ColumnSpan="3" Stretch="Fill" Source="pestenbg.jpg" VerticalAlignment="Top" HorizontalAlignment="Center"/>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="4*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Button x:Name="cntButton" Content="Connect" Grid.Column="1" Grid.Row="2" Click="cntButton_Click" />
</Grid>
</Window>

You've defined an image in the grid before the grid properties. Move this to after the row and column definitions.

You're adding Button control in the wrong place of parent control:
Property elements cannot be in the middle of an element's content
Property elements cannot be in the middle of an element's content. They must be before or after the content. This error is occurs when you attempt to use property-element syntax within an element's content.
Move Image after ColumnDefinitions and before Button
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="4*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Image Grid.RowSpan="4" Grid.ColumnSpan="3" Stretch="Fill" Source="pestenbg.jpg" VerticalAlignment="Top" HorizontalAlignment="Center"/>
<Button x:Name="cntButton" Content="Connect" Grid.Column="1" Grid.Row="2" Click="cntButton_Click" />
</Grid>
or move both Image and Button above column/row definition but you cannot split it

Put the column and row definitions directly after the opening tag. All content should follow that (i.e. the and the ).

Weird Gridsplitter resizing behaviour

Got his XAML :
<Window x:Class="correctionTests.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Menu Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" IsMainMenu="True">
<MenuItem Header="_Ouvrir" Click="Open_Click"/>
</Menu>
<GroupBox Header="Tests : " VerticalAlignment="Top" Grid.Column="0" Grid.Row="1">
<ListBox HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="testList"/>
</GroupBox>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1"
Grid.Row="1"
Width="5"
Background="#FFBCBCBC"/>
<UserControl x:Name="userContent" Grid.Column="2" Grid.Row="1"/>
</Grid>
</Window>
Now the problem is that the size of the controls on the column 0 is diminishing when i pull the gridsplitter to the RIGHT, on the other hand the size of the controls of the column 0 is increasing while pulling the gridsplitter to the left.
I already found this link on stack that suggested to change the first column's width to Auto.
The problem is : if i do that, the controls does not resize anymore.
How can i do so that my controls get all the width available ? (with the expected gridsplitter behaviour) ?

As your GridSplitter is on separate column, you have to
set ResizeBehavior="PreviousAndNext"