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

Question

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

如您所见，有两个内容视图，即 VENDOR NAME 和 PRODUCT/SERVICE。我按照并在 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

问题原因

您目前尚未为 android 平台实现自定义呈现器，因此将不会看到相同的分段控件和分段控件的子项呈现。

您的问题的解决方案

在我之前开发的应用程序中，我遇到了类似的问题，并使用以下插件解决了 Android 和 iOS 上的问题：

https://github.com/alexrainman/SegmentedControl

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

这样您就无需在两个平台上实现自己的自定义渲染器。

请注意：

您的 SegControl_ValueChanged 方法将更改为 Handle_ValueChanged

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

Answer 2

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

为了减少我们的工作，我们可以使用 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 个 children 个。在我们的例子中，我们需要两个按钮。

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

输出屏幕：

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

How to add content view in segment control in xamarin forms

xamarin

xamarin.forms

uisegmentedcontrol