MAUI Tips - ポップアップの背景を透明にする

概要

これまでXamarin.Formsで作っていたアプリを、一念発起して.NET MAUIで作り直す中で
調べたことの備忘録。

環境

Visual Studio for MAC
.NET MAUI
.NET 7

起こった現象

Community Toolkitのポップアップを表示させた際に、
StackLayout等のBackgroundColorをTransparentにしても、
下図のように透明になりません・・・。

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit" 
               x:Class="TestApp.CommOverrayPopup"
               CanBeDismissedByTappingOutsideOfPopup="False"
               >

    <StackLayout Orientation="Vertical"
                 BackgroundColor="Transparent"
                 Margin="0">

        <ActivityIndicator x:Name="Indicator"
                           VerticalOptions="Center"
                           Color="White"
                           IsRunning="True">
        </ActivityIndicator>

        <Label Text="通信中…"
               HorizontalTextAlignment="Center"
               FontAttributes="Bold"
               FontSize="24"
               Margin="20,40"
               TextColor="White"/>

    </StackLayout>    
</toolkit:Popup>

解決策

StackOverflowに解決策の記載がありました。

toolkitの名前空間の宣言（xmlns）の後に、Color="Transparent"を記載します。

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit" Color="Transparent"
               x:Class="TestApp.CommOverrayPopup"
               CanBeDismissedByTappingOutsideOfPopup="False"
               >

そうすると、背景が透明で表示されます！