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.
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.