WPF Menu: Wrap items - wpf

I'm working on a WPF control that gets placed inside a TabControl in another window, and I have a menu that stretches across the top of my custom control with the letters of the alphabet as such (for indexing purposes):
<UserControl x:Class="thispageclass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<Grid>
<StackPanel Orientation="Vertical">
<Menu Name="mnu">
<MenuItem Header="A" />
<MenuItem Header="B" />
<MenuItem Header="C" />
...
<MenuItem Header="Y" />
<MenuItem Header="Z" />
</Menu>
[other elements]
</StackPanel>
</Grid>
</UserControl>
If all the letters are present, the menu gets wider than the window so you can't see the last few items without making the window wider. It seems like it should be trivial to make the menu wrap around if the window is too small but I can't seem to figure out how.

Just override the ItemsPanel of your Menu to a WrapPanel
Sample
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>

I created my own minimal sample which worked, leading me to figuring out it was my custom styles that were messing up my menu.

Related

How to add MahApps.Metro Context Menu

I fount this Context Menu style that i want to add to my application.
I put it In Windows.Resources ad add the style (Style="{StaticResource MetroContextMenu}") into my ContextMenu - nothing happen and my ContextMenu
is still the same so i try to put it inside App.XAML ans still my ContextMenu have the old style.
Am i missing something ?
Update
<Controls:MetroWindow x:Class="MyApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
WindowStartupLocation="CenterScreen"
Height="670"
Width="1024"
GlowBrush="Black"
ShowMaxRestoreButton="False"
ResizeMode="CanResizeWithGrip"
WindowTransitionsEnabled="False"
TitleCaps="False"
TitleForeground="White"
EnableDWMDropShadow="True">
My context menu:
<ListView.ContextMenu>
<ContextMenu Name="lvFileMenu" Style="{StaticResource MetroContextMenu}">
<MenuItem Name="openCaptureMenuItem" Header="Open file" VerticalAlignment="Center" Height="25">
<MenuItem.Icon>
<Image VerticalAlignment="Center"
Source="pack://application:,,,/Resources/open.ico"/>
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</ListView.ContextMenu>
have you looked at quick start for MahApps?
make sure you have Controls:MetroWindow instead of Window tag

Xceed splitbutton with menu items and sub menuitems

