WPF button template alignment not setting correctly - wpf

I have created a button template consisting of a border and a content presenter. A style is then wrapped around this template and applied to a button. However, when this button is used it is not carrying the values for horizontal and vertical alignment. In the designer the alignments are showing and the button is in the correct place, but when I run the program the button appears to have horizontal alignment = left and vertical alignment = right. Any ideas?
Here is the code for the template:
<ControlTemplate TargetType="Button" x:Key="DefaultButtonTemplate">
<Border CornerRadius="4"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
<Grid>
<ContentPresenter ContentSource="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
</Grid>
</Border>
</ControlTemplate>
Here is the code for the style:
<Style TargetType="Button">
<Setter Property="Background" Value="{DynamicResource WindowHeaderBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource WindowBorderBrush}" />
<Setter Property="Template" Value="{DynamicResource DefaultButtonTemplate}" />
<Setter Property="BorderThickness" Value="1" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource ButtonHoverBrush}" />
<Setter Property="BitmapEffect" Value="{DynamicResource ButtonHoverGlow}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{DynamicResource ButtonPressedBrush}" />
</Trigger>
</Style.Triggers>
</Style>
And here is the code for the button:
<Button Name="button1" Height="31" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,10,10">Button</Button>
There is no code behind file
The result of this code is a button that appears in the TOP LEFT corner of the parent flat up against the edge

i think that the line
<Button Name="button1" Height="31" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,10,10">Button</Button>
should be
<Button Name="button1" Height="31" VerticalContentAlignment="Bottom" HorizontalContentAlignment="Right" Margin="0,0,10,10">Button</Button>
or else you are only setting the alignment of the button not the content.

Related

Custom color of the button on over on WPF [duplicate]

I have a button and I want to change the background color of button. but when I set the background property to a color like blue:
<Button Width="75" Height="25" Margin="6" Background="Blue"/>
and when the button has focus, the color changes in white and my color.
How can I set this white color to another color?
I believe that your problem is caused by the default ControlTemplate for the Button control. The colour animations that you describe are defined in this ControlTemplate and so you need to provide your own ControlTemplate to remove this behaviour:
<Button Content="Click Me" Background="Blue">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsFocused" Value="True">
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
First Solution is
<Style x:Key="BtnStyle" TargetType="Button">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="gd" Height="120" Width="120" Background="{TemplateBinding Background}">
<ContentPresenter></ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsFocused" Value="True">
<Setter Property="Background" Value="White" TargetName="gd"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Visibility" Value="Collapsed" TargetName="gd"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button Width="75" Style="{StaticResource BtnStyle }" Content="ok" Height="25" Background="Blue"/>
second solution
<Style x:Key="Button_focusvisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border SnapsToDevicePixels="True" Background="White">
<TextBlock Text="Ok" ></TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button Width="75" FocusVisualStyle="{StaticResource Button_focusvisual }" Content="ok" Height="25" Background="Blue"/>

Background image on a button disappears on mouse over

