Silverlight/xaml中的通知圖標徽章

Question

我的Silverlight應用程序中有一個功能區欄，並且我希望有一個圖標顯示圖標中顯示的圖標數量激活。
在OS X中查看Mail圖標，顯示IOS應用程序圖標上的未讀消息或通知計數器的數量。

我對xaml樣式知之甚少，但在我看來，我可以複製功能區欄按鈕的默認樣式，然後添加一些紅色圓圈，並將白色文本添加到其中以某種方式來自功能區欄按鈕上的新屬性的值，以便我能夠綁定到它。

有沒有人有這樣的例子，我可以從頭開始？

---

謝謝肖恩的答案。這是我落得這樣做：
在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

這可以通過幾個綁定和一個可選的值轉換器來完成。此示例假定您綁定到具有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 
} 

我看到了可選的」轉換器是因爲你還可以使用互動DataTriggers像這樣

<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>