Develop Reference

How do I attach a label to the menu in WPF?

I want to attach Label to the Menu, where I have components of MenuItem. I need to hide some MenuItems (I use Visibility.Collapsed). When I do it, labels move. How to fit it?
<Menu x:Name="Menu" DockPanel.Dock="Top">
<MenuItem Name="MenuStartGame" Header="Start new game" FontSize="16" Click="MenuStartGame_Click">
</MenuItem>
<MenuItem Name="MenuCancelMyTurn" Header="Cancel my turn" FontSize="16" Visibility="Collapsed" Click="CancelMyTurn_Click">
</MenuItem>
<MenuItem Name="MenuAddButtons" Header="Add buttons" FontSize="16" Click="AddButtons_Click">
</MenuItem>
<MenuItem Name="MenuRemoveButtons" Header="Remove buttons" FontSize="16" Click="RemoveButtons_Click">
</MenuItem>
<Label x:Name="labelTime" HorizontalContentAlignment="Center" Content="" Width="100">
</Label>
<Label x:Name="labelScore" HorizontalContentAlignment="Center" Content="" Width="100">
</Label>
</Menu>

If you do not want labels to move when you hide or show the others, you should not use Visibility.Collapsed, use Visibility.Hidden.
Maybe, if I understand correctly what you want to do, a Menu is not what you should use in your case. You can use a Grid and have a greater control on what the dimensions of your columns will be. Something like this:
<Grid x:Name="Menu" DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Name="MenuStartGame" Header="Start new game" FontSize="16" Click="MenuStartGame_Click">
</Button>
<ButtonName="MenuCancelMyTurn" Grid.Column="1" Header="Cancel my turn" FontSize="16" Visibility="Collapsed" Click="CancelMyTurn_Click">
</Button>
<DockPanel Grid.Column="1">
<ButtonName="MenuAddButtons" Header="Add buttons" FontSize="16" Click="AddButtons_Click">
</Button>
<ButtonName="MenuRemoveButtons" Header="Remove buttons" FontSize="16" Click="RemoveButtons_Click">
</Button>
</DockPanel>
<Label Grid.Column="2" x:Name="labelTime" HorizontalContentAlignment="Center" Content="" Width="100">
</Label>
<Label Grid.Column="3" x:Name="labelScore" HorizontalContentAlignment="Center" Content="" Width="100">
</Label>
</Grid>
This is not tested, but should be what you need.

How to add headers in WPF ListBox

