Net Mauı Bottom Sheet ( Popup ) Problem How t fix it ?

Question

ClosePopupSheetButton_Tapped event is not working I can close the page and also In content Page of content when I create button s event inside of control:PopupSheet are not working, when I change the place of button like in contentpage they are working but in control:PopupSheet not.. How to fix ?

xaml.....

<?xml version="1.0" encoding="utf-8" ?> <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AppMaui.Controls.PopupSheet" xmlns:pv="clr-namespace:AppMaui.Views.PartialViews" InputTransparent="True" VerticalOptions="Fill" HorizontalOptions="Fill" x:Name="PopupSheetRoot"> <ContentView.Resources> <!-- Grid Styles --> <Style TargetType="Grid"> <Setter Property="Padding" Value="0" /> <Setter Property="Margin" Value="0" /> <Setter Property="RowSpacing" Value="0" /> <Setter Property="ColumnSpacing" Value="0" /> <Setter Property="VerticalOptions" Value="Fill" /> <Setter Property="HorizontalOptions" Value="Fill" /> </Style> </ContentView.Resources>

<ContentView.Content>

    <Grid
        x:Name="BackgroundFader"
        BackgroundColor="#B0000000"
        IsVisible="false"
        Opacity="0"
        IgnoreSafeArea="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition x:Name="PopupSheetRowDefinition" Height="{Binding Source={x:Reference PopupSheetRoot}, Path=SheetHeight, Mode=OneWay}" />
        </Grid.RowDefinitions>

        <Grid >
            Grid.GestureRecognizers>
                <TapGestureRecognizer Tapped="ClosePopupSheetButton_Tapped" />
            </Grid.GestureRecognizers>

        </Grid>

        <!-- Enclosing Border Control for Content -->
        <Border
            x:Name="MainContent" 
            Grid.Row="1"
            Padding="0,5,0,0"
            Margin="0,0,0,-40"
            VerticalOptions="Fill"
            HorizontalOptions="Fill"
            StrokeThickness="0"
            TranslationY="{Binding Source={x:Reference PopupSheetRoot}, Path=SheetHeight, Mode=OneWay}">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="10,10,0,0"/>
            </Border.StrokeShape>
            <Border.Background>
                <LinearGradientBrush EndPoint="1,0">
                    <GradientStop Color="{StaticResource Home}"
                      Offset="0.1" />
                    <GradientStop Color="Orange"
                        Offset="0.5" />
                    <GradientStop Color="{StaticResource Fashion}"
                      Offset="1.0" />
                </LinearGradientBrush>
            </Border.Background>
            <Frame HasShadow="False" BackgroundColor="{DynamicResource BorderColor}" CornerRadius="10" Padding="0,5,0,0">
            <Frame  HasShadow="False" CornerRadius="10" Padding="0"  BackgroundColor="{DynamicResource BackColor}">
                    <Grid RowDefinitions="Auto,*">
                     <Border>                
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="2,2,0,0"/>
                </Border.StrokeShape> 
            </Border>
                    <!-- Header Content -->
                    <Label
                    x:Name="HeaderLabel"
                    Style="{Binding Source={x:Reference PopupSheetRoot}, Path=HeaderStyle, Mode=OneWay}"
                    Text="{Binding Source={x:Reference PopupSheetRoot}, Path=HeaderText, Mode=OneWay}"                
                    Grid.Row="0"
                        Margin="0,40,0,0"
                    HorizontalOptions="Center"
                    VerticalOptions="Start"
                    VerticalTextAlignment="Center" />

                    <!-- Main Content -->
                    <Grid x:Name="PopupSheetContentGrid" Grid.Row="1" />

                </Grid>
            </Frame>
            </Frame>
        </Border>

 
    </Grid>
</ContentView.Content>

</ContentView>

C#.....

public partial class PopupSheet: ContentView {

private const uint shortDuration = 150u;
private const uint regularDuration = shortDuration * 2u;
public IList<IView> PopupSheetContent => PopupSheetContentGrid.Children;

#region Bindable Properties

public static readonly BindableProperty SheetHeightProperty = BindableProperty.Create(
    nameof(SheetHeight),
    typeof(double),
    typeof(PopupSheet),
    360d,
    BindingMode.OneWay,
    validateValue: (_, value) => value != null);

public double SheetHeight
{
    get => (double)GetValue(DrawerHeightProperty);
    set => SetValue(DrawerHeightProperty, value);
}

public static readonly BindableProperty HeaderTextProperty = BindableProperty.Create(
    nameof(HeaderText),
    typeof(string),
    typeof(PopupSheet),
    string.Empty,
    BindingMode.OneWay,
    validateValue: (_, value) => value != null);

public string HeaderText
{
    get => (string)GetValue(HeaderTextProperty);
    set => SetValue(HeaderTextProperty, value);
}

public static readonly BindableProperty PopupNameProperty = BindableProperty.Create(
nameof(PopupName),
typeof(string),
typeof(PopupSheet),
string.Empty,
BindingMode.OneWay,
validateValue: (_, value) => value != null);

public string PopupName
{
    get => (string)GetValue(PopupNameProperty);
    set => SetValue(PopupNameProperty, value);
}

public static readonly BindableProperty HeaderStyleProperty = BindableProperty.Create(
    nameof(HeaderStyle),
    typeof(Style),
    typeof(PopupSheet),
    new Style(typeof(Label))
    {
        Setters =
        {
            new Setter
            {
                Property = Label.FontSizeProperty,
                Value = 15
            }
        }
    },       
    BindingMode.OneWay,
    validateValue: (_, value) => value != null);

public Style HeaderStyle
{
    get => (Style)GetValue(HeaderStyleProperty);
    set => SetValue(HeaderStyleProperty, value);
}



#endregion
public PopupSheet()
{

   
    InitializeComponent();

}
public async Task OpenPopupSheet()
{
    this.InputTransparent = false;
    BackgroundFader.IsVisible = true;

    _ = BackgroundFader.FadeTo(1, regularDuration, Easing.SinInOut);
    await MainContent.TranslateTo(0, 0, regularDuration, Easing.SinInOut);

}

public async Task ClosePopupSheet()
{
         _ = MainContent.TranslateTo(0, DrawerHeight, shortDuration, Easing.SinInOut);
    await BackgroundFader.FadeTo(0, shortDuration, Easing.SinInOut);


    BackgroundFader.IsVisible = false;
    this.InputTransparent = true;
}

private async void ClosePopupSheetButton_Tapped(Object sender, EventArgs e) {
    await ClosePopupSheet();
}

}

contentpage.....

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="AppMaui.Views.AccountViews.Settings"
         xmlns:control="clr-namespace:AppMaui.Controls"
         xmlns:local="clr-namespace:AppMaui"
         xmlns:pv="clr-namespace:AppMaui.Views.PartialViews"
         xmlns:icon="clr-namespace:AppMaui.Resources.FontIcons"
         xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls"
         android:Application.WindowSoftInputModeAdjust="Unspecified"
         Shell.NavBarIsVisible="False">

<control:PopupSheet x:Name="popupTheme" HeaderText="change theme" SheetHeight="400">

        <c:PopupSheet.PopupSheetContent>
            <Grid 
              Margin="20,0"
              RowDefinitions="40,50"
              ColumnDefinitions="*,*"
              ColumnSpacing="10" RowSpacing="5">
                <Button Grid.Row="1"
                BorderColor="{DynamicResource BorderColor}"
                BorderWidth="2"
                BackgroundColor="{StaticResource LightBack}"             
                CornerRadius="3"
                Text="LightTheme"
                TextColor="{StaticResource Dark}" 
                Clicked="LightTheme_Clicked"/>
                <Button Grid.Row="1"
                BorderColor="{DynamicResource BorderColor}"
                BorderWidth="2"
                Grid.Column="1"
                BackgroundColor="{StaticResource DarkBack}"                    
                CornerRadius="3"
                Text="DarkTheme"
                TextColor="{StaticResource White}"
                Clicked="DarkTheme_Clicked"/>
            </Grid>
        </control:PopupSheet.PopupSheet Content>
    </control:PopupSheet >

</Grid>

Answer 1

Hello,

As you Sami said, you can solve the problem after removing InputTransparent="True" on main contentview.

Thanks for your sharing.

Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

I found the problem and fixed it We have to remove InputTransparent="True" on main contentview Thanks..