带圆角的内容对话框 [UWP Win10 Build 1904*]答案

【问题标题】：Content Dialog with rounded corner [UWP Win10 Build 1904*]带圆角的内容对话框 [UWP Win10 Build 1904*]
【发布时间】：2021-09-20 03:31:54
【问题描述】：

我有一个 UWP 应用。出于某种原因，我必须在内容对话框中显示一些内容。我想为内容对话框设置一个角半径值。但是添加圆角半径值，所有角落都有一个额外的阴影。如何解决？

我的内容对话框：

<ContentDialog
    x:Class="SampleApp.SampleDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SampleApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="TITLE"
    PrimaryButtonText="Button1"
    SecondaryButtonText="Button2"
    PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
    SecondaryButtonClick="ContentDialog_SecondaryButtonClick"
    CornerRadius="50">

    <Grid>
    </Grid>
</ContentDialog>

Output of Content Dialog

【问题讨论】：

标签： uwp dialog uwp-xaml

【解决方案1】：

The official document 提到“ThemeShadow 在应用于弹出窗口中的任何 XAML 元素时会自动投射阴影。它将在其后面的应用程序背景内容及其下方的任何其他打开的弹出窗口上投下阴影。”因此，一种解决方法是使用 Translation 属性的 z 组件将元素从其后面的其他元素中提升，如下所示。

另外，这是一个有趣的问题，我们已经向团队报告了这个问题。

private async void Button_Click(object sender, RoutedEventArgs e)
    {
       
        SampleDialog dialog = new SampleDialog();
        dialog.Translation += new Vector3(0, 0, -100);
        await dialog.ShowAsync();
    }

此外，您似乎正在使用自定义 ContentDialog。如果您想添加默认的 ContentDialog，可以找到更多信息 here。

【讨论】：

【解决方案2】：

尝试将此 Setter 添加到 ContentDialog 的 Style 代码中，这会修改投影属性：

<Style TargetType="ContentDialog">
    <Setter Property="IsDefaultShadowEnabled" Value="False" />
</Style>

另外我不建议使用超过 8 像素的 CornerRadius，因为它与 guidelines 相悖，看起来很不合适，但无论如何。

【讨论】：