Xamarin 形成树视图答案

【问题标题】：Xamarin forms tree viewXamarin 形成树视图
【发布时间】：2018-01-05 00:32:59
【问题描述】：

我正在尝试使用 Xamarin 表单中的嵌套数据实现树视图。看起来像这样的东西

点击每个项目会打开一个可能的子项目列表。我在网上看到的示例仅使用 ListView 处理一层数据。是否可以以 xamarin 形式实现这种数据的分层视图。

【问题讨论】：

类似HighEnergy.TreeView ?
可以的。最终使用链接中的想法使用 stacklayouts 构建我自己的树。谢谢。

【解决方案1】：

<ListView x:Name="GroupedView" GroupDisplayBinding="{Binding Header}" RowHeight="75" IsGroupingEnabled="True" HasUnevenRows="True">
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
        <StackLayout HeightRequest="{Binding height}">
          <Label Text="{Binding MenuText}"  TextColor="Green" >
            <Label.GestureRecognizers>
              <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
            </Label.GestureRecognizers>
          </Label>
          <ScrollView>
            <ListView ItemsSource="{Binding submenuitems}"  HasUnevenRows="True" IsVisible="{Binding expand}">
              <ListView.ItemTemplate>
                <DataTemplate>
                  <ViewCell>
                    <StackLayout Margin="25,5,5,5" HeightRequest="{Binding height}">
                      <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"/>
                      </StackLayout.GestureRecognizers>                      
                      <Label Text="{Binding MenuText}"  TextColor="DarkBlue"/>
                      <ScrollView>
                        <ListView ItemsSource="{Binding submenuitems_2}" HasUnevenRows="True" IsVisible="{Binding expand}">
                          <ListView.ItemTemplate>
                            <DataTemplate>
                              <ViewCell >
                                <StackLayout Margin="35,10,5,5" HeightRequest="45">
                                  <Label Text="{Binding MenuText}"  TextColor="Red"/>
                                </StackLayout>
                              </ViewCell>
                            </DataTemplate>
                          </ListView.ItemTemplate>
                        </ListView>
                      </ScrollView>
                    </StackLayout>
                  </ViewCell>
                </DataTemplate>
              </ListView.ItemTemplate>
            </ListView>
          </ScrollView>
        </StackLayout>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
  <ListView.GroupHeaderTemplate>
    <DataTemplate>
      <ViewCell>
        <StackLayout Orientation="Horizontal" Padding="5,5,5,5" BackgroundColor="#E2F5F9">
          <Button Image="{Binding StateIcon}" BackgroundColor="Transparent" BorderColor="Transparent" BorderWidth="0" Clicked="HeaderTapped" CommandParameter="{Binding .}"/>
          <Label Text="{Binding Header}" TextColor="#005569" FontSize="15" VerticalOptions="Center"/>
        </StackLayout>
      </ViewCell>
    </DataTemplate>
  </ListView.GroupHeaderTemplate>
</ListView>

【讨论】：

我认为将ScrollView 嵌套在ScrollView 或ListView 中并不是一个好主意。在生产中使用它时会有一些负面影响...

【解决方案2】：

是的。这是可能的。我通过在 StackPanels 中嵌套 StackPanels 来实现 TreeView。

您可以在此处下载代码： https://github.com/AdaptSolutions/Xamarin.Forms-TreeView

下面是一些示例代码：

     private void Render()
        {
            _SpacerBoxView.WidthRequest = IndentWidth;

            if (Children == null || Children.Count == 0)
            {
                SetExpandButtonContent(BlankImagePath);
                return;
            }

            SetExpandButtonContent(IsExpanded ? OpenImagePath : CollapseImagePath);

            foreach (var item in Children)
            {
                item.Render();
            }
        }

【讨论】：