Customizing navigation drawer

[Benjamin]

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

[Benjamin]

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>                    

[Kanimozhi Gunasekaran]

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: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfNavigationDrawer_Sample-1289904074  

 

UG Link: 

https://help.syncfusion.com/xamarin/sfnavigationdrawer/toggle-animations#reveal  

 

 

Please check the above sample and let us know if you require any further assistance on this. 

 

Regards, 
Kanimozhi G 

[Benjamin]

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

[Rachel A]

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: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfNavigationDrawer_Sample669417670 

 

Output: 

 

 

Thanks, 

Rachel. 

[Benjamin]

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.

[Rachel A]

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: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfNavigationDrawer_Sample1763409567 

 

Thanks, 

Rachel. 

[Benjamin]

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

[Rachel A]

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. 

[Benjamin]

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)

[Rachel A]

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: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfNavigationDrawer_Sample-1954455690 

 

Images: 

     

 

Note: If we set the opacity for navigation drawer content view even the tab view header will not be visible. 

 

Thanks, 

Rachel.