DrawerWidth Not working

[marcelo couto fernandes]

I am trying to expand the width of NavigationDrawer, but is not working (Nothing changes when change value of DrawerWidth ). For now, i just tested on Android.

If someone help me, i appreciate.

My code:

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:navigationdrawer="clr-namespace:Syncfusion.SfNavigationDrawer.XForms;assembly=Syncfusion.SfNavigationDrawer.XForms"

             xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"

             x:Class="AppGroma.Views.MasterPage">

    

    <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" DrawerWidth ="400" DrawerHeaderHeight="200">

        <navigationdrawer:SfNavigationDrawer.ContentView>

            <Grid x:Name="mainContentView" BackgroundColor="White">

                <Grid.RowDefinitions>

                    <RowDefinition Height="auto"/>

                    <RowDefinition/>

                </Grid.RowDefinitions>

                <StackLayout BackgroundColor="#1aa1d6" Orientation="Horizontal">

                    <Button x:Name="hamburgerButton" HeightRequest="50" WidthRequest="50" HorizontalOptions="Start" FontSize="20" BackgroundColor="#1aa1d6" Clicked="hamburgerButton_Clicked"/>

                    <Label x:Name="headerLabel" HeightRequest="50" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="Home" FontSize="16" TextColor="White" BackgroundColor="#1aa1d6"/>

                </StackLayout>

                <Label Grid.Row="1" x:Name="contentLabel" VerticalOptions="Center" HorizontalOptions="Center" Text="Content View" FontSize="14" TextColor="Black"/>

            </Grid>

        </navigationdrawer:SfNavigationDrawer.ContentView>

        <navigationdrawer:SfNavigationDrawer.DrawerHeaderView>

            <Grid BackgroundColor="#1aa1d6" Padding="10">

                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto"/>

                        <RowDefinition Height="*"/>

                        <RowDefinition Height="*"/>

                    </Grid.RowDefinitions>

                    <!--<Grid.ColumnDefinitions>

                        <ColumnDefinition Width="Auto"/>

                        <ColumnDefinition Width="*"/>

                        <ColumnDefinition Width="*"/>

                    </Grid.ColumnDefinitions>-->

                

                    <controls:CircleImage Grid.Row="0" Aspect="AspectFill" BackgroundColor="#1aa1d6" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >

                    <controls:CircleImage.Source>

                        <UriImageSource Uri="{Binding profile_picture}" CacheValidity="14" CachingEnabled="true"/>

                    </controls:CircleImage.Source>

                    <controls:CircleImage.WidthRequest>

                        <OnPlatform x:TypeArguments="x:Double">

                            <On Platform="Android, iOS">95</On>

                            <On Platform="WinPhone">115</On>

                        </OnPlatform>

                    </controls:CircleImage.WidthRequest>

                    <controls:CircleImage.HeightRequest>

                        <OnPlatform x:TypeArguments="x:Double">

                            <On Platform="Android, iOS">95</On>

                            <On Platform="WinPhone">115</On>

                        </OnPlatform>

                    </controls:CircleImage.HeightRequest>

                </controls:CircleImage>

                <!--<Image Source="{Binding profile_picture}" HeightRequest="110"  BackgroundColor="#1aa1d6" VerticalOptions="Center" HorizontalOptions="Center"/>-->

                <Label Text="{Binding full_name}" Grid.Row="1" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="Medium" TextColor="White"/>

                <Label Text="{Binding username, StringFormat='@{0}'}" Grid.Row="2" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="Small" TextColor="White"/>

            </Grid>

        </navigationdrawer:SfNavigationDrawer.DrawerHeaderView>

        <navigationdrawer:SfNavigationDrawer.DrawerContentView>

            <ListView x:Name="listView" ItemSelected="listView_ItemSelected">

                <ListView.ItemTemplate>

                    <DataTemplate>

                        <ViewCell>

                            <Grid Padding="5,10">

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="30"/>

                                    <ColumnDefinition Width="*" />

                                </Grid.ColumnDefinitions>

                                <Image Source="{Binding IconSource}" />

                                <Label Grid.Column="1" Text="{Binding Title}" VerticalOptions="FillAndExpand" />

                            </Grid>

                        </ViewCell>

                    </DataTemplate>

                </ListView.ItemTemplate>

            </ListView>

        </navigationdrawer:SfNavigationDrawer.DrawerContentView>

    </navigationdrawer:SfNavigationDrawer>

</ContentPage>

[Selva Kumar Veerakrishnan]

Hi Marceio,

Thank you for contacting Syncfusion Support.

We are unable to reproduce the issue “DrawerWidth is not working as expected” We have prepared a sample based on your requirement, in which we have used buttons inside the ContentView to change the Width of Drawer also we have recorded the video footage for the same. Please download it from the link given below.

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/NaviSample_2-757863189.zip

Video link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Naivvideo-652862686.zip

Note: We recommend you to use our latest Volume 3 service pack 2 release from the link given below.

https://www.syncfusion.com/forums/132941/essential-studio-2017-volume-3-service-pack-release-v15-3-0-33-available-for-download

Please let us know if you have any concern about this.

Regards,
Selva Kumar V.

[marcelo couto fernandes]

Oh...
I Got it !!
It´s because in your samples from https://help.syncfusion.com/xamarin/sfnavigationdrawer/getting-started you set the Width on XAML and also at .cs (navigationDrawer.DrawerWidth = 200;)
So, when i changed my XAML to 300, changed to 200 because of the code on code behind.

Its better if syncfusion do this little change on codebehind and leaves commented.

Thanks.

[Selva Kumar Veerakrishnan]

Hi Marceio,

Thanks for your response.

We will modify the User Guide Documentation of SfNavigationDrawer as per your suggestion. This changes will be rolled out in our Volume 4 Service pack 1.

Please let us know if you need any other assistance.

Regards,

Selva Kumar V.