Change ComboBoxItem Background when Mouse Is Over - WPF - c#

I am using the WPF extended library WatermarkedComboBox and when I hover over a ComboBoxItem I want the background to change to a light grey and not the defaul blue.
<!-- Combo Box -->
<xctk:WatermarkComboBox Style="{StaticResource MonthComboBoxDropDown}" ItemsSource="{Binding ListOfMonths}" SelectedItem="{Binding SelectedMonth, ValidatesOnDataErrors=True}" Margin="0,0,20,0">
<xctk:WatermarkComboBox.Watermark>
<TextBlock Text="Month" Foreground="{StaticResource OffsetWhiteBrush}"/>
</xctk:WatermarkComboBox.Watermark>
<xctk:WatermarkComboBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Pink" />
</xctk:WatermarkComboBox.Resources>
<xctk:WatermarkComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Pink" />
<Setter Property="Foreground" Value="Yellow" />
<Setter Property="BorderThickness" Value="5" />
</Trigger>
</Style.Triggers>
</Style>
</xctk:WatermarkComboBox.ItemContainerStyle>
</xctk:WatermarkComboBox>
<!-- Combo box styling -->
<Style x:Key="MonthComboBoxDropDown" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource TextBoxErrorStyle}">
<Setter Property="Foreground" Value="{StaticResource WhiteColorBrush}" />
<Setter Property="FontSize" Value="{StaticResource FontSize20}" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton Grid.Column="2" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" >
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Name="Border" Grid.ColumnSpan="2" Background="{StaticResource DarkGreyBrush}" BorderThickness="0" />
<Path x:Name="Arrow" Grid.Column="1" Fill="{StaticResource WhiteColorBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource LightGreyBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3" />
<TextBox x:Name="PART_EditableTextBox" Visibility="Hidden" MinWidth="120" />
<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="{StaticResource DarkGreyBrush}" />
<ScrollViewer SnapsToDevicePixels="True" Foreground="{StaticResource WhiteColorBrush}" FontFamily="{StaticResource LatoRegular}" FontSize="{StaticResource FontSize20}" VerticalAlignment="Center">
<StackPanel IsItemsHost="True" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When I hover over the an item in the combo box it looks like this
I have managed to make the foreground and border change but how can I also make the background change?


Add to your ComboBox style to change the HighlightBrush to gray
<Style x:Key="MonthComboBoxDropDown" TargetType="{x:Type ComboBox}" BasedOn=" {StaticResource TextBoxErrorStyle}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Gray"/>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="DarkGray"/>
</Style.Resources>
<Setter Property="Foreground" Value="{StaticResource WhiteColorBrush}" />
<Setter Property="FontSize" Value="{StaticResource FontSize20}" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton Grid.Column="2" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" >
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Name="Border" Grid.ColumnSpan="2" Background="{StaticResource DarkGreyBrush}" BorderThickness="0" />
<Path x:Name="Arrow" Grid.Column="1" Fill="{StaticResource WhiteColorBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource LightGreyBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3" />
<TextBox x:Name="PART_EditableTextBox" Visibility="Hidden" MinWidth="120" />
<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="{StaticResource DarkGreyBrush}" />
<ScrollViewer SnapsToDevicePixels="True" Foreground="{StaticResource WhiteColorBrush}" FontFamily="{StaticResource LatoRegular}" FontSize="{StaticResource FontSize20}" VerticalAlignment="Center">
<StackPanel IsItemsHost="True" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>


<Style x:Key="ComboBox" TargetType="{x:Type ComboBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource LightGreyBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To override the style I had to override the ComboBoxItem ControlTemplate.

Related

C# WPF ComboBox with rounded corners IsMouseOver won't work

