带有自定义的BottomBar

Question

我希望我能创建一个BottomBar，让我有一个这样的图形，一个按钮比其他所有的大。我试过使用TabbedPage，但它不允许我进行定制。我尝试使用TabView，但它不允许我按下按钮插入ContentPage页面。我想要一个BottomBar，它将允许我拥有这个图形，并能够使用页面作为按钮内容。

示例

Answer 1

您可以在下面链接的中使用TabView和Action。通过不分配任何内容并将事件分配给TabTapped属性，您将显示一个按钮而不是另一个选项卡。

从NuGet：https://www.nuget.org/packages/Xamarin.CommunityToolkit/安装

添加xct：

 xmlns:xct="http://xamarin.com/schemas/2020/toolkit"

Xaml：

 <ContentPage.Resources>
    <ResourceDictionary>

        <ControlTemplate
            x:Key="TabItemTemplate">
            <Grid
                RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Image
                    Grid.Row="0"
                    VerticalOptions="Center"
                    HorizontalOptions="Center"
                    WidthRequest="24"
                    HeightRequest="24"
                    Margin="6"
                    Source="{TemplateBinding CurrentIcon}" />
                <Label
                    Grid.Row="1"
                    HorizontalOptions="Center"
                    FontSize="{TemplateBinding FontSize}"
                    Text="{TemplateBinding Text}"
                    TextColor="{TemplateBinding CurrentTextColor}" />
            </Grid>
        </ControlTemplate>

        <ControlTemplate
            x:Key="FabTabItemTemplate">
            <Grid>
                <ImageButton
                    InputTransparent="True"
                    Source="circle.png"
                    Padding="10"
                    HorizontalOptions="Center"
                    BackgroundColor="#FF0000"
                    HeightRequest="60"
                    WidthRequest="60"
                    Margin="6">
                    <ImageButton.CornerRadius>
                        <OnPlatform x:TypeArguments="x:Int32">
                            <On Platform="iOS" Value="30"/>
                            <On Platform="Android" Value="60"/>
                            <On Platform="UWP" Value="36"/>
                        </OnPlatform>
                    </ImageButton.CornerRadius>
                    <ImageButton.IsVisible>
                        <OnPlatform x:TypeArguments="x:Boolean">
                            <On Platform="Android, iOS, UWP">True</On>
                            <On Platform="macOS">False</On>
                        </OnPlatform>
                    </ImageButton.IsVisible>
                </ImageButton>
                <BoxView
                    InputTransparent="True"
                    HorizontalOptions="Center"
                    CornerRadius="30"
                    BackgroundColor="#FF0000"
                    HeightRequest="60"
                    WidthRequest="60"
                    Margin="6">
                    <BoxView.IsVisible>
                        <OnPlatform x:TypeArguments="x:Boolean">
                            <On Platform="Android, iOS, UWP">False</On>
                            <On Platform="macOS">True</On>
                        </OnPlatform>
                    </BoxView.IsVisible>
                </BoxView>
            </Grid>
        </ControlTemplate>

        <Style
            x:Key="TabItemStyle"
            TargetType="xct:TabViewItem">
            <Setter
                Property="FontSize"
                Value="12" />
            <Setter
                Property="TextColor"
                Value="#979797" />
            <Setter
                Property="TextColorSelected"
                Value="#FF0000" />
        </Style>

        <Style
            x:Key="CustomTabStyle"
            TargetType="xct:TabView">
            <Setter
                Property="IsTabTransitionEnabled"
                Value="True" />
            <Setter
                Property="TabStripHeight"
                Value="48" />
            <Setter
                Property="TabContentBackgroundColor"
                Value="#484848" />
            <Setter
                Property="TabStripPlacement"
                Value="Bottom" />
        </Style>

    </ResourceDictionary>
</ContentPage.Resources>
<Grid>
    <xct:TabView 
            Style="{StaticResource CustomTabStyle}">
        <xct:TabView.TabStripBackgroundView>
            <BoxView
                    Color="#484848"
                    CornerRadius="36, 36, 0, 0"/>
        </xct:TabView.TabStripBackgroundView>
        <xct:TabViewItem
                Text="Tab 1"  
                Icon="triangle.png"
                ControlTemplate="{StaticResource TabItemTemplate}"
                Style="{StaticResource TabItemStyle}">
            <Grid 
                    BackgroundColor="LawnGreen">
                <Label
                        HorizontalOptions="Center"
                        VerticalOptions="Center"
                        Text="TabContent1" />
            </Grid>
        </xct:TabViewItem>
        <xct:TabViewItem
                Text="Tab 2"   
                Icon="circle.png"
                ControlTemplate="{StaticResource FabTabItemTemplate}"
                Style="{StaticResource TabItemStyle}"
                TabTapped="OnFabTabTapped" />
        <xct:TabViewItem
                Text="Tab 3"  
                Icon="square.png"
                ControlTemplate="{StaticResource TabItemTemplate}"
                Style="{StaticResource TabItemStyle}">
            <Grid
                    BackgroundColor="LightCoral">
                <Label    
                        HorizontalOptions="Center"
                        VerticalOptions="Center"
                        Text="TabContent3" />
            </Grid>
        </xct:TabViewItem>
    </xct:TabView>
</Grid>

​

​

更新：

我是否有可能通过按下ContentPage中的TabViewItem并保留TabVIew来插入TabVIew

您可以将页面设置为内容视图。

<?xml version="1.0" encoding="utf-8" ?>
<ContentView
x:Class="App9.Page1"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<ContentView.Content>
    <StackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            Text="Welcome to Page1!"
            VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentView.Content>
</ContentView>

 public partial class Page1 : ContentView
{
    public Page1()
    {
        InitializeComponent();
    }
}

然后加载到TabViewItem中。

<xct:TabViewItem
            ControlTemplate="{StaticResource TabItemTemplate}"
            Icon="square.png"
            Style="{StaticResource TabItemStyle}"
            Text="Tab 3">
            <!--<Grid
                BackgroundColor="LightCoral">
                <Label
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    Text="TabContent3" />
            </Grid>-->
            <local:Page1 />
        </xct:TabViewItem>