In my WPF window application, when I take the mouse over my button, the background image on the button disappears and the button appears as if it does not have any image. What I want is, when the mouse is on the button, or when the button is clicked, the image still should be shown on the button, it shouldn't disappear.
Here is my code:
<Button Margin="465, 3, 0, 0" Width="25" Height="20" IsEnabled="True" IsDefault="False" IsCancel="False" BorderBrush="{x:Null}" ToolTip="Reload pads list"> <Button.Background> <ImageBrush ImageSource="/FieldPlanner;component/Images/reload.gif" /> </Button.Background> </Button>
What is happening to you is normal. When you create a button, it will use its default properties in case you don't change/override them.
In this case, when you create your button, you are overriding Background property, but only for normal state of your button. If you want background to change also when hovering, you should tell the button to do so.
For this purpose, I suggest you to override the button Template using styles, like this:
<Window x:Class="ButtonTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ImageBrush x:Key="ButtonImage" ImageSource="/ButtonTest;component/Resources/ok.png"></ImageBrush>
<Style TargetType="Button">
<Setter Property="Background" Value="{StaticResource ButtonImage}"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Cursor" Value="Hand" />
<!-- If we don't tell the background to change on hover, it will remain the same -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="84,75,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
</Grid>
</Window>
In this case, this style will be applied for all your buttons. You can specify which button to apply style by adding an x:Key to your style and then specify it in your button:
<Style TargetType="Button" x:Key="ButtonStyled">
.....
<Button Style="{StaticResource ButtonStyled}" Content="Button" Height="23" HorizontalAlignment="Left" Margin="84,75,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
I am a little late to the party, but you are all doing this too complicated.
All you have to do is set the Content and the Background:
<Button x:Name="YouTubeButton" Width="148" Height="76" BorderBrush="Black"
Click="YouTubeButton_Click" Margin="112,20,112,0"
MouseEnter="Button_OnMouseEnter" MouseLeave="Button_MouseLeave">
<Button.Content>
<Image Source="Images/YouTube.png" />
</Button.Content>
<Button.Background>
<ImageBrush ImageSource="Images/YouTube.png" />
</Button.Background>
</Button>
(Optional - makes the mouse behave like a hand clicking a link)
#region Button_MouseLeave(object sender, MouseEventArgs e)
/// <summary>
/// This event is fired when the mouse leaves a button
/// </summary>
private void Button_MouseLeave(object sender, MouseEventArgs e)
{
// Change the cursor back to default
Cursor = null;
}
#endregion
#region Button_OnMouseEnter(object sender, EventArgs e)
/// <summary>
/// This event is fired when the mouse hovers over a button
/// </summary>
public void Button_OnMouseEnter(object sender, EventArgs e)
{
// Change the cursor to a Hand pointer
Cursor = Cursors.Hand;
}
#endregion
Here is what I'm using..
<Button
x:Name="buttonName"
Style="{DynamicResource myButtonStyle}"
HorizontalContentAlignment="Center"
HorizontalAlignment="Left"
Width="130"
VerticalAlignment="Top"
Height="30"
>
<ContentControl>
<Image Source="/MYAPPNAME;component/buttonimage.png" Width="30" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center" />
</ContentControl>
</Button>
And the related style (myButtonStyle) code is:
<Style x:Key="myButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="GhostWhite"/>
<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border
x:Name="border"
CornerRadius="6"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="true"
>
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Disable button mouse over effect

I have a wppf button with a background image.
When I mouse over background will be empty and a button is shown.
How can I disable mouse effect?
<Button BorderBrush="{x:Null}" Content="Reset" BorderThickness="0"Foreground="White" Focusable="False">
<Button.Background>
<ImageBrush ImageSource="button.png" />
</Button.Background>
Here's how I disable the visual mouseover effects on buttons. I left in some of my settings just to get you a feel of how to play with the triggers and stuff, feel free to experiment!
<Style TargetType="Button" x:Key="ImageButton" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="5"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Gainsboro" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value="0.25" />
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
EDIT: Using the "BasedOn" + setting FocusVisualStyle to null (first 2 lines) gets rid of the mouse over effects. Everything else is just examples. I added a border there in order to play with it through a trigger (since I want a custom mouseover effect).
In the ControlTemplate of the Button the Background property will be overridden by a trigger.
You can either redo the whole ControlTemplate and leave out the Background change or just add the image as content of your Button like so to avoid all these complications:
<Button.Content>
<Image Source="button.png" />
</Button.Content>
Or if you need the text in there as well:
<Button.Content>
<Grid>
<Image Source="button.png" />
<TextBlock Text="Reset" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Grid>
</Button.Content>

Datagrid mouseover header image overlapping

