切换到不同的显示器屏幕大小时 WPF 中的对象失真

Question

我是WPF的新手，我的问题是：

我有一个应用程序，其中有一个圆形对象，它携带一些信息，我想拖放它。我的问题是当我在计算机上运行它时，它工作正常，但是当我更改屏幕尺寸时，圆形对象形状会扭曲并变成椭圆形。

我正在使用 5 行的网格和比率相等的列 （*）。

屏幕尺寸改变其英寸（物理尺寸）长度！=宽度时是不是有什么东西。

请提供您的专家建议。

（编辑1：在画布中尝试过，在画布圆圈中看起来像圆圈，无论任何屏幕如何，但想知道如何在网格中实现！

'

  <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>

'

我知道我做错了，因为当分辨率变化比率发生变化时，为不同的屏幕提供了不同的物理单位。请建议使用网格的更好方法。

（编辑2：根据下面的本解决方案是结果比较，在我的案例示例3中，我更喜欢，但不得不以某种方式小心该笔画！！

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

Answer 1

另一种在不失真的情况下放大圆圈的方法是除了视框：'

<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"  />

'

与将圆圈放在网格中间的 Viewbox 不同，此拉伸 = "均匀"拉伸圆并将其放置在网格的左侧。但所有屏幕的形状保持不变。它的基本，我不知道我怎么忘记了这一点。

Answer 2

好吧，我不太确定您要做什么，因此这里有几种解决方案。他们都使用Grid因为你特别要求它。但是，我不相信它真的合适。

您的问题是Ellipse大小由Grid决定，并且没有强制纵横比的限制。因此，不仅在屏幕分辨率不同时外观会发生变化，而且在调整窗口大小时也会发生变化。

解决方案1：设置椭圆的宽度和高度

<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>

解决方案2：在网格中设置宽度和高度

<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>

解决方案3：使用视图框

<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>

解决方案4：将椭圆宽度和高度绑定在一起

<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>

差异

解决方案 1 和 2 都为圆提供了恒定的大小，无论Grid大小如何。

解决方案 3 和 4 都根据Grid大小调整圆的大小。

解决方案

3 也会改变笔触的粗细，而解决方案 4 不会。

编辑：修复解决方案4