Как реализовать раскрывающийся список Treelist в Xamarin?

Question

Я хочу реализовать что-то вроде ниже в формах Xamarin.

Я не вижу такой реализации в Objective C, поэтому не могу найти способ отрисовки и через Native.

Как мне реализовать это с помощью форм Xamarin?

https://demo.mobiscroll.com/javascript/list/display#

Answer 1

Частичное решение: после этого ваш UIPickerView из двух столбцов будет визуализирован из Xamarin.Forms ... Я обновлю этот ответ, когда найду чистый способ обновления второго столбца на основе выбора из первого

Вариант 1: Пользовательский рендерер

Я использовал документацию @ Junior Jiang , которой поделились в комментариях, чтобы вдохновить на быстрый пользовательский рендерер, который должен соответствовать вашим потребностям.

Сначала создайте элемент-заполнитель в своем проекте shared / Xamarin.Forms:

namespace samples.core.Controls
{
    public class MultiPickerControl : Xamarin.Forms.StackLayout
    {
        public MultiPickerControl()
        {
            // Just a placeholder
        }
    }
}

Затем создайте рендер в вашем проекте iOS:

[assembly: ExportRenderer(typeof(samples.core.Controls.MultiPickerControl), typeof(samples.iOS.Controls.Picker.MultiPickerRenderer))]
namespace samples.iOS.Controls.Picker
{
    public class MultiPickerRenderer : ViewRenderer
    {
        static UIPickerView pickerControl;
        static PeopleModel pickerModel = new PeopleModel(new UILabel());

        public MultiPickerRenderer()
        {
            pickerControl = new UIPickerView(
                new CGRect(
                    UIScreen.MainScreen.Bounds.X - UIScreen.MainScreen.Bounds.Width,
                    UIScreen.MainScreen.Bounds.Height - 230,
                    UIScreen.MainScreen.Bounds.Width,
                    180))
            {
                Model = pickerModel
            };
        }

        protected override void OnElementChanged(ElementChangedEventArgs<View> e)
        {
            base.OnElementChanged(e);

            if(Control != null)
            {
                Control.Add(pickerControl);
            }

            if(e.NewElement != null)
            {
                (e.NewElement as StackLayout).Children.Add(pickerControl);
            }
        }
    }
}

Вам также понадобится UIPickerViewModel, чтобы дать своему сборщику. Этот пример взят непосредственно из документации выше и может быть дословно скопирован в ваш проект iOS

    public class PeopleModel : UIPickerViewModel
    {
        public string[] names = new string[] {
            "Amy Burns",
            "Kevin Mullins",
            "Craig Dunn",
            "Joel Martinez",
            "Charles Petzold",
            "David Britch",
            "Mark McLemore",
            "Tom Opegenorth",
            "Joseph Hill",
            "Miguel De Icaza"
        };

        private UILabel personLabel;

        public PeopleModel(UILabel personLabel)
        {
            this.personLabel = personLabel;
        }

        public override nint GetComponentCount(UIPickerView pickerView)
        {
            return 2; // This determines how many columns are rendered
        }

        public override nint GetRowsInComponent(UIPickerView pickerView, nint component)
        {
            return names.Length;
        }

        public override string GetTitle(UIPickerView pickerView, nint row, nint component)
        {
            if (component == 0)
                return names[row];
            else
                return row.ToString();
        }

        public override void Selected(UIPickerView pickerView, nint row, nint component)
        {
            // You can update the possible values for column 2 here (I think)
            personLabel.Text = $"This person is: {names[pickerView.SelectedRowInComponent(0)]},\n they are number {pickerView.SelectedRowInComponent(1)}";
        }

        public override nfloat GetComponentWidth(UIPickerView picker, nint component)
        {
            if (component == 0)
                return 240f;
            else
                return 40f;
        }

        public override nfloat GetRowHeight(UIPickerView picker, nint component)
        {
            return 40f;
        }
    }

И, наконец, укажите свой элемент-заполнитель в разметке (или коде). Xamarin разрешит реализацию платформы при запуске вашего кода.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:controls="clr-namespace:samples.core.Controls;assembly=samples.core"
             x:Class="samples.core.Views.EntryMoveNextView" 
             xmlns:ctrl="clr-namespace:samples.core.Controls;assembly=samples.core">
    <ContentPage.Content>
        <StackLayout Padding="15,25">
            <controls:MultiPickerControl x:Name="MultiPicker"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Результат должен выглядеть следующим образом:

Обязательно подключитесь к доступным событиям Я добавил приведенный выше пример в репозиторий примеров на моем GitHub , если вам нравится

Вариант 2: собственный вид

Я не полностью изучил этот маршрут, но вы также можете выполнить это с помощью собственного вида ( документация ). Суть будет выглядеть примерно так:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:ios="clr-namespace:UIKit;assembly=Xamarin.iOS;targetPlatform=iOS"
             x:Class="samples.core.Views.EntryMoveNextView" 
             xmlns:ctrl="clr-namespace:samples.core.Controls;assembly=samples.core">
    <ContentPage.Content>
        <StackLayout Padding="15,25">
            <ios:UIPickerView>
                <!-- Manipulate UIPickerView Properties Here -->
            </ios:UIPickerView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Как и в приведенной выше связанной документации, обязательно укажите GetComponentCount в вашем UIPickerViewModel, чтобы указать, сколько столбцов вы будете показывать.

Удачи!