Keep Grid center and minimize/maximize on stretching in a WPF Grid - wpf

Question

<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button
VerticalContentAlignment="Stretch"
Margin="0,0,100,0"
Grid.RowSpan="3"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Height="80" Width="30"
Background="blue">
<!--<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>[![enter image description here][1]][1]
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button
x:Name="Add"
Width="25"
Height="25"
Grid.Row="2"
Margin="3,1,3,0"
Padding="0"/>
</Grid>-->
</Button>
<Grid
Margin="0,0,0,100"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"
VerticalAlignment="Bottom"
HorizontalAlignment="Center"
Width="50" Height="25"
Background="Red">
<Button
x:Name="Add1"
Width="20"
Height="20"
Margin="3,1,3,0"
Padding="0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
VerticalContentAlignment="Center"/>
<Button
x:Name="Remove1"
Width="20"
Height="20"
HorizontalAlignment="Right"
VerticalAlignment="Top"
VerticalContentAlignment="Center"/>
</Grid>
<Grid
Grid.Row="0"
Grid.Column="1"
Grid.RowSpan="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="100"
Height="50"
Background="Green">
<!--<Button
x:Name="Add2"
Width="20"
Height="20"
Margin="3,1,3,0"
Padding="0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
VerticalContentAlignment="Center"/>
<Button
x:Name="Remove2"
Width="20"
Height="20"
Margin="3,1,3,0"
Padding="0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
VerticalContentAlignment="Center" />-->
</Grid>
<!--Element #-->
<Grid Margin="0,0,0,100"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"
VerticalAlignment="Bottom"
HorizontalAlignment="Center"
Width="100" Height="25"
Background="Red">
<!--<Button
Name="myButton"
IsEnabled="False"
Background="#C0C0C0"
BorderThickness="2"
Width="25"
Height="25"/>-->
</Grid>
</Grid>
Is there any possibility to keep all the elements center and stretched to the right when maximize? Every container from Grid can have 3 or 4 children's. Children's can be any container as long as all elements are stretching to right and down but maintained center position.
I attached also the result. All elements are centered but the stretching is missing.
What kind of container is suitable for this situations?

Answer 1

Yes, as o_w mentioned in the comment, a good solution is to use Border. Where you use your child Grids, encapsulate them in a Border and set the Background-property on the Border instead of the Grid. You will see that you will achieve way faster what you want.
The problem you describe is actually something I also struggled with in the beginning, and that's when I found that not only Grid, but the combination of Grid and Borders (with a Grid encapsulated in it) is even more powerful than Grid alone.