如何在底部工作表内的按钮点击事件中关闭底部工作表?

huangapple go评论92阅读模式
英文:

How do I dismiss the bottom sheet from a button click event inside the bottom sheet?

问题

我在我的项目中使用了这个控件:
<https://github.com/the49ltd/The49.Maui.BottomSheet>

我在我的主页上创建了一个底部表,当我点击底部表之外时,它可以被关闭,但是似乎在底部表内部点击按钮后无法关闭。

这是显示底部表的我的代码:

```c#
private async void OnClicked(System.Object sender, System.EventArgs e)
{
    try
    {
        sheet.HasHandle = true;
        sheet.IsCancelable = true;
                
        await sheet.ShowAsync(Window);
    }
    catch (Exception ex)
    {
        await App.Current.MainPage.DisplayAlert("错误!", ex.Message, "好的!");
    }
}

这是我的 XAML 代码:

<btm:BottomSheet xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleProject.CustomViews.TicketListBottomSheet"
             xmlns:btm="https://schemas.the49.com/dotnet/2023/maui"
             Padding="16,32"
             Background="{AppThemeBinding Light={StaticResource White},Dark={StaticResource Gray500}}"
             >
    <Grid Margin="0,2,0,5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Grid.Column="0" Text="取消" FontAttributes="Bold" FontFamily="Bold"  WidthRequest="150" TextColor="#1414A0" BackgroundColor="#E5E5FF" CornerRadius="20"  HorizontalOptions="FillAndExpand"
                Clicked="Cancel_Clicked" />
        <Button Grid.Column="1" Text="应用" FontAttributes="Bold"  FontFamily="Bold" WidthRequest="150" Style="{StaticResource PrimaryButtonStyle}" HorizontalOptions="FillAndExpand"
                Clicked="Apply_Clicked"/>
    </Grid>
</btm:BottomSheet>

我希望在控件内部点击“取消”按钮后,底部表能够自动关闭。


<details>
<summary>英文:</summary>

I used this control in my project:
&lt;https://github.com/the49ltd/The49.Maui.BottomSheet&gt;

I have created a bottom sheet on my homepage, it can be dismissed when I tapped outside the bottom sheet, but it seems cannot be dismissed once I click a button inside of the bottom sheet.

This is my code to display the bottom sheet:

```c#
private async void OnClicked(System.Object sender, System.EventArgs e)
{
    try
    {
        sheet.HasHandle = true;
        sheet.IsCancelable = true;
                
        await sheet.ShowAsync(Window);
    }
    catch (Exception ex)
    {
        await App.Current.MainPage.DisplayAlert(&quot;Error!&quot;, ex.Message, &quot;OK!&quot;);
    }
}

This is my XAML code:

&lt;btm:BottomSheet xmlns=&quot;http://schemas.microsoft.com/dotnet/2021/maui&quot;
             xmlns:x=&quot;http://schemas.microsoft.com/winfx/2009/xaml&quot;
             x:Class=&quot;SampleProject.CustomViews.TicketListBottomSheet&quot;
             xmlns:btm = &quot;https://schemas.the49.com/dotnet/2023/maui&quot;
             Padding=&quot;16,32&quot;
             Background=&quot;{AppThemeBinding Light={StaticResource White},Dark={StaticResource Gray500}}&quot;
             &gt;
    &lt;Grid Margin=&quot;0,2,0,5&quot;&gt;
        &lt;Grid.ColumnDefinitions&gt;
            &lt;ColumnDefinition Width=&quot;*&quot; /&gt;
            &lt;ColumnDefinition Width=&quot;*&quot; /&gt;
        &lt;/Grid.ColumnDefinitions&gt;

        &lt;Button Grid.Column=&quot;0&quot; Text=&quot;Cancel&quot; FontAttributes=&quot;Bold&quot; FontFamily=&quot;Bold&quot;  WidthRequest=&quot;150&quot; TextColor=&quot;#1414A0&quot; BackgroundColor=&quot;#E5E5FF&quot; CornerRadius=&quot;20&quot;  HorizontalOptions=&quot;FillAndExpand&quot;
                Clicked=&quot;Cancel_Clicked&quot; /&gt;
        &lt;Button Grid.Column=&quot;1&quot; Text=&quot;Apply&quot; FontAttributes=&quot;Bold&quot;  FontFamily=&quot;Bold&quot; WidthRequest=&quot;150&quot; Style=&quot;{StaticResource PrimaryButtonStyle}&quot; HorizontalOptions=&quot;FillAndExpand&quot;
                Clicked=&quot;Apply_Clicked&quot;/&gt;
    &lt;/Grid&gt;
&lt;/btm:BottomSheet&gt;

I want the bottom sheet to be able to be self dismissed within the control itself once I clicked the 'Cancel' button

答案1

得分: 0

在底部工作表的代码后台中,将以下代码放入“取消”按钮的事件处理程序中,以调用底部工作表上的 DismissAsync() 方法来关闭它:

private async void Cancel_Clicked(object sender, EventArgs args)
{
    await DismissAsync();
}
英文:

In the code-behind of your bottom sheet, put the following code into the Cancel button's event handler to call the DismissAsync() method on the bottom sheet to close it:

private async void Cancel_Clicked(object sender, EventArgs args)
{
    await DismissAsync();
}

答案2

得分: 0

我已经检查了您提供的控件链接,并发现您可以调用sheet.DismissAsync()来使底部表单消失。所以您可以尝试使用控件的父属性来获取BottomSheet的实例。例如:

private void Button_Clicked(object sender, EventArgs e)
{
            var control = sender as Button;
            var bottomsheet = control.Parent.Parent as BottomSheet;
          // 第一个父级是Grid,第二个父级是BottomSheet
          bottomsheet.DismissAsync();
}
英文:

I have check the control link you provided and found that you can call the sheet.DismissAsync() to make the bottom sheet disappear. So you can try to use the control's parent property to get the instance of BottomSheet. Such as:

private void Button_Clicked(object sender, EventArgs e)
    {
            var control = sender as Button;
            var bottomsheet = control.Parent.Parent as BottomSheet;
          // the first parent is grid and the second parent is BottomSheet
          bottomsheet.DismissAsync();
    }

</details>



huangapple
  • 本文由 发表于 2023年7月6日 15:17:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/76626365.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定