silverlight - Silverlight/xaml 中通知的图标徽章覆盖

Question

我的 silverlight 应用程序中有一个功能区栏，我希望在其中一个图标上有一个徽章图标，显示图标激活的 View 中的项目数。
想象一下 OS X 中的 Mail 图标，显示未读消息的数量或 IOS 应用程序图标上的通知计数器。

我对 xaml 样式了解不多，但在我看来，我可以复制功能区栏按钮的默认样式，然后在其中添加某种红色圆圈和一个具有其值的白色文本以某种方式从功能区栏按钮上的新属性中获取，以便我能够绑定(bind)到它。

有没有人可以举出类似的例子？

---

感谢肖恩的回答。这就是我最终做的:
在 xaml 中:

<telerikRibbonBar:RadRibbonRadioButton
    Text="Expired Active   Call Factors"
    Size="Large"
    LargeImage="/CallFactorDatabase.UI;component/Images/Ribbon/Large/ExpiredActiveView.png"
    Command="{Binding ActivateViewCommand}"
    CommandParameter="ExpiredActiveView">
    <Grid>
        <Grid.Resources>
            <converters:BooleanToVisibilityConverter x:Key="visibleWhenTrueConverter" VisibilityWhenTrue="Visible" VisibilityWhenFalse="Collapsed" />
        </Grid.Resources>
        <Grid Width="27" Height="27" Visibility="{Binding ExpiredActiveCallFactors, Converter={StaticResource visibleWhenTrueConverter}}" Margin="50,-40,0,0">
            <Ellipse Fill="Black" Width="27" Height="27"/>
            <Ellipse Width="25" Height="25" VerticalAlignment="Center" HorizontalAlignment="Center">
                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="Coral" Offset="0.0" />
                        <GradientStop Color="Red" Offset="1.0" />
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Viewbox Width="25" Height="25" VerticalAlignment="Center" HorizontalAlignment="Center" >
                <TextBlock Text="{Binding ExpiredActiveCallFactorsCount}" Foreground="White"/>
            </Viewbox>
        </Grid>
    </Grid>
</telerikRibbonBar:RadRibbonRadioButton>

外观:

在功能区按钮前面没有运气，但是哦。

Answer 1

这可以通过一些绑定(bind)和一个可选的值转换器来完成。此示例假定您绑定(bind)到具有 Items 属性的模型，并且该属性的类型为 ObservableCollection，以便在添加/删除项目时，集合的 Count 属性将触发属性更改。

<Grid>
    <Grid.Resources>
        <local:CountToVisbilityConverter x:Key="CountToVis"/>
    </Grid.Resources>
    ....
    <Grid Width="25" Height="25" Visibility="{Binding Items.Count, Converter=CountToVis}">
        <Ellipse Fill="Red" Width="25" Height="25"/>
        <ViewBox Width="25" Height="25">
            <TextBlock Text="{Binding Itmes.Count}" Foreground="White"/>
        </Viewbox>
    </Grid>
</Grid>

还有值转换器:

public class CountToVisibilityConverter : IValueConverter
{

    #region IValueConverter Members

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if(value == null) return Visibility.Collapsed;

        int count = System.Convert.ToInt32(value);
        return count == 0 ? Visibility.Collapsed : Visibility.Visible;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    #endregion
}

我看到可选的“转换器的原因是因为你也可以像这样使用交互数据触发器

    <Grid x:Name="UnreadNotification" Width="25" Height="25">
        <Ellipse Fill="Red" Width="25" Height="25"/>
        <ViewBox Width="25" Height="25">
            <TextBlock Text="{Binding Itmes.Count}" Foreground="White"/>
        </Viewbox>
    </Grid>
    <i:Interaction.Triggers>
        <ei:DataTrigger Binding="{Binding Items.Count, Comparison="Equal"
                    Value="0">
            <ei:ChangePropertyAction PropertyName="IsEnabled"
                                 Value="True"
                                 TargetName="UnreadNotification" />
        </ei:DataTrigger>
    </i:Interaction.Triggers>