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 to expand the TreeView node using MR.Gesture in Xamarin.Forms (SfTreeView)

Platform: Xamarin.Forms |
Control: SfTreeView

You can expand TreeViewNode using Mr.Gesture events in Xamrin.Forms SfTreeView.

Step 1: Install the Mr.Gesture Nuget package in the shared code project.

Step 2: Create your Xaml page by inheriting Mr.Gesture.ContentPage

namespace TreeViewXamarin
{
    public partial class MainPage : MR.Gestures.ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Step 3: Add TreeView to the content of the page. Add Mr.Gesture.Grid to the ItemTemplate of TreeView and set the behavior of Mr.Gesture.Grid.

<mr:ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:mr="clr-namespace:MR.Gestures;assembly=MR.Gestures"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TreeViewXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms"
             x:Class="TreeViewXamarin.MainPage">
 
    <mr:ContentPage.BindingContext>
        <local:FileManagerViewModel x:Name="viewModel"/>
    </mr:ContentPage.BindingContext>
 
    <syncfusion:SfTreeView x:Name="treeView"
                           ItemHeight="40"
                           Indentation="15"
                           ExpanderWidth="40"
                           ChildPropertyName="SubFiles"
                           ItemTemplateContextType="Node"
                           ItemsSource="{Binding ImageNodeInfo}"
                           VerticalOptions="Center">
        <syncfusion:SfTreeView.ItemTemplate>
            <DataTemplate>
                <mr:Grid x:Name="grid" RowSpacing="0" >
                    <mr:Grid.Behaviors>
                        <local:Behavior/>
                    </mr:Grid.Behaviors>
                    
                    <mr:Grid.ColumnDefinitions>
                        <ColumnDefinition Width="40" />
                        <ColumnDefinition Width="*" />
                    </mr:Grid.ColumnDefinitions>
                    <Image Source="{Binding Content.ImageIcon}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="35" WidthRequest="35"/>
                    <Grid Grid.Column="1" RowSpacing="1" VerticalOptions="Center">
                        <Label LineBreakMode="NoWrap" Margin="1,0,0,0" Text="{Binding Content.ItemName}" VerticalTextAlignment="Center"/>
                    </Grid>
                </mr:Grid>
            </DataTemplate>
        </syncfusion:SfTreeView.ItemTemplate>
    </syncfusion:SfTreeView>
 
</mr:ContentPage>

Step 4: TappedEvent for Mr.Gesture grid wired in Mr.Gesture.Grid Behavior. In the tapped event, TreeViewNode expanded using the ExpandNode method of SfTreeView.

namespace TreeViewXamarin
{
    public class Behavior : Behavior<MR.Gestures.Grid>
    {
        protected override void OnAttachedTo(MR.Gestures.Grid bindable)
        {
            bindable.Tapped += Bindable_Tapped;
            base.OnAttachedTo(bindable);
        }
 
        private void Bindable_Tapped(object sender, TapEventArgs e)
        {
            var treeViewNode = ((sender as MR.Gestures.Grid).BindingContext) as TreeViewNode;
            var treeView = (sender as MR.Gestures.Grid).Parent as SfTreeView;
            treeView.ExpandNode(treeViewNode);
        }
    }
}

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