I found this code on doing rounded corners on combobox, I have modifyed it a little, but I have two Issues:
1) The mouseover on the combobox (textbox + togglebutton) won't
work. (I want the standard bahavior with blue background on mouseover, put red just to see if something happend)
2) when I click on the togglebutton I get the popup, but how can I make the textbox clickable to get the popup?
This is what I get:
This is what I want when mouseover (but with rounded corner)
Here are the code:
<Style x:Key="BorderStyle">
<Setter Property="Control.BorderBrush" Value="#A0A1A2" />
<Setter Property="Control.BorderThickness" Value="1" />
<Setter Property="Control.Background" Value="Transparent" />
<Setter Property="Control.Foreground" Value="#101010" />
<Setter Property="Control.FontFamily" Value="Arial" />
<Setter Property="Control.FontWeight" Value="Normal" />
<Setter Property="Control.FontStretch" Value="Normal" />
<Setter Property="Control.FontStyle" Value="Normal" />
</Style>
<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border CornerRadius="2,0,0,2"
BorderThickness="1,1,0,1"
Background="{TemplateBinding Background}"
BorderBrush="#A0A1A2">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxButtonStyle" TargetType="{x:Type ToggleButton}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="#EAEAEA"
x:Name="border"
CornerRadius="0,2,2,0"
BorderThickness="0,1,1,1"
BorderBrush="#A0A1A2">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RoundComboBox" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource BorderStyle}">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FontSize" Value="14px"/>
<Setter Property="IsReadOnly" Value="True"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<TextBox Name="PART_EditableTextBox"
Padding="0,0,0,0"
IsHitTestVisible="False"
Height="{TemplateBinding Height}"
BorderBrush="#A0A1A2"
Background="#EAEAEA"
Style="{StaticResource ComboBoxTextBoxStyle}"/>
<ToggleButton Grid.Column="1"
Height="{TemplateBinding Height}"
Style="{StaticResource ComboBoxButtonStyle}"
Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="Black" />
</ToggleButton>
<ContentPresenter Grid.Column="0"
Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="6,0,0,0"/>
<Popup Grid.Column="0"
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"
BorderThickness="1"
CornerRadius="2"
Background="White"
BorderBrush="#A0A1A2"/>
<ScrollViewer SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

There were a few problems here. Each item I changed in the XAML is commented.
I've also removed the IsMouseOver triggers from the togglebutton and textbox styles, and put it in the ComboBox style. It now sets the background for the whole combobox when the mouse is anywhere over the ComboBox. The two controls in the ComboBox template now have Background="{TemplateBinding Background}", so they'll use the background color set by that trigger.
I've restored IsHitTestVisible on the textbox, but used a TemplateBinding to bind it to the ComboBox's IsEditable property. This will give you the correct mouse pointer over the textbox.
<!--
Better to define this in one place.
I'd do the same with the border color that you use everywhere.
-->
<SolidColorBrush x:Key="ComboBackgroundBrush" Color="#EAEAEA" />
<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
<!--
Must set this in a setter, not an an attribute on the control instance.
The attribute you had will override anything the style does. This is part of
"dependency property value precedence".
-->
<Setter Property="Background" Value="{StaticResource ComboBackgroundBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border CornerRadius="2,0,0,2"
BorderThickness="1,1,0,1"
Background="{TemplateBinding Background}"
BorderBrush="#A0A1A2"
>
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="{StaticResource ComboBackgroundBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<!--
Needs {TemplateBinding Background} so it uses whatever background brush
the control has at any given moment.
-->
<Border Background="{TemplateBinding Background}"
x:Name="border"
CornerRadius="0,2,2,0"
BorderThickness="0,1,1,1"
BorderBrush="#A0A1A2">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxOverlayToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="Focusable" Value="False" />
<Setter Property="ClickMode" Value="Press" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RoundComboBox" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource BorderStyle}">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FontSize" Value="14px"/>
<Setter Property="IsReadOnly" Value="True"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<ToggleButton
Grid.Column="0"
Style="{StaticResource ComboBoxOverlayToggleButtonStyle}"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
/>
<!--
Two problems:
1. IsHitTestVisible="False" prevented it from getting any mouse messages.
2. Background attribute was overriding anything the Style did,
so even if the trigger had fired, its setter would have failed.
Also, Height="{TemplateBinding Height}" is unnecessary. It'll size to its parent Grid.
And BorderBrush="#A0A1A2" should probably be in the Style
-->
<TextBox Name="PART_EditableTextBox"
Padding="0,0,0,0"
BorderBrush="#A0A1A2"
Style="{StaticResource ComboBoxTextBoxStyle}"
Background="{TemplateBinding Background}"
IsHitTestVisible="{TemplateBinding IsEditable}"
/>
<ToggleButton Grid.Column="1"
Height="{TemplateBinding Height}"
Style="{StaticResource ComboBoxButtonStyle}"
Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"
Background="{TemplateBinding Background}"
>
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="Black" />
</ToggleButton>
<ContentPresenter Grid.Column="0"
Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="6,0,0,0"
/>
<Popup Grid.Column="0"
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"
BorderThickness="1"
CornerRadius="2"
Background="White"
BorderBrush="#A0A1A2"/>
<ScrollViewer SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>

