Changing the opacity of RadioButton text when its disabled - wpf

I am trying to change the opacity of the RadioButton's Content which is some Text presumably a TextBlock. Problem is with this current style it changes the opacity of the Text just fine but it doesn't show the actual radio button itself. Please help.
<UserControl.Resources>
<Style x:Key="RadioLabel" TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<TextBlock x:Name="RadioLabel"
Text="{TemplateBinding Content}"
Background="{x:Null}" />
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="RadioLabel"
Property="Background"
Value="Transparent"/>
<Setter TargetName="RadioLabel"
Property="Opacity"
Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
This is my RadioButton
<RadioButton x:Name="rbn1" Style="{StaticResource RadioLabel}" GroupName="rbnApplication"
IsChecked="{Binding Path=CurrentApplicationType,
Converter={StaticResource EnumComparisonConverter},
ConverterParameter={x:Static utils:ApplicationType.QXManagerRegulatory}}"
IsEnabled="{Binding Path=CurrentApplicationType,
Converter={StaticResource EnumComparisonConverter},
ConverterParameter={x:Static utils:ApplicationType.QXManagerRegulatory}}"
Content="QX Manager Regulatory"/>

In general the easiest way to achieve this is to declare a RadioButton (or any other control) and then in the properties tab go to the Miscellaneous -> Template, left-click on the little square button on the right and choose "Convert to local value". This will expand the full existing ControlTemplate, which you can then edit and/or add triggers to etc:
<RadioButton x:Name="template" >
<RadioButton.Template>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="radioButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="100" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,1,2,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid x:Name="markGrid" Margin="2">
<Ellipse x:Name="optionMark" Fill="#FF212121" MinWidth="6" MinHeight="6" Opacity="0"/>
</Grid>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="True">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="4,-1,0,0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFF3F9FF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF5593FF"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFE6E6E6"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FFBCBCBC"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF707070"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFD9ECFF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF3C77DD"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Opacity" TargetName="optionMark" Value="1"/>
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter Property="Opacity" TargetName="optionMark" Value="0.56"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</RadioButton.Template>
</RadioButton>

This is because you're setting ControlTemplate to your RadioButton. Which changes your whole control. Instead you need to use ContentTemplate to change your Content.
Below Style should work for your case.
<Style x:Key="RadioLabel" TargetType="{x:Type RadioButton}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type RadioButton}">
<TextBlock x:Name="RadioLabel"
Text="{TemplateBinding Content}"
Background="{x:Null}" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsChecked,
RelativeSource={RelativeSource Mode=TemplatedParent}}"
Value="False">
<Setter TargetName="RadioLabel"
Property="Background"
Value="Transparent"/>
<Setter TargetName="RadioLabel"
Property="Opacity"
Value="0.5"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>

Related

how to override selected radiobutton background in wpf

i have some problem with wpf radio button :
first of all i should add border to radio button so instead of wrapping radiobutton in border
i decide to override radiobutton default template , something like below code :
<Style TargetType="RadioButton" x:Key="navigationButton" >
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border Style="{StaticResource navigationButtonBorder}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
so now i should add background color to this radiobutton when is checked but because of
overriding ,background color should apply on border(when radiobutton is checked)
but i dont know how should i do that .
It is very simple. Just give a name to the border and implement Triggers on the ControlTemplate.
FYI, check below code snippet (modified your code)
<Style TargetType="RadioButton" x:Key="NavigationButton">
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border x:Name="MainBorder" Background="Red" Style="{StaticResource navigationButtonBorder}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="MainBorder" Property="Background" Value="Black"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Give a try and let us know in case if any further issues.
I advise you to separate the definition of the template and the change of colors depending on the state.
Since the template can be general, and the desired colors, in different places of the application, may be required different.
An example based on the default template:
<Window.Resources>
<ControlTemplate x:Key="RadioButtonControlTemplate1" TargetType="{x:Type RadioButton}">
<Border x:Name="radioButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid x:Name="templateRoot" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="{Binding BorderBrush, ElementName=radioButtonBorder}"
BorderThickness="{Binding BorderThickness, ElementName=radioButtonBorder}"
CornerRadius="100"
HorizontalAlignment="{Binding HorizontalAlignment, ElementName=radioButtonBorder}"
Margin="1,1,2,1"
VerticalAlignment="{Binding VerticalAlignment, ElementName=radioButtonBorder}">
<Grid x:Name="markGrid" Margin="2">
<Ellipse x:Name="optionMark" Fill="#FF212121" MinWidth="6" MinHeight="6" Opacity="0"/>
</Grid>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="True">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True"
Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="4,-1,0,0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFF3F9FF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF5593FF"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFE6E6E6"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FFBCBCBC"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF707070"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFD9ECFF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF3C77DD"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Opacity" TargetName="optionMark" Value="1"/>
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter Property="Opacity" TargetName="optionMark" Value="0.56"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<StackPanel>
<FrameworkElement.Resources>
<Style TargetType="RadioButton">
<Setter Property="Template" Value="{DynamicResource RadioButtonControlTemplate1}"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="Foreground" Value="{Binding BorderBrush, RelativeSource={RelativeSource Self}}"/>
<Setter Property="Background" Value="#FFEE9090"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderBrush" Value="Green"/>
<Setter Property="Background" Value="LightGreen"/>
</Trigger>
</Style.Triggers>
</Style>
</FrameworkElement.Resources>
<RadioButton Content="First"/>
<RadioButton Content="Second"/>
</StackPanel>

WPF: How to pass Content property between styles and ControlTemplate