How does one add a header in a ListBox in WPF? I have the below code and where the "Header - .." text is I'd like a header/group name of all the items below up to the next header:
<ListBox
x:Name="ItemsListBox"
Margin="0 16 0 16"
Style="{StaticResource MaterialDesignNavigationPrimaryListBox}">
<ListBox.Resources>
<Style TargetType="ScrollBar" BasedOn="{StaticResource MaterialDesignScrollBarMinimal}"/>
</ListBox.Resources>
Header - Config
<Separator/>
<ListBoxItem>Config menu 1</ListBoxItem>
<ListBoxItem>Config menu 2</ListBoxItem>
<ListBoxItem>Config menu 3</ListBoxItem>
<ListBoxItem>Config menu 4</ListBoxItem>
<ListBoxItem>Config menu 5</ListBoxItem>
<ListBoxItem>Config menu 6</ListBoxItem>
<ListBoxItem>Config menu 7</ListBoxItem>
Header - Tasks
<Separator/>
<ListBoxItem>Task menu 1</ListBoxItem>
<ListBoxItem>Task menu 2</ListBoxItem>
<ListBoxItem>Task menu 3</ListBoxItem>
<ListBoxItem>Task menu 4</ListBoxItem>
<ListBoxItem>Task menu 5</ListBoxItem>
<ListBoxItem>Task menu 6</ListBoxItem>
<ListBoxItem>Task menu 7</ListBoxItem>
<Separator/>
</ListBox>
Below is an example of what I'd like to achieve:
It doesn't neccesarily need to have icons with each listbox item, but mainly the headers like Options, User Settings and Administraton.
I'm only seeing other threads where people have multiple columns, but that creates two columns with different data and I would like to have 1 column but just add headers in bold and size higher font to separate the different menus from each other.
I'm using the MaterialDesign Theme for WPF - whether that is of any importance or relevance...
Thanks!
EDIT 1: As I haven't mentioned before - it doesn't have to be a ListBox, I used it as it is used in the code I used to write my menu:
<materialDesign:DrawerHost
IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
<materialDesign:DrawerHost.LeftDrawerContent>
<DockPanel MinWidth="220">
<ToggleButton
Style="{StaticResource MaterialDesignHamburgerToggleButton}"
DockPanel.Dock="Top"
HorizontalAlignment="Right"
Margin="16"
IsChecked="{Binding ElementName=MenuToggleButton, Path=IsChecked, Mode=TwoWay}"/>
<TextBox
x:Name="DemoItemsSearchBox"
Text="{Binding SearchKeyword, UpdateSourceTrigger=PropertyChanged}"
DockPanel.Dock="Top"
Margin="16, 4"
Width="200"
materialDesign:HintAssist.Hint="Search"
materialDesign:HintAssist.IsFloating="True"
materialDesign:TextFieldAssist.HasClearButton="True"
materialDesign:TextFieldAssist.HasOutlinedTextField="True"
materialDesign:TextFieldAssist.DecorationVisibility="Collapsed"
materialDesign:TextFieldAssist.TextFieldCornerRadius="4"/>
<ListBox
x:Name="ItemsListBox"
Margin="0 16 0 16"
Style="{StaticResource MaterialDesignNavigationPrimaryListBox}">
<ListBox.Resources>
<Style TargetType="ScrollBar" BasedOn="{StaticResource MaterialDesignScrollBarMinimal}"/>
</ListBox.Resources>
-- This is where the ListBox items would be --
</ListBox>
</DockPanel>
</materialDesign:DrawerHost.LeftDrawerContent>
<DockPanel>
<materialDesign:ColorZone
Padding="16"
materialDesign:ShadowAssist.ShadowDepth="Depth2"
Mode="PrimaryMid"
DockPanel.Dock="Top">
<DockPanel>
<StackPanel Orientation="Horizontal">
<ToggleButton
x:Name="MenuToggleButton"
Style="{StaticResource MaterialDesignHamburgerToggleButton}"
IsChecked="False"
Click="MenuToggleButton_OnClick"
AutomationProperties.Name="HamburgerToggleButton"/>
</StackPanel>
<materialDesign:PopupBox
DockPanel.Dock="Right"
PlacementMode="BottomAndAlignRightEdges"
StaysOpen="False">
<StackPanel>
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock
Text="Light"
Margin="0 0 10 0"/>
<ToggleButton
x:Name="DarkModeToggleButton"
Click="MenuDarkModeButton_Click"
Grid.Column="1"/>
<TextBlock
Text="Dark"
Margin="10 0 0 0"
Grid.Column="2"/>
<TextBlock
Text="Enabled"
Margin="0 10 10 0"
Grid.Row="1"/>
<ToggleButton
x:Name="ControlsEnabledToggleButton"
Margin="0 10 0 0"
IsChecked="{Binding ControlsEnabled}"
Grid.Row="1"
Grid.Column="1"/>
</Grid>
<Separator/>
<Button
Content="Hello World"
/>
<Button
Content="Nice Popup"
/>
<Button
Content="Can't Touch This"
IsEnabled="False"/>
<Separator/>
<Button
Content="Goodbye"
/>
</StackPanel>
</materialDesign:PopupBox>
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="22"
Margin="-152,0,0,0"
Text="Hi"/>
</DockPanel>
</materialDesign:ColorZone>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer
x:Name="MainScrollViewer"
Grid.Row="1"
materialDesign:ScrollViewerAssist.IsAutoHideEnabled="True"
HorizontalScrollBarVisibility="{Binding SelectedItem.HorizontalScrollBarVisibilityRequirement, FallbackValue=Disabled}"
VerticalScrollBarVisibility="{Binding SelectedItem.VerticalScrollBarVisibilityRequirement, FallbackValue=Disabled}" >
<ContentControl
Margin="{Binding MarginRequirement, FallbackValue=16}"/>
</ScrollViewer>
<materialDesign:Snackbar
x:Name="MainSnackbar"
MessageQueue="{materialDesign:MessageQueue}"
Grid.Row="1"/>
</Grid>
</DockPanel>
</materialDesign:DrawerHost>

