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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How use Xamarin.Forms ListView in SfNavigationDrawer (SfListView)

Platform: Xamarin.Forms |
Control: SfListView |
Published Date: April 14, 2020 |
Last Revised Date: April 16, 2020

You can layout SfListView in SfNavigationDrawer in Xamarin.Forms.

XAML

Setting ListView as DrawerContentView in NavigationDrawer.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin"
             xmlns:navigationdrawer="clr-namespace:Syncfusion.SfNavigationDrawer.XForms;assembly=Syncfusion.SfNavigationDrawer.XForms"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="ListViewXamarin.MainPage">
 
    <ContentPage.BindingContext>
        <local:ContactsViewModel/>
    </ContentPage.BindingContext>
 
    <ContentPage.Content>
        <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" DrawerFooterHeight="0" DrawerHeaderHeight="0" IsOpen="{Binding IsOpen}" Position="{Binding Position}">
 
            <navigationdrawer:SfNavigationDrawer.ContentView>
                <StackLayout BackgroundColor="White">
                    <Button BackgroundColor="LightGray" Text="Show ListView" WidthRequest="150" HeightRequest="50" HorizontalOptions="Center" VerticalOptions="Center" Command="{Binding ShowListView}" />
                </StackLayout>
            </navigationdrawer:SfNavigationDrawer.ContentView>
 
            <navigationdrawer:SfNavigationDrawer.DrawerContentView>
                <ContentView>
                    <Grid>
                        <syncfusion:SfListView x:Name="listView" ItemSpacing="1" AutoFitMode="DynamicHeight" ItemsSource="{Binding contactsinfo}" BackgroundColor="White">
                            <syncfusion:SfListView.HeaderTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Label HeightRequest="50" Text="ListView Items" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="DarkCyan"/>
                                    </Grid>
                                </DataTemplate>
                            </syncfusion:SfListView.HeaderTemplate>
                            <syncfusion:SfListView.ItemTemplate >
                                <DataTemplate>
                                    ...
                                </DataTemplate>
                            </syncfusion:SfListView.ItemTemplate>
                        </syncfusion:SfListView>
                    </Grid>
                </ContentView>
            </navigationdrawer:SfNavigationDrawer.DrawerContentView>
 
        </navigationdrawer:SfNavigationDrawer>
    </ContentPage.Content>
</ContentPage>

C#

Changing ListView position in ViewModel command

namespace ListViewXamarin
{
    public class ContactsViewModel : INotifyPropertyChanged
    {
        private bool _isOpen;
        private Position _position;
 
        int flag = 0;
        public Position Position
        {
            get => _position;
            set
            {
                _position = value;
                OnPropertyChanged("Position");
            }
        }
        public bool IsOpen
        {
            get => _isOpen;
            set
            {
                _isOpen = value;
                OnPropertyChanged("IsOpen");
            }
        }
        public Command ShowListView { get; set; }
 
        public ContactsViewModel()
        {
            ShowListView = new Command(OnShowListView);
        }
 
        private void OnShowListView(object obj)
        {
            if (flag > 3)
                flag %= 4;
            switch (flag)
            {
                case 0:
                    Position = Position.Left;
                    break;
                case 1:
                    Position = Position.Bottom;
                    break;
                case 2:
                    Position = Position.Right;
                    break;
                case 3:
                    Position = Position.Top;
                    break;
                default:
                    break;
            }
            IsOpen = true;
            flag++;
        }
        public event PropertyChangedEventHandler PropertyChanged;
 
        public void OnPropertyChanged(string name)
        {
            if (this.PropertyChanged != null)
                this.PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
    }
}

Output

ListView in NavigationDrawer

View sample in GitHub

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.

Up arrow icon

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

Live Chat Icon For mobile