How to set the Header and Footer View in NavigationDrawer

1 min read

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