Unable to Hide SfBottomSheet

[killer-frog]

Description

I have added a bottom sheet to all my pages and have been able to Show by Binding IsOpen to a property on my ViewModel.

            <BottomSheet:SfBottomSheet x:Name="BottomSheet" 
                                       GrabberBackground="{StaticResource Orange}"
                                       IsOpen="{Binding Source={RelativeSource AncestorType={x:Type local:BasePageModel}}, Path=ShowToast}"
                                       State="{Binding Source={RelativeSource AncestorType={x:Type local:BasePageModel}}, Converter={StaticResource BottomSheetStateConverter} ,Path=ShowToast}"
                                       CollapsedHeight="145" Background="{DynamicResource BackgroundOffset}"
                                       CornerRadius="10, 10, 0, 0" ContentPadding="16,16,16,0">

                <BottomSheet:SfBottomSheet.BottomSheetContent>
<Label. Text="Hello" />
                </BottomSheet:SfBottomSheet.BottomSheetContent>

When the property is set to True the sheet appears.
When set to false the content from the sheet is hidden but the sheet is still visible.

I have tried setting the state to "Hidden" with the following converter

        public override BottomSheetState Convert(bool value, Type targetType, object parameter, CultureInfo culture)
        {
            var state =  value ? BottomSheetState.Collapsed : BottomSheetState.Hidden;
            
            Debug.WriteLine($"*** BottomSheetState: {state}");
            
            return state;
        }

but that does noting.

Steps to Reproduce

Add Content page, as described above.

The layout of the page, including the bottom sheet is specified in a control template so that all pages are the same. Setting IsOpen to True works fine. The issue is setting it to false to hide it.

Version with bug

1.0.2

Is this a regression from previous behavior?

Not sure, haven't tested other versions

Last Known Working Version

1.0.2

Affected platforms

iOS

Affected Platform Versions

iOS 18.1

Have you found a workaround?

I have worked Rond this by always having IsOpen true and setting IsVisible via the binding instead

Relevant log output

[naveenkumar-sanjeevirayan]

Hi @killer-frog

We have reviewed your query regarding the bottom sheet not fully hiding when setting IsOpen to false. However, we were unable to replicate the issue based on the provided description.

To further investigate, could you please share a minimal reproducible sample or a more complete implementation of your code snippet? This will help us analyze the issue more effectively.

Based on your description, you are trying to show and hide the bottom sheet via the ViewModel. We recommend using the following approach, with this we can enhance the implementation to meet your needs.

//BasePageModel.cs  
 
public class BasePageModel : INotifyPropertyChanged
{
   private bool _isBottomSheetVisible;
 
   public bool IsBottomSheetVisible
   {
       get => _isBottomSheetVisible;
       set
       {
           if (_isBottomSheetVisible != value)
           {
               _isBottomSheetVisible = value;
                OnPropertyChanged(nameof(IsBottomSheetVisible));
           }
       }
   }
 
   public Command ShowBottomSheetCommand { get; }
   public Command HideBottomSheetCommand { get; }
 
   public BasePageModel()
   {
       ShowBottomSheetCommand = new Command(ShowBottomSheet);
       HideBottomSheetCommand = new Command(HideBottomSheet);
   }
 
   public void ShowBottomSheet()
   {
       IsBottomSheetVisible = true;
   }
 
   public void HideBottomSheet()
   {
       IsBottomSheetVisible = false;
   }
 
   public event PropertyChangedEventHandler PropertyChanged;
 
   protected virtual void OnPropertyChanged(string propertyName)
   {
       PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
   }
}

//BottomSheetPage.xaml.cs
public partial class BottomSheetPage : ContentPage
{
   public BottomSheetPage()
   {
       InitializeComponent();
   }
private void OpenBottomSheet(object sender, EventArgs e)
   {
       viewModel.ShowBottomSheet();
   }
private void CloseBottomSheet(object sender, EventArgs e)
   {
       viewModel.HideBottomSheet();
   }
}

//BottomSheetPage.xaml
 
<Grid>
   <StackLayout Spacing="10">
       <Button Command="{Binding ShowBottomSheetCommand}" Text="Open Sheet" />
       <Button Command="{Binding HideBottomSheetCommand}" Text="Close Sheet" />
   </StackLayout>
 
   <bottomSheet:SfBottomSheet 
       x:Name="bottomSheet" 
       IsOpen="{Binding IsBottomSheetVisible, Mode=TwoWay}"
       CollapsedHeight="145"
       CornerRadius="10,10,0,0"
        ContentPadding="16,16,16,0">
      
        <bottomSheet:SfBottomSheet.BottomSheetContent>
           <Label Text="Bottom Sheet Content" />
        </bottomSheet:SfBottomSheet.BottomSheetContent>
   </bottomSheet:SfBottomSheet>
</Grid>

Please review this approach and let us know if you need further refinements.

Thanks,

[killer-frog]

thanks, Mode=TwoWay seems to have resolved it Cheers Ash As always you can keep up to date with everything about our app at budgetplnr.com Thanks Ash Support | Budget Planner App ***@***.*** budgetplnr.com [image: twitter] <https://budgetplnr/> <https://www.hubspot.com/email-signature-generator?utm_source=create-signature>

…

On Thu, Feb 20, 2025 at 1:14 PM Naveenkumar S ***@***.***> wrote: Hi @killer-frog <https://github.com/killer-frog> We have reviewed your query regarding the bottom sheet not fully hiding when setting IsOpen to false. However, we were unable to replicate the issue based on the provided description. To further investigate, could you please share a minimal reproducible sample or a more complete implementation of your code snippet? This will help us analyze the issue more effectively. Based on your description, you are trying to show and hide the bottom sheet via the ViewModel. We recommend using the following approach, with this we can enhance the implementation to meet your needs. //BasePageModel.cs public class BasePageModel : INotifyPropertyChanged { private bool _isBottomSheetVisible; public bool IsBottomSheetVisible { get => _isBottomSheetVisible; set { if (_isBottomSheetVisible != value) { _isBottomSheetVisible = value; OnPropertyChanged(nameof(IsBottomSheetVisible)); } } } public Command ShowBottomSheetCommand { get; } public Command HideBottomSheetCommand { get; } public BasePageModel() { ShowBottomSheetCommand = new Command(ShowBottomSheet); HideBottomSheetCommand = new Command(HideBottomSheet); } public void ShowBottomSheet() { IsBottomSheetVisible = true; } public void HideBottomSheet() { IsBottomSheetVisible = false; } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } //BottomSheetPage.xaml.cs public partial class BottomSheetPage : ContentPage { public BottomSheetPage() { InitializeComponent(); } private void OpenBottomSheet(object sender, EventArgs e) { viewModel.ShowBottomSheet(); } private void CloseBottomSheet(object sender, EventArgs e) { viewModel.HideBottomSheet(); } } //BottomSheetPage.xaml <Grid> <StackLayout Spacing="10"> <Button Command="{Binding ShowBottomSheetCommand}" Text="Open Sheet" /> <Button Command="{Binding HideBottomSheetCommand}" Text="Close Sheet" /> </StackLayout> <bottomSheet:SfBottomSheet x:Name="bottomSheet" IsOpen="{Binding IsBottomSheetVisible, Mode=TwoWay}" CollapsedHeight="145" CornerRadius="10,10,0,0" ContentPadding="16,16,16,0"> <bottomSheet:SfBottomSheet.BottomSheetContent> <Label Text="Bottom Sheet Content" /> </bottomSheet:SfBottomSheet.BottomSheetContent> </bottomSheet:SfBottomSheet> </Grid> Please review this approach and let us know if you need further refinements. Thanks, — Reply to this email directly, view it on GitHub <#84 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD4UYZWWPJGGPHMENBNLVRD2QXIMNAVCNFSM6AAAAABXGYRSRKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZRGQ3DEOJRGY> . You are receiving this because you were mentioned.Message ID: ***@***.***> [image: naveenkumar-sanjeevirayan]*naveenkumar-sanjeevirayan* left a comment (syncfusion/maui-toolkit#84) <#84 (comment)> Hi @killer-frog <https://github.com/killer-frog> We have reviewed your query regarding the bottom sheet not fully hiding when setting IsOpen to false. However, we were unable to replicate the issue based on the provided description. To further investigate, could you please share a minimal reproducible sample or a more complete implementation of your code snippet? This will help us analyze the issue more effectively. Based on your description, you are trying to show and hide the bottom sheet via the ViewModel. We recommend using the following approach, with this we can enhance the implementation to meet your needs. //BasePageModel.cs public class BasePageModel : INotifyPropertyChanged { private bool _isBottomSheetVisible; public bool IsBottomSheetVisible { get => _isBottomSheetVisible; set { if (_isBottomSheetVisible != value) { _isBottomSheetVisible = value; OnPropertyChanged(nameof(IsBottomSheetVisible)); } } } public Command ShowBottomSheetCommand { get; } public Command HideBottomSheetCommand { get; } public BasePageModel() { ShowBottomSheetCommand = new Command(ShowBottomSheet); HideBottomSheetCommand = new Command(HideBottomSheet); } public void ShowBottomSheet() { IsBottomSheetVisible = true; } public void HideBottomSheet() { IsBottomSheetVisible = false; } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } //BottomSheetPage.xaml.cs public partial class BottomSheetPage : ContentPage { public BottomSheetPage() { InitializeComponent(); } private void OpenBottomSheet(object sender, EventArgs e) { viewModel.ShowBottomSheet(); } private void CloseBottomSheet(object sender, EventArgs e) { viewModel.HideBottomSheet(); } } //BottomSheetPage.xaml <Grid> <StackLayout Spacing="10"> <Button Command="{Binding ShowBottomSheetCommand}" Text="Open Sheet" /> <Button Command="{Binding HideBottomSheetCommand}" Text="Close Sheet" /> </StackLayout> <bottomSheet:SfBottomSheet x:Name="bottomSheet" IsOpen="{Binding IsBottomSheetVisible, Mode=TwoWay}" CollapsedHeight="145" CornerRadius="10,10,0,0" ContentPadding="16,16,16,0"> <bottomSheet:SfBottomSheet.BottomSheetContent> <Label Text="Bottom Sheet Content" /> </bottomSheet:SfBottomSheet.BottomSheetContent> </bottomSheet:SfBottomSheet> </Grid> Please review this approach and let us know if you need further refinements. Thanks, — Reply to this email directly, view it on GitHub <#84 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD4UYZWWPJGGPHMENBNLVRD2QXIMNAVCNFSM6AAAAABXGYRSRKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZRGQ3DEOJRGY> . You are receiving this because you were mentioned.Message ID: ***@***.***>