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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to set the Header and Footer View in NavigationDrawer

Platform: Xamarin.Forms |
Control: SfNavigationDrawer |
Published Date: April 10, 2017 |
Last Revised Date: June 24, 2019

Syncfusion NavigationDrawer in Xamarin provides the HeaderView and FooterView to enable and Disable.

 

To Enable Header and Footer follow the given procedures below.

 

Step 1: Set Header and Footer inside DrawerHeaderView and DrawerFooterView respectively.

Step 2: Set desired height for DrawerHeaderHeight and DrawerFooterHeight in NavigationDrawer

 

The below code illustrates the way to achieve this.

XAML code:

<navigation:SfNavigationDrawer x:Name="navigationDrawer"  EnableSwipeGesture="false" Position="Left" Transition="Push" TouchThreshold="30" DrawerHeight="100" DrawerWidth="120" DrawerHeaderHeight="100" DrawerFooterHeight="100"> 
<!-- Set DrawerHeaderHeight="0" to disable Header and DrawerFooterHeight="0" to disable footer -->
      <navigation:SfNavigationDrawer.ContentView>
  <StackLayout x:Name="ContentFrame" Orientation="Vertical">
      <StackLayout x:Name="headerFrame" Orientation="Horizontal"  BackgroundColor="#1aa1d6">
          <Label x:Name="homeLabel" FontSize="15" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="FillAndExpand" HeightRequest="50" Text="Home" TextColor="White" />
      </StackLayout>
      <Button Text="Show Menu" Grid.Row="1"  BackgroundColor="#1aa1d6"  x:Name="Btnmenu" HorizontalOptions="Center" VerticalOptions="Center" ></Button>
  </StackLayout>
</navigation:SfNavigationDrawer.ContentView>
<!-- Below code is to create Header in the Drawer Content -->
<navigation:SfNavigationDrawer.DrawerHeaderView>
  <Grid x:Name="headerLayout" BackgroundColor="#1aa1d6" >
      <Label x:Name="header"  Text="Header View" FontSize="14" TextColor="White"  VerticalTextAlignment="Center" HorizontalTextAlignment="Center"  />
  </Grid>
</navigation:SfNavigationDrawer.DrawerHeaderView>
<!-- Below code is to create Footer in the Drawer Content -->
<navigation:SfNavigationDrawer.DrawerFooterView>
  <Grid x:Name="footerLayout" BackgroundColor="#1aa1d6" >
      <Label x:Name="footer"  Text="Footer View" FontSize="14" TextColor="White"  VerticalTextAlignment="Center" HorizontalTextAlignment="Center"  />
  </Grid>
</navigation:SfNavigationDrawer.DrawerFooterView>
 
</navigation:SfNavigationDrawer> 
 

 

Image for header and footer:

Header and footer of SfNavigationDrawer

 

Image for disabled header:

Disabled header of SfNavigationDrawer

 

Image for disabled footer:

 

Disabled footer of SfNavigationDrawer

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon