C# .Net-Maui Popup mit Runden Ecken

[heijck]

Hallo,

ich habe folgenden Code:

 public class MyPopup : CommunityToolkit.Maui.Views.Popup
 {
     public MyPopup()
     {
         Border border = new Border
         {
             Stroke = Color.FromArgb("#C49B33"),
             Background = Color.FromArgb("#2B0B98"),
             StrokeThickness = 10,
             Padding = new Thickness(16, 8),
             HorizontalOptions = LayoutOptions.Center,
             VerticalOptions = LayoutOptions.Center,
             StrokeShape = new RoundRectangle
             {
                 CornerRadius = new CornerRadius(40, 40, 40, 40)
             },
             Content = new Label
             {
                 Text = "Copied!",
                 TextColor = Colors.DimGrey,
                 FontSize = 23,
                 FontAttributes = FontAttributes.Bold
             }
         };

         Content = border;
     }

Erhofft hatte ich mir, so ein Popup bauen zu können was Rundeecken hat. Nun hat dieses aber so komische weiße Zipfelchen an den Ecken. So als wenn er das Popup zuerst in ein Viereck packen würde.

Wie kann ich diese Zipfelchen weg machen? Bzw. wie kann ich deren Farbe ändern?

 

[DoNG]

Der Hintergrund ist nicht transparent. Ohne MAUI zu kennen, würde ich vermuten, dass du den Hintergrund vom Pop-up setzen musst. Wenn kein Alpha-Kanal (RGB statt ARGB) verwendet wird, dann gibt es typischerweise Farben, die vom Renderer transparent dargestellt werden, zB Fuchsia. Wie Transparenz bei MAUI gehandhabt wird, kann dir sicher die Dokumentation oder Google sagen.

 

[andy_0]

MAUI unterstützt Alphakanal. Ich denke auch, dass du vermutlich den primären Background des Popups Transparent stellen musst.

Zum "Debugging" kannst du Backgrounds von Elementen so lange einfärben, bist du den richtigen Background gefunden hast, der oben in Screenshot weiß dargestellt wird.

 

[heijck]

Wie mache ich das?

Wenn ich ein "BackgroundColor = Colors.Transparent" hier hinzufüge

            Border border = new Border
            {
                BackgroundColor = Colors.Transparent, //neu
                Stroke = Color.FromArgb("#C49B33"),
                StrokeThickness = 10,

passiert nichts.

 

[andy_0]

Ja zum Beispiel. Wie ich vorher gesagt habe: nutze eine Farbe wie z.B. Rot. Dann schau mal was jetzt rot eingefärbt wird.

Ich bin mir sicher: es ist nicht dir weiße Fläche sondern die gelbe. Also färbe was anderes ein (z.B. grün).

Hinweis: Was liegt hierarchisch über der Border? Das Popup Element selber. Färbe dort mal den Background ein.

 

[heijck]

namespace Popup
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnCounterClicked(object sender, EventArgs e)
        {
            var popup = new MyPopup();
            this.ShowPopup(popup);
        }
    }

    public class MyPopup : CommunityToolkit.Maui.Views.Popup
    {
        public MyPopup()
        {
            Border border = new Border
            {
                BackgroundColor = Color.FromArgb("1f1f1f"),
                Stroke = Color.FromArgb("333333"),
                StrokeThickness = 2,
                // Padding = new Thickness(16, 8),
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center,
                StrokeShape = new RoundRectangle
                {
                    CornerRadius = 40
                },
                Content = new Frame
                {
                    Content = new Label
                    {
                        Text = "Popup!",
                        TextColor = Color.FromArgb("454545"),
                        FontSize = 23,
                        FontAttributes = FontAttributes.Bold
                    },
                    //CornerRadius = 40,
                    BackgroundColor = Colors.Red,
                    HasShadow = false
                    //Padding = 20
                }
            };
            Content = border;
        }
    }
}

So sieht aktuell der Code aus. Die Farbe von "BackgroundColor = Color.FromArgb("1f1f1f")" wird von "Content = new Frame" überschrieben. An diesen Ecken ändert sich leider nichts.

Deviniere ich eine BackgroundColor in OnCounterClicked dann wird der ganze Hintergrund ausserhalb des Popups entsprechend eingefärbt. Die Ecken bleiben...

 

[andy_0]

Du musst das Popup selber transparent setzen. Aktuell setzt du nur den ersten Inhalt auf eine Farbe.

Deine Struktur sieht so aus:

<Popup>
  <Border>
    <Frame>
        <Label>
        </Label>
    </Frame>
  </Border>
</Popup>

Das folgende Beispiel wird so in einem Projekt von mir genutzt. Es nutzt XAML um die View zu definieren:

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="myproject.Views.Input.ConfirmMessagePopupPage"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:inputs="clr-namespace:myprojectViews.Input">

    <toolkit:Popup.Resources>
        <Style TargetType="{x:Type inputs:ConfirmMessagePopupPage}">
            <Setter Property="Color" Value="Transparent" />
            <Setter Property="CanBeDismissedByTappingOutsideOfPopup" Value="True" />
        </Style>
    </toolkit:Popup.Resources>
  
    <Border>
        <!-- ... -->
    </Border>
<toolkit:Popup />

Wie du sehen kannst, setze ich das Popup selber auf Transparent. Erst weiter unten kommt dann der Inhalt - angefangen mit einer Border.

Zur Nutzung von Frame möchte ich noch sagen, dass es veraltet ist und du es am besten nicht mehr nutzen solltest (https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/frame?view=net-maui-8.0).