I`m trying to have a dropdown menu under a split button. Some of these menuItems should have sub-menu items. If you want an example, click on the bookmark button in Firefox (top right).
I can't use Menu, because that is always oriented horizontally. So I went with a stackpanel:
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
Title="MainWindow" Height="350" Width="525">
<Grid>
<xctk:SplitButton Content="SplitButton" BorderThickness="1" BorderBrush="Black" Margin="0,0,408,290">
<xctk:SplitButton.DropDownContent>
<StackPanel Width="161" HorizontalAlignment="Left">
<MenuItem Header="MenuItem1" HorizontalAlignment="Left" Width="517">
<MenuItem.Items>
<MenuItem Header="submenuItem1"/>
<MenuItem Header="submenuItem2"/>
</MenuItem.Items>
</MenuItem>
<MenuItem Header="MenuItem2"/>
<MenuItem Header="MenuItem3"/>
</StackPanel>
</xctk:SplitButton.DropDownContent>
</xctk:SplitButton>
</Grid>
Problem here is that the sub menu items don't show up. They don't even have the little arrows next to them. You can do this without the SplitButton, just leaving the stackpanel and everything in it, you'll have the same problem. I've tried putting the parent Menu item in its own tag, but I want the sub-menu items to appear to the right of their parent (just like the firefox example: Assuming your firefox window is not maximized, and you've allowed enough screen-space for the item to appear).
the way you're using the MenuItem control is wrong, it is meant to be hosted inside the Menu control or another MenuItem.
As for the solution to your problem, there are two. the first one is to write a custom control that reuses the ContextMenu to host the menu items, you will write something like this:
<m:SplitButton Content="Split Button" Placement="Bottom">
<MenuItem Header="MenuItem 1"/>
<MenuItem Header="MenuItem 2">
<MenuItem Header="MenuItem 1"/>
<MenuItem Header="MenuItem 2"/>
</MenuItem>
</m:SplitButton
http://www.codeproject.com/Articles/20612/A-WPF-SplitButton
the second approach is to host the Menu control inside the DropDownContent and re-style everything, there will be a lot of xaml markup.
the Menu control will be easy to re-style, the only thing you need to do is make sure that menu items are displayed vertically instead of horizontally, using the following markup:
<Style TargetType="Menu">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" IsItemsHost="True" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
the hardest part is styling the MenuItems, they are styled based on their Role property. It can have four possible values:
TopLevelHeader : direct child of Menu with sub-menu items.
TopLevelItem : direct child of Menu without sub-menu items.
SubmenuHeader : direct child of MenuItem with sub-menu items.
SubmenuItem : direct child of MenuItem without sub-menu items.
Regards

wpf how to update Window

I have made my application multilingual. It changes it's language when you click the corresponding menuitem. This works fine but my problem comes when my parent window doesn't change it's language (menu is in parent window). All child windows change their language. Is there any way to force window to load again? I have done my application with resx-files and also checked that Thread.CurrentThread.CurrentCulture and Thread.CurrentThread.CurrentUICulture are changed when menuitem is clicked.
Edit:
I have made my own class to do the multilingual part and it is an adaptation from this article's approach: WPF Runtime Localization, it works. Here is a part of my XAML code to show the databindings:
<Window x:Class="Multilingual.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:properties="clr-namespace:Multilingual.Properties"
Height="350" Width="300" Name="mainWindow" ResizeMode="CanMinimize" SizeToContent="Manual" Closing="mainWindow_Closing" KeyDown="mainWindow_KeyDown">
and
<Menu Height="22" Name="menu" Width="{Binding ElementName=mainWindow, Path=Width}" HorizontalAlignment="Left" VerticalAlignment="Top" Background="Snow" BorderThickness="2">
<Menu.BitmapEffect>
<DropShadowBitmapEffect />
</Menu.BitmapEffect>
<MenuItem Header="{x:Static properties:Resources.Menu}">
<MenuItem Header="{x:Static properties:Resources.Language}" >
<MenuItem Header="{x:Static properties:Resources.Deutsch}" Name="itemDeutsch" Click="menuItem_Click" />
<MenuItem Header="{x:Static properties:Resources.English}" Name="itemEnglish" Click="menuItem_Click" />
</MenuItem>
<MenuItem Header="{x:Static properties:Resources.Exit}" Click="itemExit_Click"/>
</MenuItem>
</Menu>
So I think it would be enough if I would be able to update the window somehow.
WPF: How to change the CurrentUICulture at runtime
I found a solution. I changed my databindings to look like this:
<MenuItem Header="{Binding Path=Menu, Source={StaticResource Resources}}">
Where "Menu" corresponds the MenuItem's name in resx-file.

WPF ToolBar Separator shrinks to nothing when inside a StackPanel

Given the very simple wpf app
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="800">
<Grid>
<ToolBar Height="50" >
<MenuItem Header="Test1" />
<MenuItem Header="Test2" />
<StackPanel Orientation="Horizontal">
<Separator />
<MenuItem Header="Test3" />
<MenuItem Header="Test4" />
<MenuItem Header="Test5" />
</StackPanel>
</ToolBar>
</Grid>
</Window>
The Separator element shrinks to nothing. If I put the Separator just before the StackPanel begins, it will show up. Why does this happen? Is there a style setting that can be applied somewhere to avoid this?
The StackPanel is changing the orientation of the Separator somehow. Note that if you explicitly tell the Separator to be 20 units wide, the Separator will be a horizontal line instead of a vertical line. That's part of what's going on.
If you apply a LayoutTransform to the Separator, it undoes whatever the StackPanel is doing.
<Separator>
<Separator.LayoutTransform>
<RotateTransform
Angle="90" />
</Separator.LayoutTransform>
</Separator>
I don't understand the need for a StackPanel, though.
Separators default to Horizontal orientation.
Separators placed directly inside a ToolBar have their styles changed, because Toolbar overrides the default styles of its items. Separators placed elsewhere get the default style of a separator. So you will need to style the separator yourself if you vwant to keep it inside the StackPanel.
This CodeProject discussion includes sample code for accomplishing this.
Reference: WPF Unleashed by Adam Nathan, page 117.
ToolBars are funny about what you put inside. They get funny when all the elements aren't direct children of the ToolBar. The grouping elements are ToolBarTray (group of toolbars), ToolBar, and ToolBarPanel (logical, for collapsing overflow). This is what WPF wants to see:
<Grid>
<ToolBarTray>
<ToolBar Height="Auto">
<ToolBarPanel Orientation="Horizontal" ToolBar.OverflowMode="AsNeeded"/>
<MenuItem Header="Test1" />
<Separator/>
<MenuItem Header="Test2" />
</ToolBar>
<ToolBar Height="Auto">
<ToolBarPanel ToolBar.OverflowMode="Never"/>
<MenuItem Header="Test3" />
<MenuItem Header="Test4" />
<Separator/>
<MenuItem Header="Test5" />
<ToolBarPanel ToolBar.OverflowMode="AsNeeded"/>
<MenuItem Header="Test6" />
<MenuItem Header="Test7" />
</ToolBar>
</ToolBarTray>
</Grid>

WPF Focus Navigation Wrapping

Is there a way to force Focus Navigation (as controlled by the Tab key or MoveFocus method) to wrap inside a given container? I have included code which demonstrates this problem below. What is the easiest way to make Tab move focus from TextBox "Charlie" to TextBox "Able" (and visa-versa for Shift+Tab on TextBox "Able") rather than moving it to MenuItem "Alpha"?
<Window x:Class="NavWrapExample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<DockPanel LastChildFill="True">
<Menu DockPanel.Dock="Top">
<MenuItem Header="Alpha" />
<MenuItem Header="Bravo" />
<MenuItem Header="Charlie" />
</Menu>
<StackPanel>
<TextBox Text="Able" />
<TextBox Text="Baker" />
<TextBox Text="Charlie" />
</StackPanel>
</DockPanel>
</Window>
Use the KeyboardNavigation.TabNavigation attached property, like so:
<StackPanel KeyboardNavigation.TabNavigation="Cycle">
<TextBox Text="Able" />
<TextBox Text="Baker" />
<TextBox Text="Charlie" />
</StackPanel>
Found the answer on Mark Smith's blog.
It sounds like what you want is the same behavior as toolbars: you can tab into them, but once an element within the toolbar gets keyboard focus, focus loops inside. If so, use FocusManager as follows:
<StackPanel FocusManager.IsFocusScope="True">
<!-- Controls go here... -->
</StackPanel>

Resources