Как добавить представление контента в элемент управления сегментами в формах xamarin

Question

Я должен реализовать представление контента в сегментном управлении.Это пользовательский интерфейс, который я должен реализовать

Как вы можете видеть, существует два вида контента: ИМЯ ПРОДАВЦА и ПРОДУКТ / СЕРВИС.Я следовал этому примеру и реализовал его в iOS, но в Android, это просто пустое приложение.Это мой код XAML.

  <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:SegmentedApp" x:Class="SegmentedApp.SegmentedAppPage" >

    </ContentPage>

This is the code behind
 public partial class SegmentedAppPage : ContentPage
    {
        SegmentedControl segControl;
        SegmentedControlOption scOptionOne;
        SegmentedControlOption scOptionTwo;

        Grid grid;

        View1 view1 = new View1();
        View2 view2 = new View2();

        public SegmentedAppPage()
        {
            InitializeComponent();

            segControl = new SegmentedControl();
            segControl.SelectedValue = "One";
            scOptionOne = new SegmentedControlOption();
            scOptionTwo = new SegmentedControlOption();

            scOptionOne.Text = "One";
            scOptionTwo.Text = "Two";

            segControl.Children.Add(scOptionOne);
            segControl.Children.Add(scOptionTwo);

            grid = new Grid();
            grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
            grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });

            grid.Children.Add(segControl, 0, 0);
            grid.Children.Add(view1, 0, 1);

            this.Content = grid;

            segControl.ValueChanged += SegControl_ValueChanged;
        }

        private void SegControl_ValueChanged(object sender, EventArgs e)
        {
            SegmentedControl control = sender as SegmentedControl;
            if (control.SelectedValue is "One")
            {
                grid.Children.Remove(view2);
                grid.Children.Add(view1, 0, 1);  //This line 
            }
            else if (control.SelectedValue is "Two")
            {
                grid.Children.Remove(view1);
                grid.Children.Add(view2, 0, 1); //This line 
            }
            this.Content = grid;
        }
    }

Это мой вид1

public View1()
        {
            Content = new StackLayout
            {
                BackgroundColor = Color.Green,
                Children = {
                new Label { Text = "View1" }
            }
            };
        }

Я не нашел пользовательского средства визуализации для этого.Я не знаю, как мне реализовать пользовательский рендерер для этого сегмента управления.Это ссылка для моего проекта.

Answer 1

Пост, который вы читаете, ориентирован на iOS, а не на Android.Из пользовательского рендера он, вероятно, покажет вам радио-кнопку на Android и для iOS, как описано выше.Чтобы настроить пользовательский рендерер , вам нужно написать огромный код, включая макет, стили и класс рендерера.

Чтобы сократить нашу работу, мы можем использовать SegmentedControl.FormsPlugin .Просто установите его из диспетчера пакетов Nuget на уровне решения и напишите ниже код.

SegmentAppPage.xaml file

<?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:SegmentedControl.FormsPlugin.Abstractions;assembly=SegmentedControl.FormsPlugin.Abstractions"
             x:Class="SegmentedApp.SegmentedAppPage" >

    <StackLayout x:Name="segContainer"
                 Padding="12"
                 Spacing="12">
        <controls:SegmentedControl BackgroundColor="White" SelectedTextColor="White" TintColor="#007AFF" x:Name="SegControl" ValueChanged="Handle_ValueChanged">
            <controls:SegmentedControl.Children>
                <controls:SegmentedControlOption  Text="Vender Name" />
                <controls:SegmentedControlOption Text="Product/Service" />
            </controls:SegmentedControl.Children>
        </controls:SegmentedControl>
        <StackLayout x:Name="SegContent" />
    </StackLayout>
</ContentPage>

Выше мы объявили control с помощью namespace из плагина.Вы можете добавить controls столько детей, сколько вам нужно.В нашем случае нам нужны две кнопки.

SegmentAppPage.xaml.cs файл

public partial class SegmentedAppPage : ContentPage
{
    View1 view1 = new View1();
    View2 view2 = new View2();
    public SegmentedAppPage()
    {
        InitializeComponent();
    }
    void Handle_ValueChanged(object sender, SegmentedControl.FormsPlugin.Abstractions.ValueChangedEventArgs e)
    {
        switch (e.NewValue)
        {
            case 0:
                SegContent.Children.Clear();
                SegContent.Children.Add(view1);
                break;
            case 1:
                SegContent.Children.Clear();
                SegContent.Children.Add(view2);
                break;
        }
    }
}

Экран вывода:

Answer 2

Причина проблемы

В настоящее время вы не внедрили настраиваемое средство визуализации для платформы Android и поэтому не увидите те же сегментированные элементы управления и дочерние элементы визуализации сегментированных элементов управления.

Решение вашей проблемы

В предыдущем приложении, которое я разработал, я столкнулся с похожей проблемой и использовал следующий плагин для решения проблемы на Android и iOS:

https://github.com/alexrainman/SegmentedControl

Если вы установите пакет Nuget SegmentedControl от alexrainman в свой проект и будете следовать его документации, вы получите его к работе.

Это избавит вас от необходимости реализовыватьВаши собственные пользовательские средства визуализации на обеих платформах.

Обратите внимание:

ваш метод SegControl_ValueChanged изменится на Handle_ValueChanged

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