I'm trying to switch between two styles in WPF according to a property.
To switch between the styles I used ControlTemplate for each style and one style with triggers that switching between the ControlTemplates.
My problem is that I have a ContentPresenter inside each basic style and I cannot set it from outside (from the usages).
This is my code in xaml:
<Style x:Key="SecondaryButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource GrayButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Foreground" Value="#FF494F5A"/>
<Setter Property="FontSize" Value="24.5" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinHeight" Value="76" />
<Setter Property="Padding" Value="10,0,10,0"/>
<Setter Property="Effect" Value="{StaticResource ButtonEffect}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" CornerRadius="5,5,5,5"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<Grid>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SecondaryButtonWithArrowStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource GrayButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Foreground" Value="#FF494F5A"/>
<Setter Property="FontSize" Value="24.5" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinHeight" Value="76" />
<Setter Property="Padding" Value="20,0"/>
<Setter Property="Effect" Value="{StaticResource ButtonEffect}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" CornerRadius="5,32,32,5"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12,4,0,4">
<Path Data="F1M46,23.478C46,10.512 35.704,0 23,0 10.299,0 0,10.512 0,23.478 0,36.44 10.299,46.951 23,46.951 35.704,46.951 46,36.44 46,23.478"
Fill="#FF646A74" x:Name="Path"/>
<Path Data="F1M12.504,9.03L9.823,9.028 5.15,9.025 12.273,1.903 10.369,0 1.903,8.466 0,10.369 10.369,20.739 12.273,18.836 5.144,11.706 9.822,11.709 12.502,11.711 20.912,11.715 20.913,9.035z"
Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="NormalButton">
<Button Style="{StaticResource SecondaryButtonStyle}" />
</ControlTemplate>
<ControlTemplate x:Key="ArrowButton">
<Button Style="{StaticResource SecondaryButtonWithArrowStyle}" />
</ControlTemplate>
<Style x:Key="SwitchButtonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Template" Value="{StaticResource NormalButton}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Template" Value="{StaticResource ArrowButton}" />
</Trigger>
</Style.Triggers>
</Style>
The usage is:
<Button Style="{StaticResource SwitchButtonStyle}" Content="Back" HorizontalAlignment="Center" VerticalAlignment="Center" />
How can I make the button to take the Content="Back"?
Thank You!
Anna.
I found a solution for this:
I changed the styles to ControlTemplate and created a basic style that will be the BasedOn style of the main style with the triggers.
The new code is:
<Style x:Key="BaseButtonWithArrowStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource GrayButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Foreground" Value="#FF494F5A"/>
<Setter Property="FontSize" Value="24.5" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinHeight" Value="76" />
<Setter Property="Effect" Value="{StaticResource ButtonEffect}"/>
</Style>
<ControlTemplate x:Key="NormalButton" TargetType="Button">
<Border Background="{TemplateBinding Background}" CornerRadius="5"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12,0,0,0">
<Path Data="F1M46,23.478C46,10.512 35.704,0 23,0 10.299,0 0,10.512 0,23.478 0,36.44 10.299,46.951 23,46.951 35.704,46.951 46,36.44 46,23.478"
Fill="#FF646A74" x:Name="Path"/>
<Path Data="F1M12.504,9.03L9.823,9.028 5.15,9.025 12.273,1.903 10.369,0 1.903,8.466 0,10.369 10.369,20.739 12.273,18.836 5.144,11.706 9.822,11.709 12.502,11.711 20.912,11.715 20.913,9.035z"
Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ArrowButton" TargetType="Button">
<Border Background="{TemplateBinding Background}" CornerRadius="5,32,32,5"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12,4,0,4">
<Path Data="F1M46,23.478C46,10.512 35.704,0 23,0 10.299,0 0,10.512 0,23.478 0,36.44 10.299,46.951 23,46.951 35.704,46.951 46,36.44 46,23.478"
Fill="#FF646A74" x:Name="Path"/>
<Path Data="F1M12.504,9.03L9.823,9.028 5.15,9.025 12.273,1.903 10.369,0 1.903,8.466 0,10.369 10.369,20.739 12.273,18.836 5.144,11.706 9.822,11.709 12.502,11.711 20.912,11.715 20.913,9.035z"
Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Viewbox Width="55" Height="55" Grid.Column="2">
<Grid HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,4,4,4" RenderTransformOrigin="0.5,0.5">
<Path Data="F1M53.214,40.132C54.801,36.559 55.708,32.607 55.708,28.435 55.708,12.757 43.212,0 27.854,0 12.495,0 0,12.757 0,28.435 0,44.116 12.495,56.873 27.854,56.873 32.587,56.873 37.042,55.653 40.95,53.521"
Fill="White"/>
<Path Data="F1M46.556,38.537L45.676,39.265 45.723,46.108 28.875,46.108 28.875,44.318 28.221,44.594 28.221,42.656 46.556,35.641z M27.854,0C23.121,0,18.666,1.221,14.759,3.353L24.395,25.827C33.549,28.967 39.062,26.315 40.16,25.926 41.325,25.514 42.419,25.702 43.139,25.904 44.271,26.215 46.152,28.391 45.442,29.216 41.664,33.584 30.583,38.32 28.825,38.204 27.066,38.092 23.007,38.156 23.007,38.156L22.645,39.563 14.373,41.318C14.373,41.318 13.041,38.472 12.885,37.841 12.728,37.209 13.26,36.858 13.26,36.858 12.355,36.334 11.869,33.725 11.626,31.787L9.378,32.791 2.494,16.743C0.906,20.314 0,24.267 0,28.439 0,44.117 12.496,56.873 27.854,56.873 43.213,56.873 55.708,44.117 55.708,28.439 55.708,12.759 43.213,0 27.854,0"
Fill="#FFFF8241" RenderTransformOrigin="0.5,0.5" >
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="1" ScaleX="-1"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Viewbox>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="SwitchButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonWithArrowStyle}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Template" Value="{StaticResource NormalButton}" />
<Setter Property="Padding" Value="42,0,70,0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Template" Value="{StaticResource ArrowButton}" />
<Setter Property="Padding" Value="20,0"/>
</Trigger>
</Style.Triggers>
</Style>
And now the content of the button changing according to the Content property in:
<Button Style="{StaticResource SwitchButtonStyle}" Content="Back" HorizontalAlignment="Center" VerticalAlignment="Center" />

Content alignment for the menu item in WPF does not work

