如何使用选项卡式控件将按钮添加到 Xamarin 屏幕的底部？

Question

我故意用自然语言来描述它。

我正在使用 Visal Studio 2022，Xamarin Forms 5.0.0.2244。

我想在 Xamarin（在 Shell 应用程序中）中创建一个屏幕，其中一个选项卡式视图填充了大部分页面，但底部有按钮或导航栏。

我可以像这样创建一个 TabbedPage：

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:Waiter.Xmrn.ViewModels.TableParties"
        x:Class="..."
        Title="{Binding Title}"
        BindingContext="{Binding ...}" >
</TabbedPage>

并将标签页添加为 ContentPage 的

但这会导致选项卡控件占据整个屏幕，没有任何空间容纳额外的底部绑定控件，并且外壳导航 TabBar 也不可见。如果我将底部控件添加到标签页，它们将成为标签页的一部分并与它们一起滑动（在所有标签页上重复），这看起来很傻。

我发现了这个 Xamarin.Forms 更改请求（仅适用于 Android）：https://github.com/xamarin/Xamarin.Forms/issues/1675 如果我按照此操作，标签页标题将显示在屏幕底部，并且还会显示 shell 导航 TabBar - 标签页标题和 TabBar 按钮相互叠加。

我需要摆脱壳牌吗？还是标签页？还是两者兼有？

Answer 1

是的，你可以使用TabView来实现这个功能。

例如，要实现如下功能，我们可以使用如下代码：

    <xct:TabView
            TabStripPlacement="Bottom"
            TabStripBackgroundColor="Blue"
            TabStripHeight="60"
            TabIndicatorColor="Yellow"
            TabContentBackgroundColor="Yellow">

            <!-- First TabViewItem -->

            <xct:TabViewItem
                Text="Tab 2"   
                Icon="circle.png"
                ControlTemplate="{StaticResource FabTabItemTemplate}"
                Style="{StaticResource TabItemStyle}"
                TabTapped="OnFabTabTapped" />

            <!-- Third TabViewItem -->
    </xct:TabView>

更多内容可以查看文章Beautiful Tabs with Xamarin Community Toolkit TabView。

此外，您还可以使用 Shell 来实现这一点。

关于这个，你可以查看线程Xamarin Bottom Custom Tab Bar。

Bhuwancb99 已在最后一条评论中发布了示例代码。