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;
        }
    }

这是我的观点

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

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

Answer 1

您关注的帖子主要针对iOS而非Android。从自定义渲染中，它可能会向您显示与上述相同的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>

以上，我们已使用插件的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

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

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

请注意：

您的SegControl_ValueChanged方法将更改为Handle_ValueChanged

您应该删除当前用于iOS平台的自定义渲染器，以免引起混淆

如何在Xamarin表单的细分控件中添加内容视图

2 个答案: