Xamarin 社区工具包 TabView 徽章不适用于 ControlTemplate

Question

我在 TabViewItem 中使用带有 ControlTemplate 的 Xamarin 社区工具包 TabView，效果很好。我尝试向 TabViewItem 添加徽章，但没有任何反应。当我删除 ControlTemplate 时，Badge 工作正常。作为完整性测试，我提取了 XCT 示例代码并尝试将控件模板添加到工作 TabView 徽章示例并得到相同的结果，没有徽章。

我希望我只是遗漏了一些简单的东西，但我感觉 ControlTemplate 和 Badge 不兼容...

有没有人有使用 ControlTemplate 和徽章的 XCT TabViewItem 的示例？

这是来自 XCT 示例中 CustomTabsPage.xaml 的示例 xaml。我通过在第一个选项卡中添加徽章来修改它，但它不显示徽章。

<pages:BasePage>    
    <pages:BasePage.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="Test"
                        TextColor="{TemplateBinding CurrentTextColor}" />
                </Grid>
            </ControlTemplate>

            <ControlTemplate
                x:Key="FabTabItemTemplate">
                <Grid>
                    <ImageButton
                        InputTransparent="True"
                        Source="{TemplateBinding CurrentIcon}"
                        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>
    </pages:BasePage.Resources>
    <pages:BasePage.Content>
        <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}"
                    BadgeText="Test"
                    BadgeBackgroundColor="Pink"
                    BadgeBackgroundColorSelected="Red"
                    BadgeTextColor="White"
                    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>
    </pages:BasePage.Content>
</pages:BasePage>

Answer 1

您可以像下面那样在您的 ControlTemplate 中添加一个 BageView，然后删除 TabViewItem 中的 Badge 属性。另外请稍微调整徽章的位置。

    <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="Test"
                    TextColor="{TemplateBinding CurrentTextColor}" />

                <xct:BadgeView
                    Grid.Row="0" Grid.Column="1"
                    BackgroundColor="Pink"
                    TextColor="White"
                    Text="123"
                    />
            </Grid>
        </ControlTemplate>

参考资料link： https://docs.microsoft.com/en-us/xamarin/community-toolkit/views/badgeview

Xamarin 社区工具包 TabView 徽章不适用于 ControlTemplate

Xamarin Community Toolkit TabView badge does not work with ControlTemplate

xamarin.forms

xamarin.communitytoolkit