I have image to display when I do mouseover on column header. But imp thing is it should be display below columnheader area.
I am able to create that but's it's overlapping with below cell. Here is image.
Here is my code:
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Height" Value="26" />
<Setter Property="Width" Value="126" />
<Setter Property="Foreground" Value="{DynamicResource ContrastWhiteBrush}" />
<Setter Property="Background" Value="{DynamicResource ContentToGreyedOutBrush}" />
<Setter Property="Template" Value="{StaticResource ColumnHeaderControlTemplate}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource GridHeaderMouseOverBrush}" />
</Trigger>
<Trigger Property="prism:DataGridProperties.IsMouseOverGridCellColumnHeader" Value="True">
<Setter Property="Background" Value="{DynamicResource GridHeaderMouseOverBrush}" />
</Trigger>
</Style.Triggers>
<ControlTemplate x:Key="ColumnHeaderControlTemplate" TargetType="{x:Type DataGridColumnHeader}" >
<AdornerDecorator>
<Grid Background="{TemplateBinding Background}" x:Name="dgColumnHeader" Panel.ZIndex="10001">
<ad:Interaction.Behaviors>
<GridColumnHeaderControl:GridAdornerBehavior AdornerTemplate="{StaticResource AdornerDataTemplate}" Panel.ZIndex="19999">
<ad:Interaction.Triggers>
<ad:EventTrigger SourceName="dgColumnHeader" EventName="MouseEnter">
<ad:InvokeCommandAction CommandName="ShowAdornerCommand"/>
</ad:EventTrigger>
<ad:EventTrigger SourceName="dgColumnHeader" EventName="MouseLeave">
<ad:InvokeCommandAction CommandName="HideAdornerCommand"/>
</ad:EventTrigger>
</ad:Interaction.Triggers>
</GridColumnHeaderControl:GridAdornerBehavior>
</ad:Interaction.Behaviors>
<Border x:Name="border" BorderBrush="Black" BorderThickness="0,0,1,1" Grid.ColumnSpan="1">
<Rectangle Width="116" Margin="3,3,3,3" HorizontalAlignment="Center" RadiusX="7" RadiusY="7" x:Name="PART_Rectangle" Fill="{DynamicResource ContentOutofFocusBrush}"></Rectangle>
</Border>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" />
</Grid>
</AdornerDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_Rectangle" Property="Fill" Value="{DynamicResource ActiveItemBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<DataTemplate x:Key="AdornerDataTemplate">
<Grid HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,13,0,0" Grid.ZIndex="99">
<Button Content="X" Width="28" Height="26" Panel.ZIndex="10002" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ctrls:RhinoDataGrid}}, Path=RemoveSelectedColumnCommand}">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Background" Value="{DynamicResource GridHeaderMouseOverBrush}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Heavy"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border Background="{TemplateBinding Background}" CornerRadius="0,0,12,12" BorderThickness="1,0,1,1" BorderBrush="Black">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</Grid>
</DataTemplate>
Some how my rowheader is working. my row header width is 36 and close button width is 28 with left margin 26. and some how image is no overlapping there with cell
Pls help me to fix.
Thanks
Dee
The height of the header is 26
<Setter Property="Height" Value="26" />
How do you expect it to display an image with a height > 26 ?
In order to show your “Close” button on top of the other control, you have to add “Popup” control and add “Close” button as its child. You can define maximum one child, which can be any UIElement.
You should define Event trigger for DatagridColumnHeader’s mouse over event and set “IsOpen = true” of popup control.
e.g.
<Popup Name="myPopup">
<TextBlock Name="myPopupText"
Background="LightBlue"
Foreground="Blue">
Popup Text
</TextBlock>
</Popup>
You can also set below properties to get the expected result.
AllowsTransparency="True"
Placement="Relative"
PlacementTarget="{Binding ElementName=Border}" /* your control name */
HorizontalOffset="0"
VerticalOffset="60"
PopupAnimation="Fade"

When I apply a template to my MenuItem it no longer displays a drop-down when clicked