Combobox assigning of selecteditem not displaying wpf

I have a dynamic combobox items added to it. When i select item, it displays properly. but when reloading the control i am assigning selected item to the combobox but it is not displaying.
simpleComboBox.SelectedIndex = simpleComboBox.Items.IndexOf(SelectedItem);
It showing correct index value but values are not displaying.
<Style x:Key="ComboBoxStyle" TargetType="{x:Type ComboBox}">
<Setter Property="Margin" Value="10"/>
<Setter Property="Foreground" Value="{StaticResource ForegroundTextNormalBrush}" />
<Setter Property="FontFamily" Value="{StaticResource TextFontFamily}"/>
<Setter Property="FontSize" Value="{StaticResource FontSize16}"/>
<Setter Property="Background" Value="{StaticResource ControlBackgroundBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource BorderColorBrush}"/>
<Setter Property="IsEditable" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<TextBox Name="PART_EditableTextBox"
Style="{StaticResource ComboBoxTextBoxStyle}"
Height="{TemplateBinding Height}"/>
<ToggleButton Grid.Column="1" Margin="0" Style="{StaticResource ToggleButtonStyle}"
Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<TextBlock Grid.Column="1" Style="{StaticResource ToggleButtonTextBlockStyle}"/>
</ToggleButton>
<ContentPresenter Name="ContentSite"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
Content="{TemplateBinding SelectionBoxItem}"
ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="5,0,0,0"/>
<Popup Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Fade">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
BorderThickness="3"
CornerRadius="5"
Background="{StaticResource AddControlTextBoxBackgroundBrush}"
BorderBrush="{StaticResource AddControlInnerBorderBrush}"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate >
<TextBlock Style="{StaticResource SelectedTextBlockStyle}" Text="{Binding}" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ComboBoxItem">
<Setter Property="Foreground" Value="{StaticResource ForegroundTextNormalBrush}" />
<Setter Property="FontFamily" Value="{StaticResource ArialFontFamily}"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
</Setter.Value>
</Setter>
</Style>

Try setting
simpleComboBox.SelectedItem = SelectedItem;
and also set IsSynchronizedWithCurrentItem="True".
This will solve your issue.

How to create a menu in WPF that has Microsoft Web Application styling

We have been tasked with designing an enterprise application in WPF that will replace a battleship grey Winforms application with a modern look and feel.
We like the look and feel that Microsoft web applications currently possess:
We could create these menus in WPF in the usual way:
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_File">
<MenuItem Header="_New" />
<MenuItem Header="_Open" />
<MenuItem Header="_Save" />
<Separator />
<MenuItem Header="_Exit" />
</MenuItem>
</Menu>
<TextBox AcceptsReturn="True" />
</DockPanel>
But we'd get something that looks like a Winforms menu.
I've seen some rather impressive styling efforts like this one, but they all seem to have the same familiar Winforms shape. I've also seen menus in libraries like MahApps Metro, but these strike us as too spartan.
Is the WPF Menu control flexible enough to be styled as shown in the picture above, or should we go another route like building a custom menu control from Stack Panels and Lists? What are the tradeoffs?
Bonus points (i.e. a bounty) will be awarded for xaml/code that does exactly this.
An example of this menu style in action:
https://www.visualstudio.com/

