How to add Syncfusion controls inside NavigationDrawer
Syncfusion NavigationDrawer in Xamarin provides support to add Syncfusion controls within the DrawerContentView of the NavigationDrawer. By using this the user can add N-number of controls in out SfNavigationDrawer.
To set Syncfusion controls in NavigationDrawer follow the below given procedures.
Step 1: Create NavigationDrawer sample, inside DrawerContent view create list of Syncfusion Controls to be displayed.
Step 2: Add the necessary dll for the respective control which the user has used in the Drawer content and also for Navigationdrawer.
Step 3: Use ItemSelected event to navigate to the respective controls form the Drawer content.
The below code illustrates the way to achieve this.
XAML code to create SfBusyIndicator:
<ContentPage.Content> <busy:SfBusyIndicator x:Name="busyindicator" Title="Application Loading..." AnimationType="Rectangle" ViewBoxWidth = "200" ViewBoxHeight="250" TextColor="Maroon" BackgroundColor="White" /> </ContentPage.Content>
XAML code to create SfNumericUpDown:
<ContentPage.Content> <numeric:SfNumericUpDown FormatString="c" SpinButtonAlignment="Left" BackgroundColor="White" /> </ContentPage.Content>
XAML code to create SfRangrSlider:
<ContentPage.Content> <range:SfRangeSlider x:Name="rangeslider" Orientation="Horizontal" SnapsTo="Ticks" ShowValueLabel="true" ValuePlacement="TopLeft" HeightRequest="50" Minimum="0" Maximum="100" StepFrequency="6"/> </ContentPage.Content>
C# code for SfNavigationDrawer:
namespace DrawerExample { public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); SfNavigationDrawer navigationDrawer = new SfNavigationDrawer(); navigationDrawer.Position = Position.Left; navigationDrawer.Transition = Transition.Push; navigationDrawer.TouchThreshold = 50; navigationDrawer.Duration = 1000; navigationDrawer.DrawerWidth = 150; navigationDrawer.DrawerHeight = 100; navigationDrawer.DrawerHeaderHeight = 100; navigationDrawer.DrawerFooterHeight = 100; Grid headerLayout = new Grid(); headerLayout.BackgroundColor = Color.FromHex("#1aa1d6"); Label header = new Label(); header.Text = "Header View"; header.FontSize = 14; header.TextColor = Color.White; header.HorizontalTextAlignment = TextAlignment.Center; header.VerticalTextAlignment = TextAlignment.Center; header.BackgroundColor = Color.FromHex("#1aa1d6"); headerLayout.Children.Add(header); navigationDrawer.DrawerHeaderView = headerLayout; ObservableCollection<String> list = new ObservableCollection<string>(); list.Add("RangeSlider"); list.Add("BusyIndicator"); list.Add("NumericUpDown"); StackLayout mainStack = new StackLayout(); mainStack.Orientation = StackOrientation.Vertical; mainStack.HeightRequest = 500; ListView listView = new ListView(); listView.WidthRequest = 200; listView.VerticalOptions = LayoutOptions.FillAndExpand; listView.ItemsSource = list; mainStack.Children.Add(listView); navigationDrawer.DrawerContentView = mainStack; Button Btnmenu = new Button(); Btnmenu.Text = "Show Menu"; Btnmenu.HorizontalOptions = LayoutOptions.CenterAndExpand; Btnmenu.VerticalOptions = LayoutOptions.CenterAndExpand; Btnmenu.BackgroundColor = Color.FromHex("#1aa1d6"); StackLayout Stack = new StackLayout(); Stack.BackgroundColor = Color.White; Stack.HeightRequest = 100; Stack.HorizontalOptions = LayoutOptions.Center; Stack.VerticalOptions = LayoutOptions.Center; listView.ItemSelected += (object sender, SelectedItemChangedEventArgs e) => { if (e.SelectedItem.ToString().Equals("RangeSlider")) { navigationDrawer.EnableSwipeGesture = true; navigationDrawer.ContentView = new RangeSlider().Content; } if (e.SelectedItem.ToString().Equals("BusyIndicator")) { navigationDrawer.EnableSwipeGesture = true; navigationDrawer.ContentView = new BusyIndicator().Content; } if (e.SelectedItem.ToString().Equals("NumericUpDown")) { navigationDrawer.EnableSwipeGesture = true; navigationDrawer.ContentView = new NumericUpDown().Content; } }; Stack.Children.Add(Btnmenu); navigationDrawer.ContentView = Stack; StackLayout footerLayout = new StackLayout(); footerLayout.BackgroundColor = Color.FromHex("#1aa1d6"); Label footer = new Label(); footer.Text = "Footer View"; footer.FontSize = 14; footer.TextColor = Color.White; footer.HorizontalOptions = LayoutOptions.CenterAndExpand; footer.VerticalOptions = LayoutOptions.CenterAndExpand; footer.BackgroundColor = Color.FromHex("#1aa1d6"); footerLayout.Children.Add(footer); navigationDrawer.DrawerFooterView = footerLayout; this.Content = navigationDrawer; Btnmenu.Clicked += (sender_, e3) => { DependencyService.Get<IToggleDrawer>().ToggleDrawer(); }; } } }
Image for content page of NavigationDrawer:
|
Image for busy indicator: |
Image for range slider: |
Image for NumericalUpDown: |