Xamarin Forms - 标签页视图？

Question

我需要创建一个弹出窗口，在其中有一些选项卡，每个选项卡都包含一个列表视图。我知道有一个TabbedPage，但我需要一个“TabbedView”，以便我可以使用Xlabs PopupLayout构建我的弹出窗口。在Xamarin Forms中，我该如何实现这个功能？

- Ilia Stoilov

---

我们还需要一个选项卡视图。TabbedPage 很垃圾，因为它不允许有页眉/页脚（即必须占据整个屏幕），而 CarouselView 在每个平台上都没有 TabbedPage 的相同功能。所需的是将这两个控件组合在一起，创建一个 TabbedView，如您所说。 - Christian Findlay

Answer 1

请查看TabView插件：https://www.nuget.org/packages/Xam.Plugin.TabView。

我之前的项目也遇到了类似的问题，于是我决定从我的实现中创建一个插件。

我还在这里包含了一个使用TabView的示例项目：https://github.com/chaosifier/TabView，请查看。

该插件也可在NuGet中获取。在软件包管理控制台中输入以下命令，即可安装最新版本的插件到您的项目中：

PM> Install-Package Xam.Plugin.TabView

由于TabView继承自ContentView，您可以像使用Xamarin中的其他视图一样使用它。

以下是一个示例：

var tabView = new TabViewControl(new List<TabItem>()
{
    new TabItem(
        "Tab 1",
        new Image{
            Source = ImageSource.FromUri(new Uri("https://assets-cdn.github.com/images/modules/logos_page/Octocat.png")),
            Aspect = Aspect.AspectFit,
            BackgroundColor = Color.LightBlue
        }),
    new TabItem(
        "Tab 2",
        new StackLayout()
        {
            Children =
            {
                new Label(){
                    FontSize = 18,
                    Text = "This is a label control.",
                    TextColor = Color.Green,
                }
            },
            BackgroundColor = Color.LightGray,
            Padding = 10
        }),
    new TabItem(
        "Tab 3",
        new StackLayout()
        {
            Children =
            {
                new ListView(){
                    ItemsSource = new string[] { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6" }
                }
            },
            BackgroundColor = Color.LightSalmon,
            Padding = 10
        })
});
tabView.VerticalOptions = LayoutOptions.StartAndExpand;
this.Content = tabView;

- chaosifier

---

这些选项卡是否可以像选项卡页面一样滑动？ - Himanshu Dwivedi

如果我有更多的选项卡，比如7个，你的插件是否包含类似水平滚动条的功能？ - Bartek Chyży

Answer 2

您可以自己创建一个自定义控件。

例如，您可以创建一个包含2行3列的网格视图。

在第一行中，您可以设置按钮并将每个按钮添加到每个列中。此外，您还可以将RowHeight设置为auto或所需大小。

在第二行中，您可以具有一个ContentView，并将其RowHeight设置为*（以填充剩余空间）。同时，您应该将GridSpan设置为3列，以便它填充网格上可用的所有宽度。

然后，当您单击按钮时，只需将ContentView视图设置为特定选项卡所需的内容即可。您还可以在更改内容之前进行动画处理。

希望这能帮到您。

- Rui Marinho

---

是的，我已经这样做了，但我想看看是否还有其他选项。无论如何，感谢您的回答。 :) - Ilia Stoilov

@Ilia Stoilov，你有没有找到更好的解决方案？ - priya_d

很遗憾，不行。 - Ilia Stoilov