WPF was really designed with the possibility to change the look and behavior of every out-of-the-box mechanisms / controls (buttons, menus, treeview, etc.).
So, in general, it's better to do this rather than to rewrite everything. For example, if you redesign your custom menu, you'll have to think about keyboard, UI automation, etc...
So, I gave a shot at your example and tried to build a minimum working sample - pure XAML - that mimics VS online menu (I've also added the hover background color change that's not by default in WPF's menu).
Here is the result and, as you see, it looks very similar:
Here is the XAML. I've chosen to use a custom control template per each MenuItem. I think it's quite practical when you need to really customize every item.
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="550" Width="525">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="btv" />
<!-- style a top level menu item -->
<ControlTemplate x:Key="VsMenuTop" TargetType="MenuItem">
<StackPanel TextBlock.FontSize="15px" Height="40">
<!-- label, icons, etc. -->
<Label Content="{TemplateBinding Header}" Margin="5" Foreground="White" />
<!-- sub items -->
<Popup IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Focusable="False">
<Border BorderThickness="1" Background="White" BorderBrush="#E0E0E0">
<StackPanel IsItemsHost="True" />
</Border>
</Popup>
<StackPanel.Style>
<Style TargetType="StackPanel">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#106EBE" />
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>
</ControlTemplate>
<!-- style a non-top level menu item -->
<ControlTemplate x:Key="VsMenuSub" TargetType="MenuItem">
<DockPanel TextBlock.FontSize="15px" x:Name="panel">
<!-- label, icons, etc. -->
<Image Source="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}" Width="20" Margin="5,0" />
<Label Content="{TemplateBinding Header}" Foreground="Black" Margin="0,5,5,5" />
<!-- draw the right arrow only if this menu item has sub items -->
<Image Source="icon_right.png" Visibility="{Binding HasItems, Converter={StaticResource btv}, RelativeSource={RelativeSource TemplatedParent}}" />
<!-- sub items -->
<Popup IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Focusable="False" Placement="Right" >
<Border BorderThickness="1" Background="White" BorderBrush="#E0E0E0">
<StackPanel IsItemsHost="True" />
</Border>
</Popup>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" TargetName="panel" Value="#EFF6FC" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- style the separator -->
<ControlTemplate x:Key="VsMenuSep" TargetType="Separator">
<Border Height="1" Background="#E0E0E0" />
</ControlTemplate>
<!-- style the VSOnline -->
<ControlTemplate x:Key="VsOnline" TargetType="MenuItem">
<StackPanel TextBlock.FontSize="15px" Height="40" Orientation="Horizontal" Background="#005A9E">
<Label Content="{TemplateBinding Header}" Margin="5" Foreground="White" />
<Image Source="icon_down.png" Height="20" Margin="0,0,5,0" />
<!-- sub items -->
<Popup IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Focusable="False">
<Border BorderThickness="1" Background="White" BorderBrush="#E0E0E0">
<StackPanel IsItemsHost="True" />
</Border>
</Popup>
</StackPanel>
</ControlTemplate>
<!-- some base stuff -->
<Style TargetType="Menu">
<Setter Property="Background" Value="#0078D7" />
<Setter Property="Height" Value="40px" />
</Style>
</Window.Resources>
<!-- the real app and real menu -->
<StackPanel>
<Menu IsMainMenu="True">
<MenuItem Header="_VSOnline" Template="{StaticResource VsOnline}" >
<MenuItem Header="_Whatever" Template="{StaticResource VsMenuSub}" />
</MenuItem>
<MenuItem Header="_Dashboards" Template="{StaticResource VsMenuTop}">
<MenuItem Header="_Overview" Template="{StaticResource VsMenuSub}" />
</MenuItem>
<MenuItem Header="_Code" Template="{StaticResource VsMenuTop}">
<MenuItem Header="_Files" Template="{StaticResource VsMenuSub}" />
<MenuItem Header="_Commits" Template="{StaticResource VsMenuSub}" />
<MenuItem Header="_Pushes" Template="{StaticResource VsMenuSub}" />
</MenuItem>
<MenuItem Header="_Work" Template="{StaticResource VsMenuTop}">
<MenuItem Header="_Backlogs" Template="{StaticResource VsMenuSub}" Icon="icon_backlogs.png" />
<MenuItem Header="_Queries" Template="{StaticResource VsMenuSub}" Icon="icon_queries.png" />
<Separator Template="{StaticResource VsMenuSep}" />
<MenuItem Header="_New Work Item" Template="{StaticResource VsMenuSub}">
<MenuItem Header="_Epic" Template="{StaticResource VsMenuSub}" Icon="icon_epic.png" />
<MenuItem Header="_Feature" Template="{StaticResource VsMenuSub}" Icon="icon_feature.png" />
<MenuItem Header="_Issue" Template="{StaticResource VsMenuSub}" Icon="icon_issue.png" />
<MenuItem Header="_Task" Template="{StaticResource VsMenuSub}" Icon="icon_task.png" />
<MenuItem Header="_Test Case" Template="{StaticResource VsMenuSub}" Icon="icon_testcase.png" />
<MenuItem Header="_User Story" Template="{StaticResource VsMenuSub}" Icon="icon_userstory.png" />
</MenuItem>
<MenuItem Header="_Bug" Template="{StaticResource VsMenuSub}" Icon="icon_bug.png" />
</MenuItem>
</Menu>
</StackPanel>
</Window>
The project is available here on github.

You are probably looking for some Wpf Theme to start with.
Such as
http://brianlagunas.com/free-metro-light-and-dark-themes-for-wpf-and-silverlight-microsoft-controls/
or have a look at that SO answer:
Any free WPF themes?
Then you probably would want to customize it even more with look and feel you are looking for.

You could use something like: http://materialdesigninxaml.net

This is the default menu, but white, you can change the background color, text font, height, and everything else you want just by editing this style.
Here your MainWindow.xaml
<Menu IsMainMenu="True" HorizontalContentAlignment="Left" Background="Transparent" >
<MenuItem Header="File" HorizontalContentAlignment="Left" >
<MenuItem Header="Menu Item 01" Command="{Binding MenuCommand}" CommandParameter="Param01" >
<MenuItem.Icon>
<Image Source="Images/settings.png" Height="20"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Menu Item 02" Command="{Binding MenuCommand}" CommandParameter="Param02" >
<MenuItem.Icon>
<Image Source="Images/settings.png" Height="20"/>
</MenuItem.Icon>
</MenuItem>
<Separator />
<MenuItem Header="LogOff" Command="{Binding MenuCommand}" CommandParameter="LogOff" >
<MenuItem.Icon>
<Image Source="Images/logoff.png" Height="20"/>
</MenuItem.Icon>
</MenuItem>
</MenuItem>
</Menu>
style in app.xaml file
<!-- Menu Begin -->
<!-- Menu -->
<Style TargetType="{x:Type Menu}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.MenuBarBrushKey}}"/>
<Setter Property="FontFamily" Value="{DynamicResource {x:Static SystemFonts.MenuFontFamilyKey}}"/>
<Setter Property="FontSize" Value="{DynamicResource {x:Static SystemFonts.MenuFontSizeKey}}"/>
<Setter Property="FontStyle" Value="{DynamicResource {x:Static SystemFonts.MenuFontStyleKey}}"/>
<Setter Property="FontWeight" Value="{DynamicResource {x:Static SystemFonts.MenuFontWeightKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Menu}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Level 0 -->
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}" TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid x:Name="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" Visibility="Collapsed"/>
<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="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" >
<Border x:Name="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Background="White" Padding="2">
<ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<Grid x:Name="Grid1" RenderOptions.ClearTypeHint="Enabled">
<Canvas x:Name="Canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
</Canvas>
<Rectangle x:Name="Rectangle" Fill="Transparent" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
</Grid>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="True">
<Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
</Trigger>
<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="#3D26A0DA"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
<Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
</Trigger>
<Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False">
<Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
<Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- Level 0 -->
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}" TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid x:Name="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" Visibility="Collapsed"/>
<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="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" >
<Border x:Name="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.MenuColorKey}}" Padding="2">
<ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<Grid x:Name="Grid1" RenderOptions.ClearTypeHint="Enabled">
<Canvas x:Name="Canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
</Canvas>
<Rectangle x:Name="Rectangle" Fill="Transparent" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
</Grid>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="True">
<Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
</Trigger>
<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="#3D26A0DA"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
<Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
</Trigger>
<Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False">
<Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
<Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- Level 1,2,3,4,... -->
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}" TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid Margin="-1">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="22" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
<ColumnDefinition Width="13"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
<Border x:Name="GlyphPanel" BorderBrush="#FF26A0DA" BorderThickness="1" Background="#3D26A0DA" Height="22" Margin="-1,0,0,0" Visibility="Hidden" VerticalAlignment="Center" Width="22" >
<Path x:Name="Glyph" Data="{DynamicResource ลง}" Fill="#FF212121" FlowDirection="LeftToRight" Height="11" Width="9"/>
</Border>
<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="2" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
<TextBlock Grid.Column="4" Margin="{TemplateBinding Padding}" Opacity="0.7" Text="{TemplateBinding InputGestureText}" VerticalAlignment="Center"/>
<Path x:Name="RightArrow" Grid.Column="5" Data="M0,0L4,3.5 0,7z" Fill="#FF212121" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Center"/>
<Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" HorizontalOffset="-2" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Right" VerticalOffset="-3">
<Border x:Name="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.MenuColorKey}}" Padding="2">
<ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<!--Fill="{Binding Background, ElementName=SubMenuBorder}" White #FFF0F0F0-->
<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
</Canvas>
<Rectangle Fill="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
</Grid>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="True">
<Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
</Trigger>
<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="Transparent"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
<Setter Property="Fill" TargetName="Glyph" Value="#FF707070"/>
<Setter Property="Fill" TargetName="RightArrow" Value="#FF707070"/>
</Trigger>
<Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False">
<Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
<Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- Level 1,2,3,4,... -->
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuItemTemplateKey}" TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid Margin="-1">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="22" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
<ColumnDefinition Width="13"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
<Border x:Name="GlyphPanel" BorderBrush="#FF26A0DA" BorderThickness="1" Background="#3D26A0DA" ClipToBounds="False" HorizontalAlignment="Center" Height="22" Margin="-1,0,0,0" Visibility="Hidden" VerticalAlignment="Center" Width="22">
<Path x:Name="Glyph" 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" Height="11" Width="10"/>
</Border>
<ContentPresenter x:Name="menuHeaderContainer" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="2" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
<TextBlock x:Name="menuGestureText" Grid.Column="4" Margin="{TemplateBinding Padding}" Opacity="0.7" Text="{TemplateBinding InputGestureText}" VerticalAlignment="Center"/>
</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="#3D26A0DA"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
<Setter Property="Fill" TargetName="Glyph" Value="#FF707070"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted" Value="True"/>
<Condition Property="IsEnabled" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="templateRoot" Value="#0A000000"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#21000000"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- Menu End -->

