Object distortion in WPF when switching to different monitor screen size

Question

I am new to WPF, my question is :

I have an application in which there is a circle object which carries some information and I would like to drag and drop it. My problem is when i run it on my computer it works fine, but when I change the screen size circle object shape get distorted and become ellipse.

I am using grids with 5 rows and column with equal ratio(*).

Is it something when screen size changes its inch(physical size) length != breadth.

Please give your expert advice.

(Edit1 : Tried in Canvas, in canvas circle looks like circle irrespective of any screen but wondering how this is implemented in grid !)

`

  <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="257*" />
        <RowDefinition Height="121*" />
        <RowDefinition Height="442*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="520*" />
        <ColumnDefinition Width="121*" />
        <ColumnDefinition Width="865*" />
    </Grid.ColumnDefinitions>
    <Ellipse Name="ellipse2" Stroke="Black" Grid.Row="1" Grid.Column="1" />   </Grid>

`

I know I am doing wrong as when resolution changes ratio changes which gives different physical units for different screen. Please suggest the better way using grids.

(Edit2 : According to ben solution here below is the result comparison, in my case example 3 i wuld prefer, but had to take care abt that stroke somehow!!)

http://i.stack.imgur.com/1QpRR.jpg

Answer 1

Well, i'm not really sure of what you're trying to do, so here are several solutions. They all use Grid since you specifically asked for it. However, I'm not convinced that it's really appropriate.

Your problem is that the Ellipse size is determined by the Grid, and there is no constraint to force the aspect ratio. So the aspect not only changes when the screen resolution is different, it also changes when you resize the window.

Solution 1 : set Width and Height of the Ellipse

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="257*" />
        <RowDefinition Height="121*" />
        <RowDefinition Height="442*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="520*" />
        <ColumnDefinition Width="121*" />
        <ColumnDefinition Width="865*" />
    </Grid.ColumnDefinitions>
    <Ellipse Stroke="Black" Grid.Row="1" Grid.Column="1" Width="20" Height="20" />
</Grid>

Solution 2 : set the Width and Height in the Grid

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="257*" />
        <RowDefinition Height="20" />
        <RowDefinition Height="442*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="520*" />
        <ColumnDefinition Width="20" />
        <ColumnDefinition Width="865*" />
    </Grid.ColumnDefinitions>
    <Ellipse Stroke="Black" Grid.Row="1" Grid.Column="1" />
</Grid>

Solution 3 : use a ViewBox

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="257*" />
        <RowDefinition Height="121*" />
        <RowDefinition Height="442*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="520*" />
        <ColumnDefinition Width="121*" />
        <ColumnDefinition Width="865*" />
    </Grid.ColumnDefinitions>
    <Viewbox Grid.Row="1" Grid.Column="1">
        <Ellipse Stroke="Black" Width="20" Height="20" />
    </Viewbox>
</Grid>

Solution 4 : bind ellipse Width and Height together

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="257*" />
        <RowDefinition Height="121*" />
        <RowDefinition Height="442*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="520*" />
        <ColumnDefinition Width="121*" />
        <ColumnDefinition Width="865*" />
    </Grid.ColumnDefinitions>
    <Ellipse x:Name="ellipse" Stroke="Black" Grid.Row="1" Grid.Column="1" 
             Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}" />
</Grid>

Differences

Solution 1 and 2, both give a constant size to the circle, whatever the Grid size is.

Solution 3 and 4, both resize the circle depending on Grid size.

Solution 3 will also change the thickness of the stroke, whereas solution 4 wont.

EDIT: Fixed solution 4

Answer 2

Another way to zoom up circle without distortion is apart from viewbox: '

<Grid.RowDefinitions>
    <RowDefinition Height="257*" />
    <RowDefinition Height="121*" />
    <RowDefinition Height="442*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="520*" />
    <ColumnDefinition Width="121*" />
    <ColumnDefinition Width="865*" />
</Grid.ColumnDefinitions>
    <Ellipse Stroke="Black" Grid.Row="1" Grid.Column="1" Stretch="Uniform"  />

'

Unlike Viewbox which place circle in the middle of the grid, this Stretch = "Uniform" stretches the circle and place it left of the grid. But shape remain same for all screens. Its basic, I dont knw how I forget this.