We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Customizing navigation drawer

Would like to know how do i go about to implement this?

Icon to activate nav drawer


Layout and content of drawer


the nav drawer will include the following controls

combo box
text box
label
submit button

10 Replies

BE Benjamin September 18, 2019 03:55 AM UTC

I seems to made some progress. but the layout does not seems to be what i wanted.

Currently it looks like this


What i wanted is "B" which is button to toggle the side panel to "float" on the content. 




Further, when i open the side panel i need it to be same as this



My code looks something like this

 <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer">

      <navigationdrawer:SfNavigationDrawer.ContentView>

          <StackLayout Orientation="Horizontal" BackgroundColor="Transparent" HeightRequest="600" WidthRequest="350">

                <StackLayout BackgroundColor="#1aa1d6" 

                             Orientation="Horizontal"

                             VerticalOptions="Center">

                                <Button x:Name="hamburgerButton" 

                                HeightRequest="30" 

                                WidthRequest="30" 

                                HorizontalOptions="Start" 

                                FontSize="20" 

                                BackgroundColor="#1aa1d6" 

                                Text="B"

                                Clicked="hamburgerButton_Clicked"/>

                            </StackLayout>

                                <tabview:SfTabView OverflowMode="Scroll" Margin="10" VisibleHeaderCount="3" x:Name="SLATabs" SelectionChanged="SLATabs_SelectionChanged">

...

</tabview:SfTabView>

                            </StackLayout>

                        </navigationdrawer:SfNavigationDrawer.ContentView>

                        <navigationdrawer:SfNavigationDrawer.DrawerContentView>

                        <ScrollView>

                            <StackLayout>

                                <Label Text="GDC"></Label>

                                <combobox:SfComboBox x:Name="comboGDC">

                                    <combobox:SfComboBox.ComboBoxSource>

                                        <sys:List x:TypeArguments="x:String">

                                            <x:String>GDC 1</x:String>

                                            <x:String>GDC 2</x:String>

                                        </sys:List>

                                    </combobox:SfComboBox.ComboBoxSource>

                                </combobox:SfComboBox>

                                <Label Text="Region"></Label>

                                <combobox:SfComboBox x:Name="comboRegion">

                                    <combobox:SfComboBox.ComboBoxSource>

                                        <sys:List x:TypeArguments="x:String">

                                            <x:String>AP</x:String>

                                            <x:String>EU</x:String>

                                            <x:String>AM</x:String>

                                            <x:String>MEA</x:String>

                                        </sys:List>

                                    </combobox:SfComboBox.ComboBoxSource>

                                </combobox:SfComboBox>

                                <Label Text="Client"></Label>

                                <Entry />

                                <buttons:SfButton Text="Check"/>

                            </StackLayout>

                        </ScrollView>

        </navigationdrawer:SfNavigationDrawer.DrawerContentView>

</navigationdrawer:SfNavigationDrawer>                    






KG Kanimozhi Gunasekaran Syncfusion Team September 18, 2019 11:51 AM UTC

Hi Benjamin, 
 
 
Greetings from Syncfusion. 
 
We have analyzed your requirement in SfNavigationDrawer with given screenshot. We can achieve your requirement using Transition is Reveal. We have prepared the sample with given code snippet. Please try the attached below sample and let us know if you have any concern on this. 
 
 
Sample Link: 
 

UG Link:
 
 
 
Please check the above sample and let us know if you require any further assistance on this. 
 
Regards, 
Kanimozhi G 



BE Benjamin September 19, 2019 03:57 AM UTC


this is the best I can do. the B is the button to trigger drawer what i want to achieved is something like this


the button to trigger the drawer is somewhere in the middle of the screen. 

Currently when the drawer open, its height is to the whole screen which i do not want. 

when drawer open, the top of the drawer should be at the location of where the filter button is. Something like this



RA Rachel A Syncfusion Team September 19, 2019 09:22 AM UTC

Hi Benjamin, 
 
Thanks for the update. 
 
We have analyzed your requirement in SfNavigationDrawer. When the drawer open, its height is set to the whole screen this is the default behavior of our SfNavigationDrawer.  
 
We suspect your requirement is to maintain the filter icon even when the slide out is open and decrease the width of drawer size. Based on this requirement we have prepared the simple sample for your reference. 
 
Also, find the code snippet for same. 
 