I would create the menu with XAML
XAML of Page something like this:
<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="10" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Foreground" Value="White" />
</Style>
</Window.Resources>
<Grid x:Name="Content">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Background="CornflowerBlue">
<TextBlock Text="Menu1" MouseLeftButtonDown="OnMouseLeftButtonDown" />
<TextBlock Text="Menu2" MouseLeftButtonDown="OnMouseLeftButtonDown" />
<TextBlock Text="Menu3" MouseLeftButtonDown="OnMouseLeftButtonDown" />
</StackPanel>
<Border Grid.Row="1" Background="Bisque"></Border>
</Grid>
</Grid>
And in Code:
private void OnMouseLeftButtonDown(object sender, MouseEventArgs e) {
var textBlock = sender as TextBlock;
if (textBlock == null) return;
var relativePoint = VisualTreeHelper.GetOffset(textBlock);//textBlock.TransformToAncestor(Content).Transform(new Point(0, 0));
//Almost invisible Background - If the user clicks it the menu is hidden
var back = new Border{Background = new SolidColorBrush(Color.FromArgb(1,255,255,255))};
back.MouseLeftButtonDown += (o, args) => {
Content.Children.Remove(back.Tag as UIElement);
Content.Children.Remove(back);
};
Content.Children.Add(back);
//Build menu
var menu = new Border{Background = new SolidColorBrush(Colors.White), Width = 200, Height = 500, BorderBrush = new SolidColorBrush(Colors.Gray), BorderThickness = new Thickness(1), HorizontalAlignment = HorizontalAlignment.Left, VerticalAlignment = VerticalAlignment.Top};
back.Tag = menu;
menu.RenderTransform = new TranslateTransform(relativePoint.X, relativePoint.Y + textBlock.ActualHeight + 5);
//Do some more styling
//Fill Menu here according to the tag of the TextBlock (switch(textBlock.Tag){...} or use a predefined view
Content.Children.Add(menu);
//Hide the Menu on click - TODO Implement logic to hide menu if a MenuItem was clicked...
menu.MouseLeftButtonDown += (o, args) => {
Content.Children.Remove(back.Tag as UIElement);
Content.Children.Remove(back);
};
}
OK, this is a very basic example and needs a lot of improvement but I think you can work on it...

