CODEWITHSUNDEEP
xamlpopupmauiwinui
Jochi
Jochi

Reputation: 23

MAUI 8 - How to change Popup background overlay color?

With MAUI 7.0 next code allows to change Popup background overlay color, but that code doesn't work on MAUI 8.0

<maui:MauiWinUIApplication
    x:Class="TestMaui8.WinUI.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:maui="using:Microsoft.Maui"
    xmlns:local="using:TestMaui8.WinUI">
    <maui:MauiWinUIApplication.Resources>
        <Color x:Key="SystemAltMediumColor">Transparent</Color>
        <SolidColorBrush x:Key="SystemControlPageBackgroundMediumAltMediumBrush" Color="{StaticResource SystemAltMediumColor}" />
        <SolidColorBrush x:Key="ContentDialogBackgroundThemeBrush" Color="{StaticResource SystemAltMediumColor}" />
        <SolidColorBrush x:Key="ContentDialogDimmingThemeBrush" Color="{StaticResource SystemAltMediumColor}" />
        <StaticResource x:Key="ContentDialogBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
        <StaticResource x:Key="PopupLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />

        <SolidColorBrush x:Key="SliderBorderBrush" Color="#1A73E8" />
        <Style TargetType="Slider">
            <Setter Property="BorderBrush" Value="{StaticResource SliderBorderBrush}"/>
        </Style>
    </maui:MauiWinUIApplication.Resources>
</maui:MauiWinUIApplication>

Does anybody know why it didn't work and how to fix it?

Updated to add some images

enter image description here

enter image description here

Upvotes: 0

Views: 951

Answers (1)

Liqun Shen-MSFT
Liqun Shen-MSFT

Reputation: 8220

Update

You may see the source code here : CommunityToolkit Popup. The overlay color has been set to a fixed color. So there should be no direct way to change it even using the code you post.

Again we commend you raise a feature request for changing the overlay color on CommunityToolkit GitHub Page.

The workaround I post below does not work for a 'Transparent' color.

CommunityToolkit Popup does not have Overlay color feature. You could raise a feature request for it on CommunityToolkit GitHub Page.

Yes, the above code you post used to work but it doesn't work for .NET8 with the newest CommunityToolkit.Maui nuget.

But if you want to change the overlay color, here is a workaround.

Set the Color of the Popup to the color you want. And make the ContentView in it to be full screen size.

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             ...
             Color="Black"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             >
    //make the size to be the full screen size
    <ContentView WidthRequest="1920" HeightRequest="1080">
        <VerticalStackLayout WidthRequest="300" HeightRequest="300" BackgroundColor="Green">
            <Image Source="dotnet_bot.png"/>
            <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
        </VerticalStackLayout>
    </ContentView>
</toolkit:Popup>

Upvotes: 0

Related Questions