winui-3contentdialog

How to make content dialog background consistent?


I would like the background color of the dialog content and the background color behind the buttons to be the same:

content dialog

How can I do this?

My xaml:

<Page
    x:Class="WinUI3BlankAppVS2022.ContentDialogContent"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel
        VerticalAlignment="Stretch"
        HorizontalAlignment="Stretch">
        <TextBlock
            Text="Lorem ipsum dolor sit amet, adipisicing elit."
            TextWrapping="Wrap" />
    </StackPanel>
</Page>

My C#:

private async void ShowDialog_Click(object sender, RoutedEventArgs e)
{
    ContentDialog dialog = new ContentDialog();
    dialog.Title = "Save your work?";
    dialog.PrimaryButtonText = "Save";
    dialog.SecondaryButtonText = "Don't Save";
    dialog.CloseButtonText = "Cancel";
    dialog.DefaultButton = ContentDialogButton.Primary;
    dialog.XamlRoot = Content.XamlRoot;
    dialog.Content = new ContentDialogContent();
    var result = await dialog.ShowAsync();
}

Solution

  • I think the easiest way to solve this is to set the ContentDialogTopOverlay and ContentDialogSeparatorBorderBrush theme resources to null:

    private async void ShowDialog_Click(object sender, RoutedEventArgs e)
    {
        ContentDialog dialog = new ContentDialog();
        dialog.Title = "Save your work?";
        dialog.PrimaryButtonText = "Save";
        dialog.SecondaryButtonText = "Don't Save";
        dialog.CloseButtonText = "Cancel";
        dialog.DefaultButton = ContentDialogButton.Primary;
        dialog.XamlRoot = Content.XamlRoot;
        Application.Current.Resources["ContentDialogTopOverlay"] = null;
        Application.Current.Resources["ContentDialogSeparatorBorderBrush"] = null;
        dialog.Content = new ContentDialogContent();
        await dialog.ShowAsync();
    }
    

    The other option is to create a custom template for the ContentDialog.