如何自定义UWP应用Toast内容并解决元素对齐问题？

一、UWP Toast 是否支持原生图标？ #

UWP Toast 没有专门的原生图标控件，你用图标图片替代是完全可行的，这也是现在实现这类需求的常用办法。

二、解决同行元素未对齐的问题 #

你已经用AdaptiveGroup+AdaptiveSubgroup实现了同行布局，未对齐的问题可以通过这几个关键调整解决：

1. 给子组分配宽度权重 #

给每个AdaptiveSubgroup加上HintWeight属性，设置合理的宽度比例，避免空间分配混乱。比如左侧图片占小比例，右侧文本+图标占大比例：

new AdaptiveSubgroup()
{
    HintWeight = 1, // 左侧子组占1份宽度
    Children = { ... }
},
new AdaptiveSubgroup()
{
    HintWeight = 4, // 右侧子组占4份宽度
    Children = { ... }
}

2. 设置垂直对齐属性 #

给AdaptiveSubgroup添加HintVerticalAlignment，让子组内的元素垂直居中，同时给内部的文本和图片也设置对齐方式：

// 左侧子组垂直居中
new AdaptiveSubgroup()
{
    HintWeight = 1,
    HintVerticalAlignment = AdaptiveSubgroupVerticalAlignment.Center,
    Children =
    {
        new AdaptiveImage()
        {
            Source = "Image1.png",
            HintAlign = AdaptiveImageAlign.Center,
            HintRemoveMargin = true,
            HintCrop = AdaptiveImageCrop.Circle // 如果是圆形图标可以加这个属性
        }
    }
},
// 右侧子组垂直居中
new AdaptiveSubgroup()
{
    HintWeight = 4,
    HintVerticalAlignment = AdaptiveSubgroupVerticalAlignment.Center,
    Children =
    {
        new AdaptiveText()
        {
            Text = "Hello world",
            HintStyle = AdaptiveTextStyle.Body,
            HintAlign = AdaptiveTextAlign.Center // 也可以根据需求设为Left
        },
        new AdaptiveImage()
        {
            Source = "Image2.png",
            HintAlign = AdaptiveImageAlign.Center,
            HintRemoveMargin = true
        }
    }
}

3. 统一图片尺寸（可选） #

如果两张图片大小不一样，也会导致对齐偏移，可以给AdaptiveImage设置固定的最大宽高：

new AdaptiveImage()
{
    Source = "Image1.png",
    HintAlign = AdaptiveImageAlign.Center,
    HintRemoveMargin = true,
    HintMaxHeight = 24,
    HintMaxWidth = 24
}

修正后的完整代码 #

ToastContent toastContent = new ToastContent();

toastContent.Visual = new ToastVisual()
{
    BindingGeneric = new ToastBindingGeneric()
    {
        Children =
        {
            new AdaptiveGroup()
            {
                Children =
                {
                    new AdaptiveSubgroup()
                    {
                        HintWeight = 1,
                        HintVerticalAlignment = AdaptiveSubgroupVerticalAlignment.Center,
                        Children =
                        {
                            new AdaptiveImage()
                            {
                                Source = "Image1.png",
                                HintAlign = AdaptiveImageAlign.Center,
                                HintRemoveMargin = true,
                                HintMaxHeight = 24,
                                HintMaxWidth = 24
                            },
                        },
                    },
                    new AdaptiveSubgroup()
                    {
                        HintWeight = 4,
                        HintVerticalAlignment = AdaptiveSubgroupVerticalAlignment.Center,
                        Children =
                        {
                            new AdaptiveText()
                            {
                                Text = "Hello world",
                                HintStyle = AdaptiveTextStyle.Body,
                                HintAlign = AdaptiveTextAlign.Center
                            },
                            new AdaptiveImage()
                            {
                                Source = "Image2.png",
                                HintAlign = AdaptiveImageAlign.Center,
                                HintRemoveMargin = true,
                                HintMaxHeight = 24,
                                HintMaxWidth = 24
                            },
                        },
                    },
                },
            },
        },
    },
};

ToastNotification toast = new ToastNotification(toastContent.GetXml());
ToastNotificationManager.CreateToastNotifier().Show(toast);

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