How to get controls resizable correspondingly to screen resolution?

Question

Just faced with a following issue: I've tried to resize my simpliest WPF app and noticed that controls are not responsive at all.

Note: I've tried symbiosis of various controls like Grid , WievBox , Canvas etc., to no avail.

here is XAML code, to be exact controls which I need to get resizable (responsive) correspondingly different resolutions (aspect ratios).

<Window x:Class="WpfApplication6.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication6"
    mc:Ignorable="d"
    Title="MainWindow" Height="768" Width="1024" MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920" WindowStartupLocation="CenterScreen" >
<Grid>
    <Ellipse HorizontalAlignment="Left" Height="100" Margin="576,278,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
    <Rectangle HorizontalAlignment="Left" Height="100" Margin="559,518,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
    <Label x:Name="label" Content="Label"  FontStretch="Normal" FontSize="24" HorizontalAlignment="Left" Margin="595,230,0,0" VerticalAlignment="Top" Height="43" Width="64"/>
    <Button x:Name="button" Content="Button"  FontSize="24" HorizontalAlignment="Left" Margin="720,427,0,0" VerticalAlignment="Top" Width="83" Height="38"/>


</Grid>

PS Such writers as Nathan and McDonald in their books are broadcasting that WPF that's you need for adaptive and responsive application making. However, I'm in doubts after couple of days of looking for solution. I think WPF not much went ahead in contrast with Windows Form at least in terms of adaptation and responsiveness of applications. So could someone help me in that matter. Thanks in advance!

Answer 1

Don't use Margin to position controls, use your grid properties like ColumnDefinition and RowDefinition with things values like Auto and *

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*" />
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>

Nice little tutorial

Answer 2

Use RowDefinition and ColumnDefiniton for your Grid control instead of using Margin to place your controls. Also replace the Height and Width properties for the Ellipse and Rectangle with Stretch .

<Window x:Class="WpfApplication6.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication6"
    mc:Ignorable="d"
    Title="MainWindow" Height="768" Width="1024" MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920" WindowStartupLocation="CenterScreen" >

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Ellipse Grid.Row="0"
             Stretch="Fill"
             Stroke="Black" />
    <Rectangle Grid.Row="1"
               Stretch="Fill"
               Stroke="Black" />
    <Label Grid.Row="2"
           x:Name="label"
           Content="Label"
           FontStretch="Normal"
           FontSize="24" />
    <Button Grid.Row="3"
            x:Name="button"
            Content="Button"
            FontSize="24" />
 </Grid>
</Window>

Answer 3

Thanks guys, of course, however it's not a solution. See screens below.

As you can see , all important to me controls "swam" to left.