I had a WPF menu which I'd styled using control templates. Then the client wanted to use images instead of text for the Top Level navigation items.
No problem, I created a control template for each top-level item and set my Template attribute on each MenuItem to match the custom template like the one below. I've a Trigger that changes the image on rollover.
My problem is that when you click on the Menu Item that should have a sub-menu items that they no longer drop-down.
The commands fire for the Top-level items that don't have children. And as soon as I remove my code specifying the template from my Menu Item with children I see the text version with the drop-down.
What do I need to do to keep my image-based top-level menu item and keep my drop-downs?
Thanks in advance.
<Menu Grid.Row="0" Grid.Column="0" Name="uxMenu" Margin="0 2 0 0">
<MenuItem Header="Home" Name="uxHome" Command="cmds:NavigationCommands.HomeViewNavigationCommand" Template="{DynamicResource HomeButtonTemplate}"/>
<MenuItem Header="Admin" Name="uxAdmin" Template="{DynamicResource MenuExitButtonTemplate}">
<MenuItem Header="_Setup">
<MenuItem Header="_Overview" Command="cmds:NavigationCommands.MenuAdminSetupOverviewNavigationCommand"/>
<MenuItem Header="_Cameras" Command="cmds:NavigationCommands.MenuAdminSetupCameraNavigationCommand" />
</MenuItem>
</MenuItem>
</Menu>
<ControlTemplate x:Key="HomeButtonTemplate" TargetType="{x:Type MenuItem}">
<Grid >
<Image x:Name="myimage" Source="/Images/Navigation/home_off.png" Width="100" Height="52" />
</Grid>
<ControlTemplate.Triggers >
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="myimage" Property="Source" Value="/Images/Navigation/home_on.png" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
In response to H.B's post...
I do have a big ol' set of control templates that I'm currently using to style my menu. So if I want to specify a different control template for each of my top level headers I'm going to have to have an entirely new set of control templates for each one?
I'm unsure of the exact syntax to use, especially for the x:Key and TargetType attributes.
For example. My current code looks like this for my TopLevelHeader and SubmenuHeader control templates. (Copied from the 'menutemplatingpage' you reference')
<!-- TopLevelHeader (children)-->
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}" TargetType="MenuItem">
<Border Name="Border">
<Grid>
<ContentPresenter Margin="0 24 0 14" ContentSource="Header" RecognizesAccessKey="True" />
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Fade">
<Border
Name="SubmenuBorder"
SnapsToDevicePixels="True"
Background="{StaticResource WindowBackgroundBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1" >
<StackPanel
IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter TargetName="Popup" Property="PopupAnimation" Value="None"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="false">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter TargetName="Border" Property="Background" Value="Transparent"/>
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
<Setter TargetName="Border" Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="#fff"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter TargetName="Border" Property="Background" Value="Transparent"/>
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
<Setter TargetName="Border" Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4"/>
<Setter TargetName="SubmenuBorder" Property="Padding" Value="10"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- SubmenuHeader -->
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}" TargetType="MenuItem">
<Border Name="Border" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Icon"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut"/>
<ColumnDefinition Width="13"/>
</Grid.ColumnDefinitions>
<ContentPresenter
Name="Icon"
Margin="6,0,6,0"
VerticalAlignment="Center"
ContentSource="Icon"/>
<ContentPresenter
Name="HeaderHost"
Grid.Column="1"
ContentSource="Header"
RecognizesAccessKey="True"/>
<TextBlock x:Name="InputGestureText"
Grid.Column="2"
Text="{TemplateBinding InputGestureText}"
Margin="5,2,2,2"
DockPanel.Dock="Right"/>
<Path
Grid.Column="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 0 7 L 4 3.5 Z"
Fill="{StaticResource GlyphBrush}" />
<Popup
Name="Popup"
Placement="Right"
HorizontalOffset="-4"
IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Fade">
<Border
Name="SubmenuBorder"
SnapsToDevicePixels="True"
Background="{StaticResource WindowBackgroundBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1" >
<StackPanel
IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="4"/>
<Setter TargetName="SubmenuBorder" Property="Padding" Value="0,3,0,3"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
So if I add my new Control template with the key of "HomeButtonTemplate" as shown near the top of my post I'm going to have to add a new section (as well as all the other ControlTemplates for things like SubmenuItem etc.
How do these new ControlTemplates know that they belong to the same group of control templates? I feel I'm not asking this correctly.
Thanks for any advice you can give.
You completely remove the existing template (which is fairly complex) by specifying your own, your template no longer provides the necessary functionality. There is a part in the control template indentified with the name PART_Popup, which is used to display sub-items.
Check this page for a link (Default WPF themes) where you can download the default styles which include the templates to see what your template should look like.
Also have a look at the menu templating page which should give you an idea just how complex templating the menu is.
This might be a bit late but I recently had the same issue.
What worked for me was to create a StackPanel like so
<StackPanel ClipToBounds="True"
Orientation="Horizontal"
IsItemsHost="True" />
inside the Border which is inside the ControlTemplate.
Leaving you with something along the lines of this.
<ControlTemplate TargetType="Menu">
<Border Background="{TemplateBinding Background}"
BorderBrush="#252525"
BorderThickness="1"
CornerRadius="5">
<StackPanel ClipToBounds="True"
Orientation="Horizontal"
IsItemsHost="True" />
</Border>
</ControlTemplate>

Resources