For a hardcoded xaml, non-MVVM solution, I would use a Menu instead of a ListBox. I generally only use ListBoxes for binding to lists of data/items.
We can also achieve your icons with this method.
Obviously, style to your liking, but if you take out your ListBox, you can replace with Menu as follows:
<ScrollViewer>
<Menu>
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<Menu.Resources>
<Style TargetType="ScrollBar" BasedOn="{StaticResource MaterialDesignScrollBarMinimal}"/>
</Menu.Resources>
<TextBlock Text="Config" FontWeight="Bold" FontSize="20" IsEnabled="False" />
<Separator/>
<MenuItem>
<MenuItem.Header>
<DockPanel>
<materialDesign:PackIcon Kind="Settings" Margin="3" />
<TextBlock Text="Config item 1" Margin="3" />
</DockPanel>
</MenuItem.Header>
</MenuItem>
<MenuItem >
<MenuItem.Header>
<DockPanel>
<materialDesign:PackIcon Kind="Settings" Margin="3" />
<TextBlock Text="Config item 2" Margin="3" />
</DockPanel>
</MenuItem.Header>
</MenuItem>
<MenuItem >
<MenuItem.Header>
<DockPanel>
<materialDesign:PackIcon Kind="Settings" Margin="3" />
<TextBlock Text="Config item 3" Margin="3" />
</DockPanel>
</MenuItem.Header>
</MenuItem>
<MenuItem >
<MenuItem.Header>
<DockPanel>
<materialDesign:PackIcon Kind="Settings" Margin="3" />
<TextBlock Text="Config item 4" Margin="3" />
</DockPanel>
</MenuItem.Header>
</MenuItem>
<MenuItem >
<MenuItem.Header>
<DockPanel>
<materialDesign:PackIcon Kind="Settings" Margin="3" />
<TextBlock Text="Config item 5" Margin="3" />
</DockPanel>
</MenuItem.Header>
</MenuItem>
<MenuItem >
<MenuItem.Header>
<DockPanel>
<materialDesign:PackIcon Kind="Settings" Margin="3" />
<TextBlock Text="Config item 6" Margin="3" />
</DockPanel>
</MenuItem.Header>
</MenuItem>
<MenuItem >
<MenuItem.Header>
<DockPanel>
<materialDesign:PackIcon Kind="Settings" Margin="3" />
<TextBlock Text="Config item 7" Margin="3" />
</DockPanel>
</MenuItem.Header>
</MenuItem>
<TextBlock Text="Tasks" FontWeight="Bold" FontSize="20" />
<Separator/>
<MenuItem Header="Task item 1" />
<MenuItem Header="Task item 2" />
<MenuItem Header="Task item 3" />
<MenuItem Header="Task item 4" />
<MenuItem Header="Task item 5" />
<MenuItem Header="Task item 6" />
<MenuItem Header="Task item 7" />
</Menu>
</ScrollViewer>
This produces (I have only added icons to the top half, to illustrate how):

Probably not my Final answer, as still uses the MVVM from the demo, but using the demo project:
in the MainWindowViewModel.cs, add public ListCollectionView DemoLCV { get; } after public ObservableCollection<DemoItem> DemoItems { get; }
and add
DemoLCV = new ListCollectionView(DemoItems);
DemoLCV.GroupDescriptions.Add(new PropertyGroupDescription("Name"));
after
MoveNextCommand = new AnotherCommandImplementation(
_ =>
{
if (!string.IsNullOrWhiteSpace(SearchKeyword))
SearchKeyword = string.Empty;
SelectedIndex++;
},
_ => SelectedIndex < DemoItems.Count - 1);
then in the MainWindow.xaml amend the ListBox to:
<ListBox
x:Name="DemoItemsListBox"
Margin="0 16 0 16"
SelectedIndex="{Binding SelectedIndex}"
SelectedItem="{Binding SelectedItem, UpdateSourceTrigger=PropertyChanged}"
ItemsSource="{Binding DemoLCV}"
PreviewMouseLeftButtonUp="UIElement_OnPreviewMouseLeftButtonUp"
AutomationProperties.Name="DemoPagesListBox"
Style="{StaticResource MaterialDesignNavigationPrimaryListBox}">
<ListBox.Resources>
<Style TargetType="ScrollBar" BasedOn="{StaticResource MaterialDesignScrollBarMinimal}"/>
</ListBox.Resources>
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate DataType="domain:DemoItem">
<TextBlock Text="{Binding Name}" Margin="24 4 0 4" AutomationProperties.AutomationId="DemoItemPage"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This adds the menu item name as a category heading for each item.
This is just to demonstrate the concept.
to expand on the idea, with useful headings, add another property to the DemoItem class, e.g. categoryName, and populate this with the different categories on initialisation of the DemoItems collection.
Then change DemoLCV.GroupDescriptions.Add(new PropertyGroupDescription("Name")); in this example to DemoLCV.GroupDescriptions.Add(new PropertyGroupDescription("categoryName")); to group by your categories.
You can then play with the style of the TextBlock in the ListBox.GroupStyle to display the heading as desired.
I'll try and pop in an example later, plus see if I can come up with a non-MVVM option.

How to maintain a menuBar and StatusBar through all the app in WPF

I cannot find any answer to this after one hour looking for it.
Is there anyway I can keep like a "template" for all my windows in my application so they allways have the same StatusBar and Menu? So I don't have to add it manually everytime I create a Window, because then, if I add for example a MenuItem I need to add it to all the windows. Also, to keep the same Grid Layout, even this is not so important.
Something like when in PHP you use a default template and just change the body of it.
This is my actual code:
<Window x:Class="studies.myWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:studies"
mc:Ignorable="d"
Title="My window Title" Height="720" Width="1280" WindowStartupLocation="CenterScreen" Background="{DynamicResource BackgroundKey}" WindowState="Maximized">
<Grid>
<Grid.ColumnDefinitions>
[...]
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
[...]
</Grid.RowDefinitions>
<Menu HorizontalAlignment="Stretch" Margin="0 0 0 20 " Grid.RowSpan="1" Grid.Column="0" Grid.ColumnSpan="12" VerticalAlignment="Stretch">
<MenuItem Header="_File">
<MenuItem Header="New _Company"/>
<MenuItem Header="New _Proyect"/>
<Separator />
<MenuItem Header="_Exit" />
</MenuItem>
</Menu>
<StatusBar HorizontalAlignment="Stretch" Grid.ColumnSpan="12" Grid.Row="12" VerticalAlignment="Stretch" Background="#FF212121" BorderBrush="#FF696969" >
<StatusBar.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</StatusBar.ItemsPanel>
<StatusBarItem>
<TextBlock Name="lblCursorPosition" Text="Conectado como: daniaguado" Foreground="{DynamicResource LightForegroundBrush}" FontSize="10" IsEnabled="False" />
</StatusBarItem>
<Separator Grid.Column="1" />
<StatusBarItem Grid.Column="2">
<TextBlock Foreground="{DynamicResource LightForegroundBrush}"/>
</StatusBarItem>
<Separator Grid.Column="3" />
<StatusBarItem Grid.Column="4">
</StatusBarItem>
</StatusBar>
<!-- Content goes here -->
</Grid>
</Window>

You can create a class that inherits from Window, and add your common stuff to that.
Then, the windows in your application would use MyWindow instead of Window. This allows custom C# as well.
The downside is that you'd probably have to add the common controls in code, rather than using the designer, but it does give you what you want.
Sorry, can't post sample code right now as I'm on a tablet, but if you can't work this out, let me know and I'll try and show some code next time I'm on my PC

Combobox not setting width right in stack panel

I am trying to design a form in WPF. So far:
<Window x:Class="OCLMEditor.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:OCLMEditor"
mc:Ignorable="d"
Title="Christian Life and Ministry Editor" Height="517.366" Width="729.7">
<Grid Margin="0,0,0,3">
<StackPanel Grid.Row="0" Grid.ColumnSpan="4" VerticalAlignment="Top" >
<Menu x:Name="menuOCLM">
<MenuItem Header="File">
<MenuItem Header="Download Schedule Information"/>
<Separator/>
<MenuItem Header="Export Student Information"/>
<MenuItem Header="Import Student Information"/>
<Separator/>
<MenuItem Header="Page Setup"/>
<MenuItem Header="Print Preview"/>
<Separator/>
<MenuItem Header="Update Google Calendar"/>
<Separator/>
<MenuItem Header="Exit"/>
</MenuItem>
<MenuItem Header="Edit"/>
<MenuItem Header="View"/>
<MenuItem Header="Options"/>
<MenuItem Header="Help"/>
</Menu>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Grid.Row>1</Grid.Row>
<StackPanel Margin="5 0 0 0" HorizontalAlignment="Stretch">
<Grid.Column>0</Grid.Column>
<Grid.Row>1</Grid.Row>
<Grid.RowSpan>2</Grid.RowSpan>
<Label>Week of Meeting:</Label>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<ComboBox>
<ComboBoxItem>
<StackPanel Orientation="Horizontal">
<Image Source="special_event.png"></Image>
<Label>Date 1</Label>
</StackPanel>
</ComboBoxItem>
<ComboBoxItem>
<StackPanel Orientation="Horizontal">
<Image Source="special_event.png"></Image>
<Label>Date 2</Label>
</StackPanel>
</ComboBoxItem>
<ComboBoxItem>
<StackPanel Orientation="Horizontal">
<Image Source="special_event.png"></Image>
<Label>Date 3</Label>
</StackPanel>
</ComboBoxItem>
</ComboBox>
<Image HorizontalAlignment="Right" Source="event_time.png"></Image>
</StackPanel>
<Label>Note:</Label>
<ComboBox IsEditable="True">
<ComboBoxItem>Sample Text</ComboBoxItem>
</ComboBox>
<Label>Bible Reading for Week:</Label>
<TextBox>PSALMS 60-68</TextBox>
<Label>Opening Song:</Label>
<ComboBox>
<ComboBoxItem>Song 1</ComboBoxItem>
<ComboBoxItem>Song 2</ComboBoxItem>
<ComboBoxItem>Song 3</ComboBoxItem>
</ComboBox>
</StackPanel>
<StackPanel Orientation="Vertical" Margin="10 0 0 0">
<Label>Chairman:</Label>
<ComboBox></ComboBox>
<Label>Auxiliary Counsellor 1:</Label>
<ComboBox></ComboBox>
<Label>Auxiliary Counsellor 2:</Label>
<ComboBox></ComboBox>
<Label>Prayer:</Label>
<ComboBox></ComboBox>
</StackPanel>
</StackPanel>
<GridSplitter Grid.Column="1" Background="Yellow" HorizontalAlignment="Left" Width="5"></GridSplitter>
<WebBrowser x:Name="htmlView" VerticalAlignment="Stretch">
<Grid.Column>1</Grid.Column>
<Grid.Row>1</Grid.Row>
<Grid.RowSpan>4</Grid.RowSpan>
</WebBrowser>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="25*"/>
</Grid.ColumnDefinitions>
</Grid>
</Window>
The problem:
There are a few issues but I will limit this question to 1. The combo is not wide enough. The combo and image should fill the width.

StackPanel in designed to grow infinitely and it will not fit for what you need. Grid will be good choice.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<ComboBox>
<ComboBoxItem>
<StackPanel Orientation="Horizontal">
<Image Source="special_event.png"></Image>
<Label>Date 1</Label>
</StackPanel>
</ComboBoxItem>
<ComboBoxItem>
<StackPanel Orientation="Horizontal">
<Image Source="special_event.png"></Image>
<Label>Date 2</Label>
</StackPanel>
</ComboBoxItem>
<ComboBoxItem>
<StackPanel Orientation="Horizontal">
<Image Source="special_event.png"></Image>
<Label>Date 3</Label>
</StackPanel>
</ComboBoxItem>
</ComboBox>
<Image Grid.Column="1" HorizontalAlignment="Right" Source="event_time.png"></Image>
</Grid>

