MAUI SfNavigationDrawer - Binding is not working for IsOpen Property

[Mohammed Fahmidur Rahman]

We can bind the IsOpen property from viewmodel. But when the binding value is changed, the navigation drawer toggle is not working. Binding of IsOpen property is working only when initializing. It doesn’t toggle the navigation drawer toggle based on the binding value changed.

For example, if you initially set the IsOpen property to true, it is opening the navigation drawer by default. But when we are changing the binding value of IsOpen property to false from the viewmodel, it is not closing the navigation drawer.

Could you please share any work around for this?

[AhamedAliNishad JahirHussain]

Hi Mohammed Fahmidur,

Query : Binding is not working for IsOpen Property

We have reviewed your query. Based on the provided information, we have created a sample including the SfNavigationDrawer. We would like to suggest that you utilize the two-way mode for the IsOpen property for proper functioning, as demonstrated in the code snippet below. Please review the attached sample and let us know the details.

Code Snippet :

 

  <Grid RowDefinitions="8*,2*">

        <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" IsOpen="{Binding IsOpen, Mode=TwoWay}">

            <navigationdrawer:SfNavigationDrawer.DrawerSettings>

                <navigationdrawer:DrawerSettings DrawerWidth="250"

                                     DrawerHeaderHeight="160">

                    <navigationdrawer:DrawerSettings.DrawerHeaderView>

                        <Grid BackgroundColor="#6750A4" RowDefinitions="120,40">

                            <Image Source="dotnet_bot.png"

                       HeightRequest="110"

                       Margin="0,10,0,0"

                       BackgroundColor="#6750A4"

                       VerticalOptions="Center"

                       HorizontalOptions="Center"/>

                            <Label Text="James Pollock"

                       Grid.Row="1"

                       HorizontalTextAlignment="Center"

                       HorizontalOptions="Center"

                       FontSize="20"

                       TextColor="White"/>

                        </Grid>

                    </navigationdrawer:DrawerSettings.DrawerHeaderView>

                    <navigationdrawer:DrawerSettings.DrawerContentView>

                        <ListView x:Name="listView"

                      ItemSelected="listView_ItemSelected">

                            <ListView.ItemTemplate>

                                <DataTemplate>

                                    <ViewCell>

                                        <VerticalStackLayout HeightRequest="40">

                                            <Label Margin="10,7,0,0"

                                       Text="{Binding}"

                                       FontSize="16"

                                       TextColor="Black"/>

                                        </VerticalStackLayout>

                                    </ViewCell>

                                </DataTemplate>

                            </ListView.ItemTemplate>

                        </ListView>

                    </navigationdrawer:DrawerSettings.DrawerContentView>

                </navigationdrawer:DrawerSettings>

            </navigationdrawer:SfNavigationDrawer.DrawerSettings>

            <navigationdrawer:SfNavigationDrawer.ContentView>

                <Grid x:Name="mainContentView"

      BackgroundColor="White" RowDefinitions="Auto,*">

                    <HorizontalStackLayout BackgroundColor="#6750A4" Spacing="10" Padding="5,0,0,0">

                        <ImageButton x:Name="hamburgerButton"

                         HeightRequest="50"

                         WidthRequest="50"

                         HorizontalOptions="Start"

                         Source="dotnet_bot.png"

                         BackgroundColor="#6750A4"

                         Clicked="hamburgerButton_Clicked"/>

                        <Label x:Name="headerLabel"

               HeightRequest="50"

               HorizontalTextAlignment="Center"

               VerticalTextAlignment="Center"

               Text="Home" FontSize="16"

               TextColor="White"

               BackgroundColor="#6750A4"/>

                    </HorizontalStackLayout>

                    <Label Grid.Row="1"

          x:Name="contentLabel"

          VerticalOptions="Center"

          HorizontalOptions="Center"

          Text="Content View"

          FontSize="14"

          TextColor="Black"/>

                </Grid>

            </navigationdrawer:SfNavigationDrawer.ContentView>

        </navigationdrawer:SfNavigationDrawer>

        <CheckBox Grid.Row="1" IsChecked="{Binding IsOpen}"/>

    </Grid>

Regards,

Ahamed Ali Nishad.

Attachment: NavigationDrawerSample_fd141236.zip