I am trying to align the text on the menu item to center. I have already created the code for template, style to take care of other things. Sadly, content alignment is not working, no matter where I declare it. Clearly, I have added some unnecessary tag somewhere that I can't seem to find. Kindly help me find the problem. Below is the full code used.
XAML markup:
<Menu x:Name="MenuBar" Height="40" VerticalAlignment="Top" Background="#ffFF7A00" Loaded="MenuBar_Loaded">
<MenuItem x:Name="HomeMenuItem" Template="{DynamicResource MenuItemTemplate}" Click="HomeMenuItem_Click" Panel.ZIndex="1" Style="{DynamicResource MenuStyle}" >
<MenuItem.Header>
<TextBlock Text="Home" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</MenuItem.Header>
</MenuItem>
Style
<Style x:Name="MenuStyle" x:Key="MenuStyle" TargetType="{x:Type MenuItem}">
<Setter Property="Foreground" Value="#ffffffff"/>
<Setter Property="BorderBrush" Value="#ffffffff"/>
<Setter Property="BorderThickness" Value="0,0,1,0"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Trebuchet MS"/>
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Background" Value="#FFFF7A00"/>
<Setter Property="Focusable" Value="True"/>
<Setter Property="IsTabStop" Value="True"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#FF0081A7"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#FF0081A7"/>
</Trigger>
</Style.Triggers>
</Style>
Control template
<ControlTemplate x:Name="MenuItemTemplate" x:Key="MenuItemTemplate" TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
<Path x:Name="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="#FF212121" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" TargetName="templateRoot" Value="#0026A0DA"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
<Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I guess there is a conflicting tag that might be causing this, but I can't seem to find which one. I have already tried using content alignment in hover trigger too, but that didn't work either.
Adding HorizontalAlignment="Center" to the Grid present in ControlTemplate(inside Border) will solve your problem.
<ControlTemplate x:Name="MenuItemTemplate" x:Key="MenuItemTemplate" TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
You need to supply a HeaderTemplate for the MenuItem style. e.g.
<ContextMenu>
<ContextMenu.Resources>
<DataTemplate x:Key="HeaderControlTemplate">
<TextBlock HorizontalAlignment="Center" Text="{Binding}"/>
</DataTemplate>
</ContextMenu.Resources>
<MenuItem Header="Menu1" Template="{StaticResource MenuTemplate}" HeaderTemplate="{StaticResource HeaderControlTemplate}"/>
<MenuItem Header="Menu Item 2" Template="{StaticResource MenuTemplate}" HeaderTemplate="{StaticResource HeaderControlTemplate}"/>
</ContextMenu>

WPF - MenuItem highlighting has unwanted secondary highlight

