I'm trying to style Comboboxes in WPF so that they are white, and have the same border as TextBoxes. I have the following style so far, but don't know how to set the border:
<Style TargetType="ComboBox">
<Setter Property="Margin" Value="0,2,0,2" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Background" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
???
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Use Expression Blend. If you want ComboBox to look similar to TextBox, have a look at TextBox template by right clicking TextBlock and selecting Edit Template > Edit a Copy and use that to modify your ComboBox template!
In between your controltemplate please implement something like this:
<Grid SnapsToDevicePixels="true">
<Border
x:Name="Bd"
Background="Transparent"
BorderBrush="#FF888888"
Padding="1"
CornerRadius="5" BorderThickness="2,2,2,2">
<Grid
Grid.IsSharedSizeScope="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"
SharedSizeGroup="ComboBoxButton" />
</Grid.ColumnDefinitions>
<Border x:Name="SelectedItemBorder" Grid.ColumnSpan="2" />
<ContentPresenter
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Grid.Column="1"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
TextBlock.Foreground="White"
Height="Auto"
Margin="2,2,7,2"
VerticalAlignment="Center" />
<ToggleButton
Style="{StaticResource ComboBoxTransparentButtonStyle}"
Grid.ColumnSpan="3"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}"
Opacity="0.25" />
</Grid>
</Border>
<Popup Focusable="false" AllowsTransparency="true"
IsOpen="{Binding Path=IsDropDownOpen,
RelativeSource={RelativeSource TemplatedParent}}"
Placement="Bottom"
PopupAnimation="{DynamicResource
{x:Static SystemParameters.ComboBoxPopupAnimationKey}}"
x:Name="PART_Popup">
<Border CornerRadius="5" x:Name="DropDownBorder"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
MinWidth="{TemplateBinding ActualWidth}"
Background="#FF7E7E7E"
BorderThickness="1">
<ScrollViewer Foreground="#FFFFFFFF">
<ItemsPresenter
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
KeyboardNavigation.DirectionalNavigation="Contained"
TextBlock.Foreground="White"
VerticalAlignment="Stretch" />
</ScrollViewer>
</Border>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" TargetName="Bd" Value="#FFFFFFFF"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="Bd" Value="#FFD2ECCF"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelectionBoxHighlighted" Value="true" />
<Condition Property="IsDropDownOpen" Value="false" />
</MultiTrigger.Conditions>
<Setter Property="Foreground" Value="white" />
<Setter Property="BorderBrush" Value="{x:Null}" />
</MultiTrigger>
<Trigger Property="IsSelectionBoxHighlighted" Value="true">
<Setter Property="Background" TargetName="SelectedItemBorder"
Value="Transparent" />
</Trigger>
<Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter Property="MinHeight" TargetName="DropDownBorder" Value="95" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground"
Value="{DynamicResource
{x:Static SystemColors.GrayTextBrushKey}}" />
<Setter Property="Background" TargetName="Bd"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</ControlTemplate.Triggers>
Related
I am currently using the MahApps.Metro NumericUpDown control to change frames in an image stack. The user feedback I have got from this is that the buttons feel the wrong way round, intuitively the button on the left would move back a frame and the button on the right would move forward. As such I would like to swap the order of the buttons
I have looked through the properties that the control has but I have been unable to find any that would allow me to change the order of the buttons.
Is there a way to do this without having to roll my own control?
Basically I would like to change from this:
To this:
Update
With latest MahApps version (v2.x) there is the new SwitchUpDownButtons property available to swap / switch the buttons.
Older MahApps Versions
There is no property where you can change the sequence of the up and down buttons. But you can take the original style which is available at the GitHub repository of MahApps.Metro and change the Template.
<Style x:Key="CustomNumericUpDownStyle" TargetType="{x:Type Controls:NumericUpDown}" BasedOn="{StaticResource {x:Type Controls:NumericUpDown}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Controls:NumericUpDown}">
<Grid SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<Border x:Name="Base"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding Controls:ControlsHelper.CornerRadius}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<Grid Margin="{TemplateBinding BorderThickness}">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="PART_TextBoxColumn" Width="*" />
<ColumnDefinition x:Name="PART_ButtonsColumn" Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox x:Name="PART_TextBox"
Grid.Column="0"
MinWidth="20"
MinHeight="0"
Margin="0 0 -2 0"
Padding="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Controls:ControlsHelper.DisabledVisualElementVisibility="Collapsed"
Controls:TextBoxHelper.ButtonContent="{TemplateBinding Controls:TextBoxHelper.ButtonContent}"
Controls:TextBoxHelper.ButtonContentTemplate="{TemplateBinding Controls:TextBoxHelper.ButtonContentTemplate}"
Controls:TextBoxHelper.ButtonFontFamily="{TemplateBinding Controls:TextBoxHelper.ButtonFontFamily}"
Controls:TextBoxHelper.ButtonFontSize="{TemplateBinding Controls:TextBoxHelper.ButtonFontSize}"
Controls:TextBoxHelper.ButtonWidth="{TemplateBinding Controls:TextBoxHelper.ButtonWidth}"
Controls:TextBoxHelper.ButtonsAlignment="{TemplateBinding ButtonsAlignment}"
Controls:TextBoxHelper.ClearTextButton="{TemplateBinding Controls:TextBoxHelper.ClearTextButton}"
Controls:TextBoxHelper.HasText="{TemplateBinding Controls:TextBoxHelper.HasText}"
Controls:TextBoxHelper.SelectAllOnFocus="{TemplateBinding Controls:TextBoxHelper.SelectAllOnFocus}"
Controls:TextBoxHelper.UseFloatingWatermark="{TemplateBinding Controls:TextBoxHelper.UseFloatingWatermark}"
Controls:TextBoxHelper.Watermark="{TemplateBinding Controls:TextBoxHelper.Watermark}"
Controls:TextBoxHelper.WatermarkAlignment="{TemplateBinding Controls:TextBoxHelper.WatermarkAlignment}"
Controls:TextBoxHelper.WatermarkTrimming="{TemplateBinding Controls:TextBoxHelper.WatermarkTrimming}"
Background="{x:Null}"
BorderThickness="0"
FocusVisualStyle="{x:Null}"
Focusable="{TemplateBinding Focusable}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
Foreground="{TemplateBinding Foreground}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsReadOnly="{TemplateBinding IsReadOnly}"
IsTabStop="{TemplateBinding IsTabStop}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
TabIndex="{TemplateBinding TabIndex}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" />
<StackPanel x:Name="PART_Buttons"
Grid.Column="1"
Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Padding, Converter={StaticResource ThicknessBindingConverter}, ConverterParameter={x:Static Converters:ThicknessSideType.Left}}"
Orientation="Horizontal">
<!-- down is now the first button -->
<RepeatButton x:Name="PART_NumericDown"
Width="{TemplateBinding UpDownButtonsWidth}"
VerticalContentAlignment="Center"
Delay="{TemplateBinding Delay}"
Foreground="{TemplateBinding Foreground}"
IsTabStop="False"
Style="{DynamicResource ChromelessButtonStyle}">
<Path x:Name="PolygonDown"
Width="14"
Height="3"
Data="F1 M 19,38L 57,38L 57,44L 19,44L 19,38 Z "
Fill="{DynamicResource GrayBrush1}"
Stretch="Fill" />
</RepeatButton>
<RepeatButton x:Name="PART_NumericUp"
Width="{TemplateBinding UpDownButtonsWidth}"
Delay="{TemplateBinding Delay}"
Foreground="{TemplateBinding Foreground}"
IsTabStop="False"
Style="{DynamicResource ChromelessButtonStyle}">
<Path x:Name="PolygonUp"
Width="14"
Height="14"
Data="F1 M 35,19L 41,19L 41,35L 57,35L 57,41L 41,41L 41,57L 35,57L 35,41L 19,41L 19,35L 35,35L 35,19 Z "
Fill="{DynamicResource GrayBrush1}"
Stretch="Fill" />
</RepeatButton>
</StackPanel>
</Grid>
<Border x:Name="DisabledVisualElement"
Background="{DynamicResource ControlsDisabledBrush}"
BorderBrush="{DynamicResource ControlsDisabledBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding Controls:ControlsHelper.CornerRadius}"
IsHitTestVisible="False"
Opacity="0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.DisabledVisualElementVisibility), Mode=OneWay}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ButtonsAlignment" Value="Left">
<Setter TargetName="PART_Buttons" Property="Grid.Column" Value="0" />
<Setter TargetName="PART_Buttons" Property="Margin" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Padding, Converter={StaticResource ThicknessBindingConverter}, ConverterParameter={x:Static Converters:ThicknessSideType.Right}}" />
<Setter TargetName="PART_ButtonsColumn" Property="Width" Value="*" />
<Setter TargetName="PART_TextBox" Property="Grid.Column" Value="1" />
<Setter TargetName="PART_TextBox" Property="Margin" Value="-2 0 0 0" />
<Setter TargetName="PART_TextBox" Property="Margin" Value="-2 0 0 0" />
<Setter TargetName="PART_TextBoxColumn" Property="Width" Value="Auto" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="DisabledVisualElement" Property="Opacity" Value="0.6" />
</Trigger>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="InterceptArrowKeys" Value="False" />
<Setter Property="InterceptManualEnter" Value="False" />
<Setter Property="InterceptMouseWheel" Value="False" />
<Setter TargetName="PART_NumericDown" Property="IsEnabled" Value="False" />
<Setter TargetName="PART_NumericUp" Property="IsEnabled" Value="False" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsReadOnly" Value="False" />
<Condition Property="InterceptManualEnter" Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="PART_TextBox" Property="IsReadOnly" Value="True" />
</MultiTrigger>
<Trigger SourceName="PART_NumericUp" Property="IsMouseOver" Value="True">
<Setter TargetName="PART_NumericUp" Property="Background" Value="{DynamicResource GrayBrush8}" />
<Setter TargetName="PolygonUp" Property="Fill" Value="{DynamicResource AccentColorBrush}" />
</Trigger>
<Trigger SourceName="PART_NumericUp" Property="IsPressed" Value="True">
<Setter TargetName="PART_NumericUp" Property="Background" Value="{DynamicResource BlackBrush}" />
<Setter TargetName="PolygonUp" Property="Fill" Value="{DynamicResource WhiteBrush}" />
</Trigger>
<Trigger SourceName="PART_NumericDown" Property="IsMouseOver" Value="True">
<Setter TargetName="PART_NumericDown" Property="Background" Value="{DynamicResource GrayBrush8}" />
<Setter TargetName="PolygonDown" Property="Fill" Value="{DynamicResource AccentColorBrush}" />
</Trigger>
<Trigger SourceName="PART_NumericDown" Property="IsPressed" Value="True">
<Setter TargetName="PART_NumericDown" Property="Background" Value="{DynamicResource BlackBrush}" />
<Setter TargetName="PolygonDown" Property="Fill" Value="{DynamicResource WhiteBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Base" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.MouseOverBorderBrush)}" />
</Trigger>
<Trigger SourceName="PART_TextBox" Property="IsFocused" Value="true">
<Setter TargetName="Base" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.FocusBorderBrush)}" />
</Trigger>
<Trigger Property="HideUpDownButtons" Value="True">
<Setter TargetName="PART_Buttons" Property="Visibility" Value="Collapsed" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
WPF 4.5
Can someone please take the below default style for ComboBox and show me how to change it so that I can set a BorderBrush color (or resource brush) via Style setter at the top "ComboBox" level...and then have that same color to flow all the way down to the BorderBrush property of the Border named "Border" within the ToggleButton template with key "ComboBoxToggleButton"?
THANKS!!!
<!--##########-->
<!--ComboBox-->
<!--##########-->
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" Grid.ColumnSpan="2" CornerRadius="2,2,2,2" Background="{StaticResource FlowWhiteBrush}" BorderThickness="3,3,3,3" />
<Border Grid.Column="0" CornerRadius="2,0,0,2" Margin="3,3,3,3" Background="{StaticResource FlowWhiteBrush}" />
<Canvas x:Name="canDownArrow" Width="13" Height="13" HorizontalAlignment="Right" Margin="0,0,-19,0">
<Polygon Fill="{StaticResource FlowBlackBrush}">
<Polygon.Points>
<Point X="1" Y="1" />
<Point X="13" Y="1" />
<Point X="7" Y="13" />
</Polygon.Points>
</Polygon>
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Control.IsEnabled" Value="False">
<Setter TargetName="Border" Property="Opacity" Value="0.5"/>
<Setter TargetName="canDownArrow" Property="Opacity" Value="0.35"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowMediumGrayBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource FlowMediumGrayBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowMediumGrayBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource FlowMediumGrayBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Padding="0,3,0,3" Focusable="False" Background="{TemplateBinding Background}" IsEnabled="{TemplateBinding IsEnabled}" />
</ControlTemplate>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="BorderBrush" Value="Green" /><!-- GREEN DOES NOT MAKE IT DOWN TO ComboBoxToggleButton BorderBrush -->
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="IsEditable" Value="False" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock FontSize="18" FontWeight="SemiBold" Text="{Binding}" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton x:Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2" FocusVisualStyle="{x:Null}" ClickMode="Press" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
<ContentPresenter x:Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="6,4,36,5" VerticalAlignment="Center" HorizontalAlignment="Left"></ContentPresenter>
<TextBox x:Name="PART_EditableTextBox" TextBlock.FontSize="18" TextBlock.FontWeight="SemiBold" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="6,4,36,5" Focusable="True" Background="{TemplateBinding Background}" IsEnabled="{TemplateBinding IsEnabled}" IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
<Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" BorderThickness="3,3,3,3" BorderBrush="{StaticResource FlowMediumGrayBrush}" Background="{StaticResource FlowWhiteBrush}" />
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEditable" Value="False">
<Setter TargetName="PART_EditableTextBox" Property="IsEnabled" Value="False" />
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="PART_EditableTextBox" Property="Opacity" Value="0.5" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4" />
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border MinHeight="32" x:Name="Border" Padding="2,2,2,2" SnapsToDevicePixels="True" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected" />
<VisualState x:Name="SelectedUnfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowLightGrayBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowLightGrayBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try this.I have added BorderBrush binding in Toggle button Template like this.
<Border x:Name="Border" BorderBrush="{Binding BorderBrush,RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Grid.ColumnSpan="2" CornerRadius="2,2,2,2" Background="{StaticResource FlowWhiteBrush}" BorderThickness="3,3,3,3" />
<Window.Resources>
<SolidColorBrush x:Key="FlowBlackBrush" Color="Black"></SolidColorBrush>
<SolidColorBrush x:Key="FlowWhiteBrush" Color="White"></SolidColorBrush>
<SolidColorBrush x:Key="FlowMediumGrayBrush" Color="DarkGray"></SolidColorBrush>
<SolidColorBrush x:Key="FlowLightGrayBrush" Color="LightGray"></SolidColorBrush>
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" BorderBrush="{Binding BorderBrush,RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Grid.ColumnSpan="2" CornerRadius="2,2,2,2" Background="{StaticResource FlowWhiteBrush}" BorderThickness="3,3,3,3" />
<Border Grid.Column="0" CornerRadius="2,0,0,2" Margin="3,3,3,3" Background="{StaticResource FlowWhiteBrush}" />
<Canvas x:Name="canDownArrow" Width="13" Height="13" HorizontalAlignment="Right" Margin="0,0,-19,0">
<Polygon Fill="{StaticResource FlowBlackBrush}">
<Polygon.Points>
<Point X="1" Y="1" />
<Point X="13" Y="1" />
<Point X="7" Y="13" />
</Polygon.Points>
</Polygon>
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Control.IsEnabled" Value="False">
<Setter TargetName="Border" Property="Opacity" Value="0.5"/>
<Setter TargetName="canDownArrow" Property="Opacity" Value="0.35"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowMediumGrayBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource FlowMediumGrayBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowMediumGrayBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource FlowMediumGrayBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Padding="0,3,0,3" Focusable="False" Background="{TemplateBinding Background}" IsEnabled="{TemplateBinding IsEnabled}" />
</ControlTemplate>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="BorderBrush" Value="Green" />
<!-- GREEN DOES NOT MAKE IT DOWN TO ComboBoxToggleButton BorderBrush -->
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="IsEditable" Value="False" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock FontSize="18" FontWeight="SemiBold" Text="{Binding}" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton x:Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2" FocusVisualStyle="{x:Null}" ClickMode="Press" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
<ContentPresenter x:Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="6,4,36,5" VerticalAlignment="Center" HorizontalAlignment="Left"></ContentPresenter>
<TextBox x:Name="PART_EditableTextBox" TextBlock.FontSize="18" TextBlock.FontWeight="SemiBold" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="6,4,36,5" Focusable="True" Background="{TemplateBinding Background}" IsEnabled="{TemplateBinding IsEnabled}" IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
<Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" BorderThickness="3,3,3,3" BorderBrush="{StaticResource FlowMediumGrayBrush}" Background="{StaticResource FlowWhiteBrush}" />
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEditable" Value="False">
<Setter TargetName="PART_EditableTextBox" Property="IsEnabled" Value="False" />
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="PART_EditableTextBox" Property="Opacity" Value="0.5" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4" />
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border MinHeight="32" x:Name="Border" Padding="2,2,2,2" SnapsToDevicePixels="True" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected" />
<VisualState x:Name="SelectedUnfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowLightGrayBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowLightGrayBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<ComboBox Width="200" Height="30"></ComboBox>
I have a custom combobox where I apply a specific style on the first item. I want that when this item is selected, the style of displayed text in the combobox is the same. Currently, all selected items appear in the same style and I do not know how to make the ContentPresenter "get" the specified style in that item. This is the code:
<ComboBox HorizontalAlignment="Center" Margin="0,106,0,0" VerticalAlignment="Top" Width="200">
<ComboBoxItem Style="{StaticResource mySpecialStyle}">Select an option...</ComboBoxItem>
<ComboBoxItem>ComboBox Item #1</ComboBoxItem>
<ComboBoxItem>ComboBox Item #2</ComboBoxItem>
<ComboBoxItem>ComboBox Item #3</ComboBoxItem>
</ComboBox>
In fact, "mySpecialStyle" only changes color and fontstyle. But when the first item is selected, it appears like any other selected item. How can set this on the Contentpresenter?
Here is the complete code of the custom ComBoBox:
<Window.Resources>
<Style x:Key="mySpecialStyle" TargetType="{x:Type ComboBoxItem}">
<Setter Property="TextElement.FontStyle" Value="Italic"/>
</Style>
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Border
x:Name="Border"
Grid.ColumnSpan="3"
CornerRadius="3"
Background="#FFFAFAFA"
BorderBrush="#FF999999"
BorderThickness="1" />
<Border
x:Name="Background"
Grid.Column="0"
CornerRadius="3,0,0,3"
Margin="1"
Background="#FFFAFAFA"
BorderBrush="#FF999999"
BorderThickness="0" />
<Path
x:Name="ArrowDw"
Grid.Column="1"
Fill="#FF404040"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"/>
<Path
x:Name="ArrowUp"
Grid.Column="1"
Fill="Transparent"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 2 L 4 -2 L 8 2 Z"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver" Value="true">
<Setter TargetName="ArrowDw" Property="Fill" Value="#FF000000" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter TargetName="Background" Property="Background" Value="#FFFFFFFF" />
<Setter TargetName="Border" Property="BorderBrush" Value="#FF000000" />
<Setter TargetName="Border" Property="Background" Value="#FFFFFFFF" />
<Setter TargetName="ArrowDw" Property="Fill" Value="Transparent" />
<Setter TargetName="ArrowUp" Property="Fill" Value="#FF404040" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ToggleButton.IsChecked" Value="True" />
<Condition Property="ToggleButton.IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="ArrowUp" Property="Fill" Value="#FF000000" />
</MultiTrigger.Setters>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="#FFFFFF" />
<Setter TargetName="Border" Property="BorderBrush" Value="#CCCCCC" />
<Setter Property="Foreground" Value="#888888"/>
<Setter TargetName="ArrowDw" Property="Fill" Value="#999999" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}"/>
</ControlTemplate>
<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type 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="MinHeight" Value="27"/>
<Setter Property="ToolTip" Value="{Binding Path=SelectionBoxItem, RelativeSource={RelativeSource Self}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton
Name="ToggleButton"
Template="{StaticResource ComboBoxToggleButton}"
Grid.Column="2"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
</ToggleButton>
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
????
Margin="8,3,28,3"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="8,3,28,3"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}"/>
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid
Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
Background="#FFFFFF"
BorderThickness="1"
BorderBrush="#FF999999"/>
<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="27"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#888888"/>
</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="4"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
</Window.Resources>
The placeholder "???" is where I need to set the style according to the style defined in the ComboBoxitem (in this case, "mySpecialStyle").
Thanks in advance!
The logic to solve here of course will base on something like a Trigger. However we can't set Style via Setter. So I thought of this hack (but safe enough). Firstly you need to bind the Style of the ContentPresenter to its Tag property (of course 2 way binding by default). Then you just need to change the Tag to a {StaticResource} with ResourceKey being the same as the resource you defined upwards on the tree. This resource should of course have TargetType of ContentPresenter:
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Style="{Binding Tag, RelativeSource={RelativeSource Self}}" />
<!-- the additional Trigger should be added to the ControlTemplate.Triggers -->
<Trigger Property="SelectedIndex" Value="0">
<Setter TargetName="ContentSite"
Property="Tag" Value="{StaticResource mySpecialStyle}"/>
</Trigger>
I have a combobox in which I display simple strings. At some point this looks like the following:
This is ok. now ein scroll down one step:
Now the "g" is cut off at the bottom. What I have tried so far: Set the height property explicit to Auto. Changing Padding and Margin. Nothing worked. Had some of you the same problem or any suggestions what I could try?
EDIT
Here the related XAML:
<Style x:Key="GraphicEditorInplaceLabelEditStyle">
<Setter Property="ComboBox.Focusable" Value="True"/>
<Setter Property="ComboBox.IsEditable" Value="True"/>
<Setter Property="ComboBox.IsReadOnly" Value="False"/>
<Setter Property="ComboBox.IsTextSearchEnabled" Value="True"/>
<!--Use Separators for empty entries-->
<Setter Property="ComboBox.ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ComboBoxItem}" BasedOn="{StaticResource {x:Type ComboBoxItem}}">
<Style.Triggers>
<DataTrigger Binding="{Binding}" Value="">
<Setter Property="IsEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Separator HorizontalAlignment="Stretch"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ComboBox.Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Validation.ValidationAdornerSiteFor="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType=ComboBox}}" Background="{StaticResource ComboBoxActiveBackgroundBrush}" BorderBrush="{StaticResource ComboBoxBorderBrush}" BorderThickness="1" CornerRadius="2">
<Grid>
<ContentPresenter Margin="3,3,3,3" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" HorizontalAlignment="Left" IsHitTestVisible="False" Name="ContentSite" VerticalAlignment="Center" />
<TextBlock Style="{x:Null}" x:Name="PART_TextBackground" Margin="3,3,3,3" Background="Transparent" Focusable="False" FontStyle="Italic" Foreground="LightGray" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBox Style="{x:Null}" x:Name="PART_EditableTextBox" Margin="3,3,3,3" Background="Transparent" Focusable="True" HorizontalAlignment="Left" IsReadOnly="{TemplateBinding IsReadOnly}" VerticalAlignment="Center" Visibility="Hidden">
<TextBox.Template>
<ControlTemplate TargetType="TextBox">
<Border x:Name="PART_ContentHost" Background="{TemplateBinding Background}" Focusable="False" />
</ControlTemplate>
</TextBox.Template>
</TextBox>
<Popup AllowsTransparency="True" Focusable="False" IsOpen="{TemplateBinding IsDropDownOpen}" Name="Popup" Placement="Bottom" PopupAnimation="Slide">
<Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" Name="DropDown" SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder" Background="{StaticResource ComboBoxActiveBackgroundBrush}" BorderBrush="{StaticResource ComboBoxBorderBrush}" BorderThickness="1" />
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True" CanContentScroll="False">
<StackPanel KeyboardNavigation.DirectionalNavigation="Contained" IsItemsHost="True" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</Border>
<ToggleButton Grid.Column="1" ClickMode="Press" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" Name="ToggleButton" VerticalAlignment="Bottom">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Border x:Name="Border"
CornerRadius="2"
Background="{StaticResource ComboBoxActiveBackgroundBrush}"
BorderBrush="{StaticResource ComboBoxBorderBrush}"
BorderThickness="1"
Margin="0,0,0,0" />
<Rectangle x:Name="arrow"
Height="6"
Width="8"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="2"
Fill="{StaticResource ComboBoxArrowDownBrush}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource ComboBoxMouseOverBackgroundBrush}" />
<Setter TargetName="arrow"
Property="Fill"
Value="{StaticResource ComboBoxArrowDownMouseOverBrush}"></Setter>
</Trigger>
<Trigger Property="ToggleButton.IsChecked"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource ComboBoxPressedBackgroundBrush}" />
<Setter Property="Fill"
TargetName="arrow"
Value="{StaticResource ComboBoxArrowUpBrush}" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource ComboBoxInactiveBackgroundBrush}" />
<Setter Property="Foreground"
Value="{StaticResource FontInactiveBrush}" />
<Setter Property="Fill"
TargetName="arrow"
Value="{StaticResource ComboBoxArrowDownInactiveBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
<ToggleButton.RenderTransform>
<TranslateTransform X="-3" Y="0"></TranslateTransform>
</ToggleButton.RenderTransform>
</ToggleButton>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter Property="Visibility" TargetName="ToggleButton" Value="Collapsed" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource FontInactiveBrush}" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger Property="Popup.AllowsTransparency" SourceName="Popup" Value="true">
<Setter Property="CornerRadius" TargetName="DropDownBorder" Value="4" />
<Setter Property="Margin" TargetName="DropDownBorder" Value="0,2,0,0" />
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Visibility" TargetName="PART_EditableTextBox" Value="Visible" />
<Setter Property="Visibility" TargetName="ContentSite" Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I tried to change the padding/margin of the ComboBoxItem as well as the item host stackpanel.
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.