How to set HighlightBrushKey dynamically?

Here is my code -
<Style x:Key="CustomComboBox" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Background" Value="LightGray"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.Resources>
// This part, I want to set dynamically
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="{TemplateBinding BorderBrush}"></SolidColorBrush>
</Grid.Resources>
<ToggleButton Grid.Column="2" Template="{StaticResource ComboBoxToggleButton}" x:Name="ToggleButton" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" BorderBrush="{TemplateBinding BorderBrush}"/>
<ContentPresenter HorizontalAlignment="Left" Margin="10,3,23,3" x:Name="Content" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False"/>
<TextBox x:Name="PART_EditableTextBox" Visibility="Hidden" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" Margin="3,3,23,3" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" IsReadOnly="{TemplateBinding IsReadOnly}" FontSize="{TemplateBinding FontSize}"/>
<Popup Placement="Center" x:Name="Popup" Focusable="False" AllowsTransparency="True"
IsOpen="{TemplateBinding IsDropDownOpen}" PopupAnimation="Fade" VerticalOffset="-2">
<Grid MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}"
x:Name="DropDown" SnapsToDevicePixels="True">
<Border BorderBrush="LightGray" BorderThickness="1,1,1,1" x:Name="DropDownBorder" Background="White" />
<ScrollViewer x:Name="ScrollViewer" Template="{DynamicResource CustomScrollViewerControlTemplate}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Margin="4,6,4,6" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
<ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter Property="MinHeight" Value="95" TargetName="DropDownBorder"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="LightGray"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger Property="AllowsTransparency" SourceName="Popup" Value="true">
<Setter Property="Margin" Value="0,2,0,0" TargetName="DropDownBorder"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox"/>
<Setter Property="Visibility" Value="Hidden" TargetName="ContentSite"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am creating Custom ComboBox. Here I am trying to get BorderBrush value from ComboBox's TemplateBinding. But I am not getting it. It is always white. I dont know why it is happening, may be my way of getting the Brush is wrong.
Please suggest.

