title: Icon badge overlay for notifications in silverlight/xaml
body: <p>I've got a ribbon bar in my silverlight app and on one of the icons I would like for there to be a badge icon showing the number of items in the view that the icon activates.<br>
  Picture the Mail icon in OS X showing the number of unread messages or the notifications counter on an IOS app icon.</p>
  
  <p>I don't know much about xaml styles, but it seems to me I could duplicate the default style for the ribbon bar button, then add to it with some sort of red circle, and a white text that took in its value from a new property on the ribbon bar button somehow so I would be able to bind to it.</p>
  
  <p>Does anyone have an example of something like this I can start from?</p>
  
  <hr>
  
  <p>Thanks Shawn for the answer. This is what I ended up doing:<br>
  In the xaml:  </p>
  
  <pre><code>&lt;telerikRibbonBar:RadRibbonRadioButton
      Text="Expired Active   Call Factors"
      Size="Large"
      LargeImage="/CallFactorDatabase.UI;component/Images/Ribbon/Large/ExpiredActiveView.png"
      Command="{Binding ActivateViewCommand}"
      CommandParameter="ExpiredActiveView"&gt;
      &lt;Grid&gt;
          &lt;Grid.Resources&gt;
              &lt;converters:BooleanToVisibilityConverter x:Key="visibleWhenTrueConverter" VisibilityWhenTrue="Visible" VisibilityWhenFalse="Collapsed" /&gt;
          &lt;/Grid.Resources&gt;
          &lt;Grid Width="27" Height="27" Visibility="{Binding ExpiredActiveCallFactors, Converter={StaticResource visibleWhenTrueConverter}}" Margin="50,-40,0,0"&gt;
              &lt;Ellipse Fill="Black" Width="27" Height="27"/&gt;
              &lt;Ellipse Width="25" Height="25" VerticalAlignment="Center" HorizontalAlignment="Center"&gt;
                  &lt;Ellipse.Fill&gt;
                      &lt;LinearGradientBrush StartPoint="0,0" EndPoint="0,1"&gt;
                          &lt;GradientStop Color="Coral" Offset="0.0" /&gt;
                          &lt;GradientStop Color="Red" Offset="1.0" /&gt;
                      &lt;/LinearGradientBrush&gt;
                  &lt;/Ellipse.Fill&gt;
              &lt;/Ellipse&gt;
              &lt;Viewbox Width="25" Height="25" VerticalAlignment="Center" HorizontalAlignment="Center" &gt;
                  &lt;TextBlock Text="{Binding ExpiredActiveCallFactorsCount}" Foreground="White"/&gt;
              &lt;/Viewbox&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
  &lt;/telerikRibbonBar:RadRibbonRadioButton&gt;
  </code></pre>
  
  <p>How it looks:<br>
  <img src="https://i.stack.imgur.com/bXNIi.png" alt="enter image description here"></p>
  
  <p>No luck getting it in front of the ribbon button but oh well.</p>