MenuItems with fixed length - wpf

Question

I've got a Menu which receives a dynamic ItemsSource. The number of items and their length varies from time to time.
<Menu ItemsSource="{loc:CustomBinding CurrentMenuItems}" />
The menu's orientation is Horizontal, at times this causes the menu to overflow.
The Menu Items Template :
<ControlTemplate TargetType="{x:Type MenuItem}">
<TextBlock Text="{loc:CustomBinding Title}"
MaxWidth="200"
TextTrimming="CharacterEllipsis"/>
</ControlTemplate>
When there are more than 4 items, the menu overflows outside the left side of the screen
(sorry can't upload pictures from the work place).
Are there any built in overflow options to WPF menu?
Is there an option to control overflow of menu items from the menu itself? Something along the lines of ItemsMaxLength which I could of bound to a calculated field?

Answer 1

I'm not clear what you want to happen when the rightmost menu items cannot fit on the screen. Is it?:
wrap them to the next line
crop them fully
crop them partially
put them in an overflow dropdown?
show an ellipse or other "more" indicator?
The default ItemsPanel template for a Menu uses a WrapPanel...that should wrap them to the next line (unless you have set a height for the menu or your menu is in a container that is isn't allowing it to have its desired height).
We can change the ItemsPanel used to change how items are layed out.
In the example XAML below I show 4 ways to display a menu. You can use this within Kaxaml to see the different behaviours...resize the Window to a small width to see what happens when there isn't enough horizontal space.
the original menu style...wraps menu items that don't fit
a menu that fully crops the menu item that doesn't fit
a menu that partially crops the menu item that doesn't fit
a menu that uses a Toolbar...any items that don't fit go into an overflow panel (note this example isn't perfect...it doesn't exactly adhere to the standard menu
selection behaviour with the mouse/keyboard because its using separate menus for each item...and the style is a little off...and it shows a toolbar gripper....more work would be needed).
If 4 is closest to what you want, then you somehow need to combine the behaviour or a ToolBar with it's overflow panel...with the behaviour of a menu and it's tracking/navigation between menu items.
You might be able to achieve that by creatively re-templating the menu, or the toolbar, or creating your own custom control.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<StackPanel Orientation="Vertical">
<Menu>
<MenuItem Header="_File">
<MenuItem Header="_Exit"/>
</MenuItem>
<MenuItem Header="_Edit"/>
<MenuItem Header="_Window"/>
</Menu>
<Menu>
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<ToolBarPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="_File">
<MenuItem Header="_Exit"/>
</MenuItem>
<MenuItem Header="_Edit"/>
<MenuItem Header="_Window"/>
</Menu>
<Menu>
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="_File">
<MenuItem Header="_Exit"/>
</MenuItem>
<MenuItem Header="_Edit"/>
<MenuItem Header="_Window"/>
</Menu>
<ToolBar>
<ToolBar.Resources>
<Style x:Key="MenuItemStyle" TargetType="{x:Type MenuItem}">
<Style.Triggers>
<Trigger Property="Role" Value="TopLevelHeader">
<Setter Property="Template"
Value="{StaticResource {x:Static MenuItem.SubmenuHeaderTemplateKey}}"/>
</Trigger>
</Style.Triggers>
</Style>
</ToolBar.Resources>
<Menu>
<MenuItem Header="_File">
<MenuItem Header="_Exit"/>
</MenuItem>
</Menu>
<Menu>
<MenuItem Header="_Edit"/>
</Menu>
<Menu>
<MenuItem Header="_Window"/>
</Menu>
</ToolBar>
</StackPanel>
</Window>