How to set HighLightColorBrush dynamically? [duplicate]

Here is my code -
<Style x:Key="CustomComboBox" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Background" Value="LightGray"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.Resources>
// This part, I want to set dynamically
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="{TemplateBinding BorderBrush}"></SolidColorBrush>
</Grid.Resources>
<ToggleButton Grid.Column="2" Template="{StaticResource ComboBoxToggleButton}" x:Name="ToggleButton" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" BorderBrush="{TemplateBinding BorderBrush}"/>
<ContentPresenter HorizontalAlignment="Left" Margin="10,3,23,3" x:Name="Content" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False"/>
<TextBox x:Name="PART_EditableTextBox" Visibility="Hidden" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" Margin="3,3,23,3" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" IsReadOnly="{TemplateBinding IsReadOnly}" FontSize="{TemplateBinding FontSize}"/>
<Popup Placement="Center" x:Name="Popup" Focusable="False" AllowsTransparency="True"
IsOpen="{TemplateBinding IsDropDownOpen}" PopupAnimation="Fade" VerticalOffset="-2">
<Grid MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}"
x:Name="DropDown" SnapsToDevicePixels="True">
<Border BorderBrush="LightGray" BorderThickness="1,1,1,1" x:Name="DropDownBorder" Background="White" />
<ScrollViewer x:Name="ScrollViewer" Template="{DynamicResource CustomScrollViewerControlTemplate}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Margin="4,6,4,6" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
<ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter Property="MinHeight" Value="95" TargetName="DropDownBorder"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="LightGray"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger Property="AllowsTransparency" SourceName="Popup" Value="true">
<Setter Property="Margin" Value="0,2,0,0" TargetName="DropDownBorder"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox"/>
<Setter Property="Visibility" Value="Hidden" TargetName="ContentSite"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am creating Custom ComboBox. Here I am trying to get BorderBrush value from ComboBox's TemplateBinding. But I am not getting it. It is always white. I dont know why it is happening, may be my way of getting the Brush is wrong.
Please suggest.

Categories

Resources