Add unread notification to wpf microsoft ribbonbutton image - wpf

Question

I want to ask the same question as Coxy: I want to show number of unread items on top of the image of an RibbonButton.
Example:
Can I do it without modifying a copy of the entire template? The reason that I am asking the same question again is that I am using the Microsoft Ribbon control and the solution given from Coxy question, can only be applied to the Ribbon control from Telerik.

Answer 1

I'm adding this in an answer because it's too long to put in a comment.
I went to the Microsoft Download site & downloaded the Ribbon control's source from here. The complete template with all of the triggers are in there. I won't paste any of it in here as it's copyrighted, but anybody can download it and install it. I think.
The installer installs a zip file with the source in the C:\Program Files (x86)\MicrosoftRibbonForWPF folder. I extracted the zip file into a VS project folder.
The template I'm looking at is in the v4.0\Themes\Generic.xaml file.
Those bad triggers do indeed reference the same property. It's the HighContrast property of the SystemParameters2.Current static object.
You can probably put together a custom template for your application that does not even use those triggers. At least, that's what I would do.

Answer 2

Martin Andersen is right: it is currently not possible to create a ribbon button in XAML, right-click it in the Document Outline window, select Edit template and create a copy of it. VS will display the following error message and no template is generated:
If you do the same thing in Blend, the same error message occurs, but a control template for the ribbon button will actually be generated. Unfortunately, this template is erroneous. It contains several triggers whose Binding bind to (0). Here is an example of such an erroneous trigger.
<DataTrigger Binding="{Binding (0)}" Value="True">
<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
<Setter Property="Background" TargetName="OuterBorder" Value="Transparent"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="Transparent"/>
<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
</DataTrigger>
This issue was also reported to Microsoft: https://connect.microsoft.com/VisualStudio/feedback/details/794891/problems-styling-wpf-4-5-ribbon-control
They provide the default control templates as attachments to this issue but unfortunately I cannot download them. The resulting file is always empty (zero kilobyte). Can anybody of you download it?
Proposed Solution
My current advise is to encapsulate the button within another custom control that derives from ContentControl and handles all the notification bubble. You then can set the button as the content of this new control. I'm currently working on an example - I will update this post when I find something useful.
The erroneous control template
Here is the complete erroneous control template of RibbonButton:
<ControlTemplate x:Key="RibbonButtonWithNotificationStyle" TargetType="{x:Type RibbonButton}">
<Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" SnapsToDevicePixels="True">
<Border x:Name="InnerBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Padding="{TemplateBinding Padding}">
<StackPanel x:Name="StackPanel">
<Image x:Name="PART_Image" RenderOptions.BitmapScalingMode="NearestNeighbor" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Height="32" Margin="{DynamicResource {ComponentResourceKey ResourceId=LargeImageMargin, TypeInTargetAssembly={x:Type Ribbon}}}" Source="{TemplateBinding LargeImageSource}" VerticalAlignment="Center" Width="32"/>
<Grid x:Name="Grid" HorizontalAlignment="Center" VerticalAlignment="Center">
<RibbonTwoLineText x:Name="TwoLineText" HorizontalAlignment="Center" LineStackingStrategy="BlockLineHeight" LineHeight="13" Margin="1,1,1,0" TextAlignment="Center" Text="{TemplateBinding Label}" VerticalAlignment="Top"/>
</Grid>
</StackPanel>
</Border>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Large">
<Setter Property="MinWidth" Value="44"/>
<Setter Property="Height" Value="66"/>
<Setter Property="MinHeight" TargetName="Grid" Value="26"/>
<Setter Property="RibbonTwoLineText.HasTwoLines" TargetName="TwoLineText" Value="True"/>
</DataTrigger>
<DataTrigger Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Small">
<Setter Property="Height" Value="22"/>
<Setter Property="Margin" TargetName="PART_Image" Value="1,0"/>
<Setter Property="Source" TargetName="PART_Image" Value="{Binding SmallImageSource, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="Width" TargetName="PART_Image" Value="16"/>
<Setter Property="Height" TargetName="PART_Image" Value="16"/>
<Setter Property="HorizontalAlignment" TargetName="TwoLineText" Value="Left"/>
<Setter Property="Margin" TargetName="TwoLineText" Value="1"/>
<Setter Property="Orientation" TargetName="StackPanel" Value="Horizontal"/>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Small"/>
<Condition Binding="{Binding IsInQuickAccessToolBar, RelativeSource={RelativeSource Self}}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="Height" Value="Auto"/>
</MultiDataTrigger>
<DataTrigger Binding="{Binding ControlSizeDefinition.IsLabelVisible, RelativeSource={RelativeSource Self}}" Value="False">
<Setter Property="Visibility" TargetName="TwoLineText" Value="Collapsed"/>
</DataTrigger>
<DataTrigger Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Collapsed">
<Setter Property="Visibility" TargetName="PART_Image" Value="Collapsed"/>
</DataTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="OuterBorder" Value="{Binding MouseOverBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding MouseOverBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="BorderBrush" TargetName="InnerBorder" Value="#80FFFFFF"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="Background" TargetName="OuterBorder" Value="{Binding FocusedBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding FocusedBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="BorderBrush" TargetName="InnerBorder" Value="#80FFFFFF"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="OuterBorder" Value="{Binding PressedBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding PressedBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
</Trigger>
<Trigger Property="IsInControlGroup" Value="True">
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding Ribbon.BorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="BorderThickness" TargetName="OuterBorder" Value="0,0,1,0"/>
<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
<Setter Property="CornerRadius" TargetName="InnerBorder" Value="0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="PART_Image" Value="0.5"/>
<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="#FF9E9E9E"/>
</Trigger>
<DataTrigger Binding="{Binding (0)}" Value="True">
<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
<Setter Property="Background" TargetName="OuterBorder" Value="Transparent"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="Transparent"/>
<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource TemplatedParent}}" Value="True"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource TemplatedParent}}" Value="True"/>
<Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="False"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsDropDownOpen, FallbackValue=false, RelativeSource={RelativeSource TemplatedParent}}" Value="True"/>
<Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="False"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="Background" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
<Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsKeyboardFocused, RelativeSource={RelativeSource Self}}" Value="True"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="Background" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
<Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="True"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="Background" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsInControlGroup, RelativeSource={RelativeSource Self}}" Value="True"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightLightBrushKey}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="False"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>