SampleBottomDrawer icon indicating copy to clipboard operation
SampleBottomDrawer copied to clipboard

BottomDrawer blocks UI

Open borrmann opened this issue 2 years ago • 0 comments

The BottomDrawer blocks the UI even when not visible

expected behaviour: User can click on any item on the page

actual behaviour: User clicks arent recognised (to test replace the label with a button, you cant click it!)

solution: set IsVisible

async Task OpenDrawer()
{
    Backdrop.IsVisible = true;
    BottomToolbar.IsVisible = true;
    await Task.WhenAll
    (
        Backdrop.FadeTo(1, length: duration),
        BottomToolbar.TranslateTo(0, openY, length: duration, easing: Easing.SinIn)
    );
}

async Task CloseDrawer()
{
    await Task.WhenAll
    (
        Backdrop.FadeTo(0, length: duration),
        BottomToolbar.TranslateTo(0, 500, length: duration, easing: Easing.SinIn)
    );
    Backdrop.IsVisible = false;
    BottomToolbar.IsVisible = false;
}

<BoxView Color="#4B000000" Opacity="0" x:Name="Backdrop" IsVisible="false">
            <BoxView.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
            </BoxView.GestureRecognizers>
        </BoxView>

        <Frame  x:Name="BottomToolbar"  HeightRequest="200" VerticalOptions="End" BackgroundColor="#FFFFFF" CornerRadius="20" TranslationY="260" Padding="15,6" IsVisible="false">
            <Frame.GestureRecognizers>
                <PanGestureRecognizer
                    PanUpdated="PanGestureRecognizer_PanUpdated" />
            </Frame.GestureRecognizers>
            <StackLayout Orientation="Vertical" Padding="0,4">
                <BoxView CornerRadius="2" HeightRequest="4" WidthRequest="40" BackgroundColor="LightGray" HorizontalOptions="Center"/>
                <Label Text="Actions" HorizontalOptions="Center" FontSize="18" FontAttributes="Bold"/>
                <TableView Intent="Settings" VerticalOptions="End" BackgroundColor="White">
                    <TableSection>
                        <TextCell
                            Text="Favorite"/>
                        <TextCell
                            Text="Share"/>
                    </TableSection>
                </TableView>
            </StackLayout>
        </Frame>

borrmann avatar Sep 15 '22 14:09 borrmann