2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
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>
|
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.