Menuitem to cut part of the text

The text that is in the MenuItem Header is getting a hidden part, as shown in the image below. The full text is "Informações de Pagamento", but the rest is hidden. I need this component to be this size, width =240
My axml file:
<Image.ContextMenu>
<ContextMenu HorizontalAlignment="Left" Width="240">
<MenuItem x:Name="infoPagamento" Header="_Informações de Pagamento" Cursor="Hand" ToolTip="Online" Click="statusOn_Click" Background="White" Margin="5" >
<MenuItem.Icon>
<Image Source="../Imagens/icons/menuusuario/icon_financeiro.png" />
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="alteracaoPlano" Header="Alteração de plano" Cursor="Hand" ToolTip="Alteração de plano" Click="statusAusente_Click" Background="White" Margin="5">
<MenuItem.Icon>
<Image Source="../Imagens/icons/menuusuario/icon_tarefa.png" />
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="Relatorios" Header="Relatórios" Cursor="Hand" ToolTip="Ocupado" Click="statusOcupado_Click" Background="White" Margin="5">
<MenuItem.Icon>
<Image Source="../Imagens/icons/menuusuario/icon_relatorios.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="Ajuda" Header="Ajuda" Cursor="Hand" ToolTip="Offline" Click="statusOff_Click" Background="White" Margin="5">
<MenuItem.Icon>
<Grid>
<Ellipse Width="20" Height="20" Fill="#48026E" />
<Label Content="?" Padding="0"
VerticalAlignment="Center" HorizontalAlignment="Center"
Foreground="White" FontSize="14" Cursor="Hand"/>
</Grid>
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</Image.ContextMenu>
My Resource:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type ContextMenu}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContextMenu}">
<Border x:Name="Border"
Background="White"
BorderThickness="1" BorderBrush="Transparent"
Margin="3" CornerRadius="10">
<StackPanel IsItemsHost="True"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

I had similar problem for Menu with drop down style. The problem is in reserved space for shortcut like CTRL+D (input gesture text). To overcome limitation I had to set menu item width to fixed size, override menuitem header with text block, set its width to auto (fixed width did not work like expected) and set negative margin for textblock (its size can be different for your problem).
Some short example:
<Menu IsMainMenu="True" Height="auto" Width="220" Margin="0" VerticalAlignment="Center" VerticalContentAlignment="Stretch" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch">
<MenuItem BorderThickness="0" Width="220" Margin="0" VerticalAlignment="Center" VerticalContentAlignment="Stretch" HorizontalAlignment="Left" HorizontalContentAlignment="Stretch">
<MenuItem.Icon>
<Ellipse Width="25" Height="25" HorizontalAlignment="Center" Stretch="Uniform">
<Ellipse.Fill>
<ImageBrush x:Name="imgAvatar" ImageSource="..." TileMode="Tile" Stretch="UniformToFill" />
</Ellipse.Fill>
</Ellipse>
</MenuItem.Icon>
<MenuItem.Header>
<TextBlock Text="Some long long text" Width="auto" TextWrapping="Wrap" Margin="0,0,-75,0" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left"/>
</MenuItem.Header>
<MenuItem BorderThickness="0" Width="220" Margin="0" VerticalAlignment="Center" VerticalContentAlignment="Stretch" HorizontalAlignment="Left" HorizontalContentAlignment="Stretch">
<MenuItem.Icon>
<Ellipse Width="25" Height="25" HorizontalAlignment="Center" Stretch="Uniform">
<Ellipse.Fill>
<ImageBrush x:Name="imgAvatar" ImageSource="..." TileMode="Tile" Stretch="UniformToFill" />
</Ellipse.Fill>
</Ellipse>
</MenuItem.Icon>
<MenuItem.Header>
<TextBlock Text="Some long long text 2" Width="auto" TextWrapping="Wrap" Margin="0,0,-75,0" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left"/>
</MenuItem.Header>
</MenuItem>
</MenuItem>
</Menu>

Try setting the width of MenuItem as "Auto"