如何在 Syncfusion 的 TreeView 上触发点击事件

Question

Menu.xaml

<MasterDetailPage.Master>
    <ContentPage Title="Menu" Padding="0">
        <ContentPage.Content>
            <StackLayout>
                <Grid BackgroundColor="LightGreen">
                    <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="10"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="10"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"/>
                            <RowDefinition Height="80"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="10"/>
                        </Grid.RowDefinitions>
                        <Label Grid.Column="1"
                               Grid.Row="2"
                               Text="DEC App"
                               TextColor="White"
                               FontSize="Large"/>
                    </Grid>
                    <syncfusion:SfTreeView x:Name="treeView">
                        <syncfusion:SfTreeView.Nodes>
                            <!--1st Menu-->
                            <treeviewengine:TreeViewNode Content="Menu 1">
                                <treeviewengine:TreeViewNode.ChildNodes>
                                    <treeviewengine:TreeViewNode Content="Menu 1.1">
                                        <!--SubMenu 1-->
                                    </treeviewengine:TreeViewNode>
                                    <treeviewengine:TreeViewNode Content="Menu 1.2">
                                        <!--SubMenu 2-->
                                        <treeviewengine:TreeViewNode.ChildNodes>
                                            <treeviewengine:TreeViewNode Content="Menu 1.2.1"/>
                                            <!--SubMenu 2.1-->
                                            <treeviewengine:TreeViewNode Content="Menu 1.2.2"/>
                                            <!--SubMenu 2.2-->
                                        </treeviewengine:TreeViewNode.ChildNodes>
                                    </treeviewengine:TreeViewNode>
                                </treeviewengine:TreeViewNode.ChildNodes>
                            </treeviewengine:TreeViewNode>
                        </syncfusion:SfTreeView.Nodes>
                    </syncfusion:SfTreeView>
                </StackLayout>
            </ContentPage.Content>
        </ContentPage>
    </MasterDetailPage.Master>
</MasterDetailPage>

Menu.xaml.cs

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace MasterDetailDemo
{
     [XamlCompilation(XamlCompilationOptions.Compile)]
     public partial class Menu : MasterDetailPage
{
    public Menu()
    {
        InitializeComponent();
        Detail = new NavigationPage(new MenuDetail());
    }

我在这里使用 Syncfusion 的 SfTreeView 创建了这个菜单

TreeView in Master Page Demo

但我不知道如何在其上创建点击事件，我尝试通读了所有 Syncfusion 的文档，但没有太大帮助。提前致谢

Answer 1

您可以使用syncfusion xamarin treeview 的Tap 命令。 https://help.syncfusion.com/xamarin/treeview/mvvm#tap-command

换个方式，你也可以使用 ItemTapped 事件， https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfTreeView.XForms~Syncfusion.XForms.TreeView.SfTreeView~ItemTapped_EV.html

Answer 2

我们想通知您，当在视图中单击树视图节点时，您可以使用 TreeView 的 ItemTapped 事件或 TapCommand 来获得通知。我们在下面附上了示例和代码片段供您参考。

示例 Link：https://www.syncfusion.com/downloads/support/directtrac/254006/ze/TreeviewMasterDetail-384415166

要了解有关 TapCommand 和 ItemTapped 事件的更多信息，请参阅我们的文档。

https://help.syncfusion.com/xamarin/treeview/mvvm#tap-command https://help.syncfusion.com/xamarin/treeview/interactivity#tapped-eventhttps://help.syncfusion.com/xamarin/treeview/interactivity#tapped-event

public class ContentPageBehavior : Behavior<ContentPage>
{
        protected override void OnAttachedTo(ContentPage bindable)
        {
            TreeView = bindable.FindByName<SfTreeView>("treeView");
            TreeView.ItemTapped += TreeView_ItemTapped;
            base.OnAttachedTo(bindable);
        }

        private void TreeView_ItemTapped(object sender, Syncfusion.XForms.TreeView.ItemTappedEventArgs e)
        {
            var TappedNode = e.Node as TreeViewNode;
            App.Current.MainPage.DisplayAlert("Message","Tapped Item : "+ TappedNode.Content, "Ok");
        }

}

Answer 3

首先，向syncfusion:SfTreeView添加一个ItemTapped事件：

  <syncfusion:SfTreeView x:Name="treeView" ItemTapped="treeView_ItemTapped">
                        <syncfusion:SfTreeView.Nodes>
                            <!--1st Menu-->
                            <treeviewengine:TreeViewNode Content="Menu 1">
                                //...
                            </treeviewengine:TreeViewNode>
                        </syncfusion:SfTreeView.Nodes>
                    </syncfusion:SfTreeView>

然后在 treeView_ItemTapped 中，您可以知道您正在单击哪个 node 并导航到相应的页面：

private void treeView_ItemTapped(object sender, Syncfusion.XForms.TreeView.ItemTappedEventArgs e)
{

    var TappedNode = e.Node as TreeViewNode;

    Console.WriteLine(TappedNode.Content);


    if (TappedNode.Content is "Menu 1")
    {
        Detail = new NavigationPage(new ItemsPage());
        IsPresented = false;
    }
    else if (TappedNode.Content is "Menu 1.1")
    {
        Detail = new NavigationPage(new AboutPage());
        IsPresented = false;
    }
    else if (TappedNode.Content is "Menu 1.2")
    {
        //...
    }
    else
    {
        //...
    }
}

如果你需要，我可以分享一个样本给你。如果您有任何问题，请告诉我。

如何在 Syncfusion 的 TreeView 上触发点击事件

How to fire a click event on Syncfusion's TreeView

treeview

syncfusion

xamarin.forms