如何在 xamarin 表单的段控制中添加内容视图

Question

我必须在段控制中实现内容视图。这是我必须实现的 UI

如您所见，有两个内容视图，即供应商名称和产品/服务。我关注 this example 并在 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" }
            }
            };
        }

我没有为此找到自定义渲染器。我不知道我应该如何为这个段控件实现自定义渲染器。这是我项目的link。

Answer 1

您关注的帖子关注的是 iOS 而不是安卓。从自定义渲染中，它可能会在 android 和 iOS 上显示与上面相同的单选按钮。要设置custom renderer，您需要编写大量代码，包括布局、样式和渲染器类。

为了减少我们的工作，我们可以使用SegmentedControl.FormsPlugin。只需在解决方案级别从 Nuget 包管理器安装它并编写以下代码。

SegmentAppPage.xaml 文件

<?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>

上面我们已经通过使用插件的namespace 声明了control。您可以根据需要添加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

如果您在项目中安装 alexrainman 的 Nuget 包 SegmentedControl 并按照他的文档进行操作，您将可以使用它。

这减少了您在两个平台上实现自己的自定义渲染器的需要。

请注意：

您的 SegControl_ValueChanged 方法将更改为 Handle_ValueChanged

您应该删除当前的 iOS 平台自定义渲染器，以免造成混淆