Bottom SfNavigationDrawer with dynamic height

[Sebas Herreros]

In my app I am using a bottom SfNavigationDrawer with dynamic content using a FlexLayout with a BindableLayout.ItemsSource. I am trying to set the SfNavigationDrawer height when the content of the FlexLayout changes. I have tried to change the SfNavigationDrawer height with a binded property, but it does not work.

Any clues?

Thanks!

[Ruba Shanmugam]

Hi Sebas,

Query: Bottom SfNavigationDrawer with dynamic height

We have prepared the sample based on the provided information using the SfNavigationDrawer inside the FlexLayout and changed the height dynamically to the drawer, but it will update the content properly based on the provided width and height. We have prepared a sample for your reference and please get it from the attachments

We ask you to try our sample and if your requirement is different, please explain to us briefly and share the replication steps with the sample and the reported issue platform details. It will help us to provide the proper solution at the easiest.  Please let us know if you need any other details.

Regards,

Ruba Shanmugam

Attachment: NavDrawer_FlexLayout_1dcce3c0.zip

[Sebas Herreros]

I've tries to adapt your proposed solution to my case, bot is not working as I need it to work.

This is my XAML

    <ContentPage.Content>

        <navigationdrawer:SfNavigationDrawer  x:Name="navigationDrawer" Position="Bottom" DrawerHeight="30" EnableSwipeGesture="False"   TouchThreshold="10">
            <navigationdrawer:SfNavigationDrawer.ContentView>
                <Grid>...</Grid>
            </navigationdrawer:SfNavigationDrawer.ContentView>

            <navigationdrawer:SfNavigationDrawer.DefaultDrawerSettings>
                <navigationdrawer:DrawerSettings ContentBackgroundColor="Transparent" Position="Bottom">

                    <navigationdrawer:DrawerSettings.DrawerContentView>
                            <Grid x:Name="DrawerLayout" BackgroundColor="Transparent" RowSpacing="0" Margin="5,0,5,0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="40"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                    <RowDefinition Height="10"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>

                                </Grid.RowDefinitions>


                                <border:SfBorder Grid.Row="0" CornerRadius="25,25,0,0" BorderColor="White" BackgroundColor="White">


                                    <Label
                                        Margin="0,10,0,0"
                                        Grid.Row="1"
                                        BackgroundColor="White"
                                        FontFamily="Lato-Regular"
                                        FontSize="17"
                                        HorizontalOptions="Center"
                                        Text="{Binding SortByText}"
                                        VerticalOptions="Center" />

                                </border:SfBorder>

                                <FlexLayout
                                    Grid.Row="1"
                                    Direction="Column"
                                    BackgroundColor="White"
                                    BindableLayout.ItemsSource="{Binding ListOfCategories}">
                                    <BindableLayout.ItemTemplate>
                                        <DataTemplate>
                                            <Grid Margin="10">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="30" />
                                                    <ColumnDefinition Width="*" />
                                                </Grid.ColumnDefinitions>
                                                <controls:TintCachedImage
                                                    Grid.Column="0"
                                                    Margin="15,0,0,0"
                                                    HeightRequest="18"
                                                    IsVisible="{Binding IsSelected, Mode=TwoWay}"
                                                    Source="resource://Atrivity.EmbeddedResources.Vectorials.CheckedIcon.svg"
                                                    WidthRequest="18" />
                                                <Label
                                                    Grid.Column="1"
                                                    Margin="10,0,0,0"
                                                    FontFamily="Lato-Regular"
                                                    FontSize="16"
                                                    Text="{Binding CategoryName}"
                                                    VerticalOptions="Center" />
                                                <Grid.GestureRecognizers>
                                                    <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type collection:CollectionPageViewModel}}, Path=CategoryTappedCommand}" CommandParameter="{Binding .}" />
                                                </Grid.GestureRecognizers>
                                            </Grid>
                                        </DataTemplate>
                                    </BindableLayout.ItemTemplate>


                                </FlexLayout>


                                <Line Grid.Row="2" BackgroundColor="White" Stroke="#F9F9F9" X2="200" />


                                <FlexLayout
                                    x:Name="SortOptionsLayout"
                                    Grid.Row="3"
                                    Direction="Column"
                                    BackgroundColor="White"
                                    BindableLayout.ItemsSource="{Binding ListOfSortOptions}">
                                    <BindableLayout.ItemTemplate>
                                        <DataTemplate>
                                            <Grid Margin="10">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="30" />
                                                    <ColumnDefinition Width="*" />
                                                </Grid.ColumnDefinitions>
                                                <controls:TintCachedImage
                                                    Grid.Column="0"
                                                    Margin="15,0,0,0"
                                                    HeightRequest="18"
                                                    IsVisible="{Binding IsSelected, Mode=TwoWay}"
                                                    Source="resource://Atrivity.EmbeddedResources.Vectorials.CheckedIcon.svg"
                                                    WidthRequest="18" />
                                                <Label
                                                    Grid.Column="1"
                                                    Margin="10,0,0,0"
                                                    FontFamily="Lato-Regular"
                                                    FontSize="16"
                                                    Text="{Binding CategoryName}"
                                                    VerticalOptions="Center" />
                                                <Grid.GestureRecognizers>
                                                    <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type collection:CollectionPageViewModel}}, Path=SortTappedCommand}" CommandParameter="{Binding .}" />
                                                </Grid.GestureRecognizers>
                                            </Grid>
                                        </DataTemplate>
                                    </BindableLayout.ItemTemplate>
                                </FlexLayout>
                            </Grid>
                    </navigationdrawer:DrawerSettings.DrawerContentView>
                </navigationdrawer:DrawerSettings>
            </navigationdrawer:SfNavigationDrawer.DefaultDrawerSettings>
        </navigationdrawer:SfNavigationDrawer>

    </ContentPage.Content>


In the navigationdrawer I have two FlexLayout using bindable layouts. The content on the second list depends on the selection made in the first list, and there are cases where the second list will be empty (that's why I need the resize) The two FlexLayout controls are inside a grid with 'auto' rowheight, as in your example.

With this code, this is the result I am getting:

As you can see, the SfNavigationDrawer is not adapting to the content height. The transparent part at the bottom is the part of the SfNavigationDrawer that not gets smaller.

 

[Ruba Shanmugam]

Hi Sebas,

Query: the SfNavigationDrawer is not adapting to the content height. The transparent part at the bottom is the part of the SfNavigationDrawer that not gets smaller.

We have checked the reported query and when we add the FlexLayout inside the Grid even without the SfNavigationDrawer getting the same issue. This is a known framework issue already.

GitHub issue link: https://github.com/xamarin/Xamarin.Forms/issues/5265

Please follow up on the above link for the further update regarding the issue. We suggest you use any other Layout such as StackLayout/Grid instead of FlexLayout in your sample.

Regards,

Ruba Shanmugam