I have a ContextMenu on a Button and when shown it display a list of menu items, which is fine. If I move the mouse over an item in the menu, it highlights, but I also get a secondary highlight when I hover over and around the text, see the pictures below.
How do I remove this? I've tried all types of styles, triggers and various other templates to remove the highlighting, but can't seem to make any of the work or display correctly.
There is nothing special about my context menu button either, see wpf below.
<Button.ContextMenu>
<ContextMenu ItemsSource="{Binding SelectedTreeItem.MetaTargets}">
<ContextMenu.ItemTemplate>
<DataTemplate >
<MenuItem Header="{Binding Name}"
Command="{Binding Path=SelectedTreeItem.AddTargetCommandRelay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"
CommandParameter="{Binding}"
/>
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu>
</Button.ContextMenu>
Ideally I want it to look like this when highlighted, regardless of where the mouse is within the confines of the highlighted item, see pic below.
Just remove Property="IsHighlighted" trigger from default MenuItem template:
<ControlTemplate TargetType="{x:Type MenuItem}">
<Grid SnapsToDevicePixels="True">
<Rectangle x:Name="Bg" Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
<Rectangle x:Name="InnerBorder" Margin="1" RadiusY="2" RadiusX="2"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
<ColumnDefinition Width="4"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="37"/>
<ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
<ColumnDefinition Width="17"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" Margin="1" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
<Border x:Name="GlyphPanel" BorderBrush="#FFCDD3E6" BorderThickness="1" Background="#FFE6EFF4" CornerRadius="3" Height="22" Margin="1" Visibility="Hidden" Width="22">
<Path x:Name="Glyph" Data="M0,5.1L1.7,5.2 3.4,7.1 8,0.4 9.2,0 3.3,10.8z" Fill="#FF0C12A1" FlowDirection="LeftToRight" Height="11" Width="9"/>
</Border>
<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="2" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<TextBlock Grid.Column="4" Margin="{TemplateBinding Padding}" Text="{TemplateBinding InputGestureText}"/>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Fill" TargetName="Bg">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#34C5EBFF" Offset="0"/>
<GradientStop Color="#3481D8FF" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Stroke" TargetName="Bg" Value="#8071CBF1"/>
<Setter Property="Stroke" TargetName="InnerBorder" Value="#40FFFFFF"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="#FF9A9A9A"/>
<Setter Property="Background" TargetName="GlyphPanel" Value="#FFEEE9E9"/>
<Setter Property="BorderBrush" TargetName="GlyphPanel" Value="#FFDBD6D6"/>
<Setter Property="Fill" TargetName="Glyph" Value="#FF848589"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
This is a very late answer but maybe it could help someone.
The secondary highlight is there because you actually have an extra MenuItem inside the original one.
It is a bit counter-intuitive but when you bind ItemsSource of a menu in WPF, it automatically creates MenuItems without giving it a DataTemplate. The DataTemplate you're providing is actually going inside a ContentPresenter in the originally created MenuItem.
So you should be using ItemContainerStyle to style the MenuItem, rather than giving it a DataTemplate.
I don't have the opportunity to try the following code now, but it should fix the issue:
<Button.ContextMenu>
<ContextMenu ItemsSource="{Binding SelectedTreeItem.MetaTargets}">
<ContextMenu.ItemContainerStyle>
<Style TargetType="MenuItem">
<Style.Setters>
<Setter Property="Header" Value="{Binding Name}"/>
<Setter Property="Command" Value="{Binding Path=SelectedTreeItem.AddTargetCommandRelay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>
<Setter Property="CommandParameter" Value="{Binding}"/>
</Style.Setters>
</Style>
</ContextMenu.ItemContainerStyle>
</ContextMenu>
</Button.ContextMenu>
I use the following style for my ContextMenu instances. Obviously you can change the colors to suit.
<Style x:Key="ContextMenuStyle" TargetType="{x:Type ContextMenu}">
<Setter Property="Background" Value="LightBlue"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContextMenu}">
<Border BorderThickness="1"
BorderBrush="LightBlue">
<StackPanel IsItemsHost="True"
Background="{TemplateBinding Background}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
EDIT:
If that doesn't work you could go down the route of restyling your MenuItem too. Here is an example:
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}"
TargetType="MenuItem">
<Border Name="Border" >
<Grid>
<ContentPresenter Margin="6,3,6,3"
ContentSource="Header"
RecognizesAccessKey="True" />
<Popup Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Fade">
<Border Name="SubmenuBorder"
SnapsToDevicePixels="True"
Background="#FF2D2D30"
BorderBrush="#FF2D2D30"
BorderThickness="1" >
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter TargetName="Popup" Property="PopupAnimation" Value="None"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="DimGray"/>
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4"/>
<Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="LightSlateGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}" TargetType="MenuItem">
<Border Name="Border" >
<Grid>
<ContentPresenter Margin="6,3,6,3"
ContentSource="Header"
RecognizesAccessKey="True" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="DimGray"/>
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="LightSlateGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuItemTemplateKey}" TargetType="MenuItem">
<Border Name="Border" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Icon"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut"/>
<ColumnDefinition Width="13"/>
</Grid.ColumnDefinitions>
<ContentPresenter Name="Icon"
Margin="6,0,6,0"
VerticalAlignment="Center"
ContentSource="Icon"/>
<Border Name="Check"
Width="13" Height="13"
Visibility="Collapsed"
Margin="6,0,6,0"
Background="#FF2D2D30"
BorderThickness="1"
BorderBrush="#FF2D2D30">
<Path Name="CheckMark"
Width="7" Height="7"
Visibility="Hidden"
SnapsToDevicePixels="False"
Stroke="DodgerBlue"
StrokeThickness="2"
Data="M 0 0 L 7 7 M 0 7 L 7 0" />
</Border>
<ContentPresenter Name="HeaderHost"
Grid.Column="1"
ContentSource="Header"
RecognizesAccessKey="True"/>
<TextBlock x:Name="InputGestureText"
Grid.Column="2"
Text="{TemplateBinding InputGestureText}"
Margin="5,2,0,2"
DockPanel.Dock="Right" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter TargetName="Icon" Property="Visibility" Value="Hidden"/>
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Setter TargetName="CheckMark" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="IsCheckable" Value="true">
<Setter TargetName="Check" Property="Visibility" Value="Visible"/>
<Setter TargetName="Icon" Property="Visibility" Value="Hidden"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="DimGray"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="LightSlateGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}" TargetType="MenuItem">
<Border Name="Border" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="13" SharedSizeGroup="Icon"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut"/>
<ColumnDefinition Width="13"/>
</Grid.ColumnDefinitions>
<ContentPresenter Name="Icon"
Margin="6,0,6,0"
VerticalAlignment="Center"
ContentSource="Icon"/>
<ContentPresenter Name="HeaderHost"
Grid.Column="1"
ContentSource="Header"
RecognizesAccessKey="True"/>
<TextBlock x:Name="InputGestureText"
Grid.Column="2"
Text="{TemplateBinding InputGestureText}"
Margin="5,2,2,2"
DockPanel.Dock="Right"/>
<Path Grid.Column="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 0 7 L 4 3.5 Z"
Fill="DodgerBlue" />
<Popup Name="Popup"
Placement="Right"
HorizontalOffset="-4"
IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Fade">
<Border Name="SubmenuBorder"
SnapsToDevicePixels="True"
Background="#FF2D2D30"
BorderBrush="#FF2D2D30"
BorderThickness="1" >
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="DimGray"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="4"/>
<Setter TargetName="SubmenuBorder" Property="Padding" Value="0,3,0,3"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="LightSlateGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="MenuItemStyle" TargetType="MenuItem">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Style.Triggers>
<Trigger Property="Role" Value="TopLevelHeader">
<Setter Property="Template" Value="{StaticResource {x:Static MenuItem.TopLevelHeaderTemplateKey}}"/>
<Setter Property="Grid.IsSharedSizeScope" Value="true"/>
</Trigger>
<Trigger Property="Role" Value="TopLevelItem">
<Setter Property="Template" Value="{StaticResource {x:Static MenuItem.TopLevelItemTemplateKey}}"/>
</Trigger>
<Trigger Property="Role" Value="SubmenuHeader">
<Setter Property="Template" Value="{StaticResource {x:Static MenuItem.SubmenuHeaderTemplateKey}}"/>
</Trigger>
<Trigger Property="Role" Value="SubmenuItem">
<Setter Property="Template" Value="{StaticResource {x:Static MenuItem.SubmenuItemTemplateKey}}"/>
</Trigger>
</Style.Triggers>
</Style>
I had the same problem and solved it with a custom MenuItem template containing just a Label:
<ContextMenu ItemsSource="{Binding ReportLayouts}" x:Name="CtxReportsMenu">
<ContextMenu.ItemTemplate>
<DataTemplate>
<MenuItem Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}, Path=DataContext.ReportCmd}"
CommandParameter="{Binding }">
<MenuItem.Template>
<ControlTemplate>
<Label Content="{Binding Report_Description}"/>
</ControlTemplate>
</MenuItem.Template>
</MenuItem>
</DataTemplate>
</ContextMenu.ItemTemplate>