[XAML] 
  <Grid> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="100" /> 
            <RowDefinition Height="600" /> 
            <RowDefinition /> 
        </Grid.RowDefinitions> 
        <StackLayout Grid.Row="0"> 
            <Label  
                   Text="SLA Achievement" 
                   FontSize="16" 
                   TextColor="Black" 
                   HeightRequest="100" 
                   VerticalTextAlignment="Center" 
                   BackgroundColor="Blue" /> 
        </StackLayout> 
        <navigationdrawer:SfNavigationDrawer Grid.Row="1"  x:Name="navigationDrawer" DrawerWidth ="200" DrawerHeaderHeight="0" Transition="Reveal"> 
        <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.DrawerContentView> 
                <ScrollView> 
                    <StackLayout> 
                        <Label Text="GDC"></Label> 
                        <combobox:SfComboBox x:Name="comboGDC"> 
                            <combobox:SfComboBox.ComboBoxSource> 
                                <ListCollection:List x:TypeArguments="x:String"> 
                                    <x:String>GDC 1</x:String> 
                                    <x:String>GDC 2</x:String> 
                                </ListCollection:List> 
                            </combobox:SfComboBox.ComboBoxSource> 
                        </combobox:SfComboBox> 
                        <Label Text="Region"></Label> 
                        <combobox:SfComboBox x:Name="comboRegion"> 
                            <combobox:SfComboBox.ComboBoxSource> 
                                <ListCollection:List x:TypeArguments="x:String"> 
                                    <x:String>AP</x:String> 
                                    <x:String>EU</x:String> 
                                    <x:String>AM</x:String> 
                                    <x:String>MEA</x:String> 
                                </ListCollection:List> 
                            </combobox:SfComboBox.ComboBoxSource> 
                        </combobox:SfComboBox> 
                        <Label Text="Client"></Label> 
                        <Entry /> 
                        <buttons:SfButton Text="Check"/> 
                    </StackLayout> 
                </ScrollView> 
            </navigationdrawer:SfNavigationDrawer.DrawerContentView> 
    </navigationdrawer:SfNavigationDrawer> 
    </Grid> 
 
 
Sample Link: 
 
Output: 
 
 
Thanks, 
Rachel. 



BE Benjamin September 19, 2019 09:47 AM UTC

Hi,

Firstly thanks for the reply. 

I have tried the sample but it seems that the button is hidden somewhere or is not showing up at all.

from the screenshot you have provided, I think there is some mis-interpretation. 

what I wanted is something like this


The white box is the button to toggle the nav drawer. the red box area is a tab-view contain the data. therefore I need the button to somehow float or position in between the tab header and tab content.

once it open, the position of the top of the drawer should be at the location of the button like this.



RA Rachel A Syncfusion Team September 20, 2019 09:26 AM UTC

Hi Benjamin,  
 
Thanks for the update. 
 
We have tried to achieve the same as your requirement, but it is not possible to have the floating button which will move when the navigation drawer is open.  
 
Still we have prepared sample to display the button below the header and the button is overlapped by navigation drawer when it is in open state as shown in images below. Also, this is the default behavior of navigation drawer. 
 
 
 
 
 
Sample Link: 
 
Thanks, 
Rachel. 



BE Benjamin September 20, 2019 09:30 AM UTC

Hi. i am able to position the nav drawer to what i wanted using absolute layout. but now no matter which part of the screen i click, i am not able to close the panel.

it also seems that i am unable to set the panel height via the DrawerHeight property

Current View


my code



RA Rachel A Syncfusion Team September 23, 2019 12:58 PM UTC

Hi Benjamin, 
 
We would like to let you know that the DrawerHeight is applicable only when we slide the position from top or bottom. As your requirement is to slide the drawer content from left to right the DrawerWidth property is only applicable. 
 
Note: Based on the UI architecture, we cannot place the navigation drawer inside absolute layout. 
 
Thanks, 
Rachel. 



BE Benjamin September 24, 2019 04:47 AM UTC

Hi Rachel,

Thanks for replying. 

I am able to achieve most of what I wanted by changing the layout to Grid.

Am wondering if it is possible to remove the transparency or overlay(not sure what it is called, but I am referring to the red box up area)




RA Rachel A Syncfusion Team September 24, 2019 08:59 AM UTC

Hi Benjamin, 
 
We have prepared the sample to achieve your requirement by setting the opacity for the content in tab view when slide out is opened and reset the opacity in closed state. Please try the attached below sample and let us know if you have any concern on this. 
 
Sample Link: 
 
Images: 
     
 
Note: If we set the opacity for navigation drawer content view even the tab view header will not be visible. 
 
Thanks, 
Rachel.

Loader.
Live Chat Icon For mobile
Up arrow icon