2012-04-27 79 views
1

我的Silverlight应用程序中有一个功能区栏,并且我希望有一个图标显示图标中显示的图标数量激活。
在OS X中查看Mail图标,显示IOS应用程序图标上的未读消息或通知计数器的数量。Silverlight/xaml中的通知图标徽章

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

如何看起来:
enter image description here

没有运气得到它在功能区按钮的前面,但哦。

+0

把你的通知按钮之外的原因本身的例子:

回答

3

这可以通过几个绑定和一个可选的值转换器来完成。此示例假定您绑定到具有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> 
+0

看起来不错,但只适用于teleriks ribbon bar。你知道如何d与微软的ribbonbar一样吗? – 2014-09-02 12:23:10