ComboBox Style problems with DisplayMemberPath

I have a ComboBox and I have set the combo.ItemsSource property to a List object. The Book class contains two properties: "Abbreviation" and "Name".
I have set the ComboBox's DisplayMemberPath to "Abbreviation" but the following style that is set on the ComboBox does not display the Abbreviation property, but instead shows "Words.Book" which is the name of the class. The ComboBox drop-down displays a list correctly (Using the specified Abbreviation property). The problem is in the selected ComboBox item, the one displayed when the ComboBox' drop-down is closed.
I guess the problem is in ContentPresenter in DataTemplate but I was unable to find a successful solution. Currently the ContentPresenter's Content property is set to Content="{TemplateBinding Content} but I don't know if that's how it should be.
Any ideas how to show the property specified in DisplayMemberPath on the selected item?
Thank you
the code:
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="2" BorderThickness="1" Background="{DynamicResource ribbonTitleFade}" />
<Border Grid.Column="0" CornerRadius="2,0,0,2" Margin="1,6,1,6" BorderBrush="{DynamicResource boSecE}" BorderThickness="0,0,1,0" />
<Path x:Name="Arrow" Grid.Column="1" Fill="White"
HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"
/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="{DynamicResource ribbonTitleFade}" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter TargetName="Border" Property="Background" Value="{DynamicResource ribbonTitleFade}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="Black" />
<Setter TargetName="Border" Property="BorderBrush" Value="Black" />
<Setter Property="Foreground" Value="Gray"/>
<Setter TargetName="Arrow" Property="Fill" Value="Gray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="comboBoxBorderTransparent" TargetType="Control">
<Setter Property="BorderBrush" Value="{DynamicResource boPrimC}" />
</Style>
<Style x:Key="comboItemStyle" TargetType="ComboBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="backBorder" >
<StackPanel Orientation="Horizontal">
<Rectangle x:Name="rectA" Stroke="White" Width="4" Height="4" Fill="#80FFFFFF" Margin="5,0,0,0" HorizontalAlignment="Left" />
<TextBlock x:Name="text" Foreground="White" FontSize="10px">
<ContentPresenter Margin="8,1,0,1"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
/>
</TextBlock>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ComboBoxItem.IsMouseOver" Value="true">
<Setter TargetName="rectA" Property="Stroke" Value="Black" />
<Setter TargetName="rectA" Property="Fill" Value="#80000000" />
<Setter TargetName="backBorder" Property="Background" Value="White"/>
<Setter TargetName="text" Property="Foreground" Value="{DynamicResource boPrimC}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="comboSelectedItemTemplate">
<TextBlock Foreground="White" FontSize="10px">
<ContentPresenter Content="{TemplateBinding Content}" />
</TextBlock>
</DataTemplate>
<Style TargetType="ComboBox">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="MinWidth" Value="60"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="ItemContainerStyle" Value="{DynamicResource comboItemStyle}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton
Name="ToggleButton" Grid.Column="2"
Template="{StaticResource ComboBoxToggleButton}"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
</ToggleButton>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{DynamicResource comboSelectedItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
/>
<Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="False" Focusable="False" PopupAnimation="Slide">
<Grid Name="DropDown" SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" Background="{DynamicResource ribbonTitleFade}"
BorderThickness="1" BorderBrush="{DynamicResource boPrimC}" />
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="2"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<!--<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>-->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
I think you want something more like this in your ComboBox template:
<ContentPresenter Content="{TemplateBinding ComboBox.SelectionBoxItem}"
ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
ContentStringFormat="{TemplateBinding ComboBox.SelectionBoxItemStringFormat}"
Margin="{TemplateBinding Control.Padding}"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
If your template doesn't explicitly handles the value of DisplayMemberPath, then the template won't use it to change the ComboBoxItem. You'll have to bind to the member directly in the ControlTemplate, or use a separate DataTemplate.
I found problem with the BureauBlack theme where it would just not apply the DisplayMemberPath, just showed the object name. I had a window with many (15+) ComboBoxes and all but 2 worked correctly using DisplayMemberPath.
I removed the following from the ContentPresenters and GridViewRowPresenters:
Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"
in ListBoxItem, ComboBoxItem,ListViewItem. There may be more that need fixed, but this was all we found that we are using.
Using Microsoft.Net 4.0 Framework. I did not try on 4.5 or 3.5.

Resources