如何在UWP Windows 10 Mobile应用中对齐元素？椭圆错位问题求解

你的XAML布局代码如下：

<Page
x:Class="Clock_Mobile.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Clock_Mobile"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="Schnaubelt">

<Grid>
    <Ellipse UseLayoutRounding="True" HorizontalAlignment="Center" Height="20" VerticalAlignment="Center" Width="20" Fill="#FFEBEBEB"/>
    <Ellipse UseLayoutRounding="True" HorizontalAlignment="Center" Height="16" VerticalAlignment="Center" Width="16" Fill="#FFFF9900"/>
    <Ellipse UseLayoutRounding="True" HorizontalAlignment="Center" Height="8" VerticalAlignment="Center" Width="8" Fill="Black"/>
</Grid>
</Page>

即使窗口宽高为偶数，三个椭圆仍未实现精准居中对齐，可通过以下方法解决：

方法一：调整布局与像素对齐设置 #

• 移除所有UseLayoutRounding="True"属性：该属性会强制元素对齐到像素边界，当元素尺寸为偶数时，居中布局可能因系统计算的半像素偏移导致错位。移除后布局系统会基于设备独立像素（DIP）进行更精准的居中计算。
• 改用Canvas作为容器：将三个椭圆放入Canvas中，通过设置Canvas的HorizontalAlignment="Center"和VerticalAlignment="Center"确保容器居中，同时椭圆无需额外设置对齐属性，直接基于Canvas中心定位，避免多层布局的计算误差。修改后的代码示例：

<Canvas HorizontalAlignment="Center" VerticalAlignment="Center">
    <Ellipse Height="20" Width="20" Fill="#FFEBEBEB"/>
    <Ellipse Height="16" Width="16" Fill="#FFFF9900"/>
    <Ellipse Height="8" Width="8" Fill="Black"/>
</Canvas>

方法二：使用Win2D绘制（类似Java Graphics2D的图形API） #

Windows 10 Mobile支持Win2D库，它提供了类似Graphics2D的底层图形绘制能力，能完全控制图形的位置和精度，适合绘制时钟这类需要精准对齐的图形：

1. 安装Win2D.uwp NuGet包到项目中。
2. 在XAML中添加CanvasControl控件（需先引入Win2D的命名空间xmlns:controls="using:Microsoft.Graphics.Canvas.UI.Xaml"）：

<Page
x:Class="Clock_Mobile.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Clock_Mobile"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Microsoft.Graphics.Canvas.UI.Xaml"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="Schnaubelt">

<controls:CanvasControl x:Name="ClockCanvas" Draw="ClockCanvas_Draw"/>
</Page>

3. 在代码后台实现绘制逻辑：

using Microsoft.Graphics.Canvas;
using Microsoft.Graphics.Canvas.UI.Xaml;
using Windows.UI;
using System.Numerics;

namespace Clock_Mobile
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void ClockCanvas_Draw(CanvasControl sender, CanvasDrawEventArgs args)
        {
            var center = new Vector2((float)sender.ActualWidth / 2, (float)sender.ActualHeight / 2);
            // 绘制最外层椭圆（半径为10，对应原20px宽度）
            args.DrawingSession.FillEllipse(center, 10, 10, Color.FromArgb(255, 235, 235, 235));
            // 绘制中间层椭圆（半径为8，对应原16px宽度）
            args.DrawingSession.FillEllipse(center, 8, 8, Color.FromArgb(255, 255, 153, 0));
            // 绘制中心椭圆（半径为4，对应原8px宽度）
            args.DrawingSession.FillEllipse(center, 4, 4, Colors.Black);
        }
    }
}

这种方式直接基于画布中心计算位置，完全避免XAML布局系统的对齐误差，精度更高。

内容的提问来源于stack exchange，提问作者Auras