Question

是否有机会将徽章计数放到Windows 10上的AppBarButton控件中，因为您可以在Android上执行此操作 - 例如How to display count of notifications in app launcher icon

如果没有，任何想法告诉用户一些新信息（如新消息）是什么好习惯？

谢谢！

http://i.stack.imgur.com/WjHNt.png

Answer 1

如果您只想在UWP应用中创建一个控件，就像第二张图片一样，您可以按照以下方式进行操作：

<Button Background="Transparent" Click="OnClick" HorizontalAlignment="Center">
    <RelativePanel>
        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="30" Text="&#xE90A;"/>
        <Border Background="Red" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignRightWithPanel="True">
            <TextBlock x:Name="count" Foreground="White" Text="{x:Bind tb.Text,Mode=OneWay}" FontSize="12" />
        </Border>
    </RelativePanel>
</Button>
<TextBox VerticalAlignment="Bottom" x:Name="tb" />

在此示例中，我绑定了TextBlock名为＆＃34; count＆＃34;的文本。到TextBox，我们可以更改此值。

但我们可以将其创建为UserControl，以便我们可以将其重复使用。我们可以使用DependencyProperty来公开我们想要使用的属性。例如：

<UserControl
    x:Class="BadgeCountApp.MyUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BadgeCountApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Button Background="Transparent" HorizontalAlignment="Center">
        <RelativePanel>
            <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="30" x:Name="text" Text="{x:Bind SymbText,Mode=OneWay}"/>
            <Border Background="Red" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignRightWithPanel="True">
                <TextBlock x:Name="count" Foreground="White" FontSize="12" Text="{x:Bind SymbCount,Mode=OneWay}" Visibility="Collapsed"/>
            </Border>
        </RelativePanel>
    </Button>

</UserControl>

代码背后的代码：

public sealed partial class MyUserControl : UserControl
{
    public MyUserControl()
    {
        this.InitializeComponent();
    }

    public static readonly DependencyProperty SymbTextProperty = DependencyProperty.Register("SymbText", typeof(string), typeof(MyUserControl), new PropertyMetadata(string.Empty));

    public static readonly DependencyProperty SymbCountProperty = DependencyProperty.Register("SymbCount", typeof(int), typeof(MyUserControl), new PropertyMetadata(0, new PropertyChangedCallback(ChangedCallback)));

    private static void ChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        MyUserControl muc = (MyUserControl)d;
        int value = (int)e.NewValue;

        if (value == 0)
        {
            muc.count.Visibility = Visibility.Collapsed;
        }
        else
        {
            muc.count.Visibility = Visibility.Visible;
        }
    }

    public string SymbText
    {
        get { return (string)GetValue(SymbTextProperty); }
        set { SetValue(SymbTextProperty, value); }
    }

    public int SymbCount
    {
        get{ return (int)GetValue(SymbCountProperty);}
        set{ SetValue(SymbCountProperty, value);}
    }

}

现在您可以直接在其他地方使用此控件：

<local:MyUserControl x:Name="user" SymbText="&#xE90A;" Tapped="OnTapped"/>

代码背后的代码：

private void OnTapped(object sender, TappedRoutedEventArgs e)
{
    if (user.SymbCount == 0)
        user.SymbCount = 3;
    else
        user.SymbCount = 0;
}

以下是此UserControl的屏幕截图：

Windows 10移动AppBar按钮 - 徽章数

1 个答案: