I want to create a menu bar identical to the one in windows forms in my WPF application.
How would I do this?
The menu option in the WPF controls toolbox only gives a blank bar.
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_File">
<MenuItem Header="_Open"/>
<MenuItem Header="_Close"/>
<MenuItem Header="_Save"/>
</MenuItem>
</Menu>
<StackPanel></StackPanel>
</DockPanel>
Yes, a menu gives you the bar but it doesn't give you any items to put in the bar. You need something like (from one of my own projects):
<!-- Menu. -->
<Menu Width="Auto" Height="20" Background="#FFA9D1F4" DockPanel.Dock="Top">
<MenuItem Header="_Emulator">
<MenuItem Header="Load..." Click="MenuItem_Click" />
<MenuItem Header="Load again" Click="menuEmulLoadLast" />
<Separator />
<MenuItem Click="MenuItem_Click">
<MenuItem.Header>
<DockPanel>
<TextBlock>Step</TextBlock>
<TextBlock Width="10"></TextBlock>
<TextBlock HorizontalAlignment="Right">F2</TextBlock>
</DockPanel>
</MenuItem.Header>
</MenuItem>
:
<StackPanel VerticalAlignment="Top">
<Menu Width="Auto" Height="20">
<MenuItem Header="_File">
<MenuItem x:Name="AppExit" Header="E_xit" HorizontalAlignment="Left" Width="140" Click="AppExit_Click"/>
</MenuItem>
<MenuItem Header="_Tools">
<MenuItem x:Name="Options" Header="_Options" HorizontalAlignment="Left" Width="140"/>
</MenuItem>
<MenuItem Header="_Help">
<MenuItem x:Name="About" Header="&About" HorizontalAlignment="Left" Width="140"/>
</MenuItem>
</Menu>
<Label Content="Label"/>
</StackPanel>
<Container>
<Menu>
<MenuItem Header="File">
<MenuItem Header="New">
<MenuItem Header="File1"/>
<MenuItem Header="File2"/>
<MenuItem Header="File3"/>
</MenuItem>
<MenuItem Header="Open"/>
<MenuItem Header="Save"/>
</MenuItem>
</Menu>
</Container>
Related
I'm trying to right-align a single menu item though a method found here, but applying this method (seen in the code below) moves the menu to the center of the window, and I can't find an elegant solution to move it back to the top.
<DockPanel>
<Menu>
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="File">
<MenuItem Header="Home" Click="MenuItem_Home_Click"/>
<MenuItem Header="About"/>
<MenuItem Header="Settings" Click="MenuItem_Settings_Click"/>
<Separator/>
<MenuItem Header="Exit" Click="MenuItem_Exit_Click"/>
</MenuItem>
<MenuItem Header="Notifications" HorizontalAlignment="Right" FlowDirection="RightToLeft"/>
</Menu>
</DockPanel>
Menu location with code
Don't suppose anyone can work out what I've done wrong here?
I've tried various different methods to fix this, only removing the whole Menu.ItemsPanel code works in returning the menu to it's original location, but that also moves the Notifications menu item to the left.
You need to put it in a container, such as a grid, that restricts it's height.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Menu Grid.Row="0">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="File">
<MenuItem Header="Home" Click="MenuItem_Home_Click"/>
<MenuItem Header="About"/>
<MenuItem Header="Settings" Click="MenuItem_Settings_Click"/>
<Separator/>
<MenuItem Header="Exit" Click="MenuItem_Exit_Click"/>
</MenuItem>
<MenuItem Header="Notifications" HorizontalAlignment="Right" FlowDirection="RightToLeft"/>
</Menu>
</Grid>
I'm working with MenuItem in XAML, using InputGestureText I have added Keyboard shortcuts to menu items. What I'm confused about is how to display keyboard shortcut in the actual menu next to each item that has keyboard shortcut.
I don't want to add text to Header but rather display value of InputGestureText therefore it can be changed without having to modify header.
I'm using WPF Localization Extension
Code for Menu
<Menu Grid.Row="0" Height="30" >
<MenuItem Header="{lex:Loc Project75:lang:mnuFileMenu}">
<MenuItem Header="{lex:Loc Project75:lang:mnuFileMenuNew}">
<MenuItem Header="{lex:Loc Project75:lang:mnuFileMenuNew}" Command="{Binding Path=NewCommand}" InputGestureText="Ctrl+N"/>
<MenuItem Header="{lex:Loc Project75:lang:mnuFileMenuNewEmailTemplate}" Command="{Binding Path=NewEmailTemplateCommand}" />
<MenuItem Header="{lex:Loc Project75:lang:mnuFileMenuNewContact}" Command="{Binding Path=NewContactCommand}" />
</MenuItem>
<MenuItem Header="{lex:Loc Project75:lang:mnuFileMenuImport}" Command="{Binding Path=ImportCommand}" InputGestureText="Ctrl+I"/>
<MenuItem Header="{lex:Loc Project75:lang:mnuFileMenuExport}" Command="{Binding Path=ExportCommand}" InputGestureText="Ctrl+E"/>
<Separator/>
<MenuItem Header="{lex:Loc Project75:lang:mnuFileMenuSave}" Command="{Binding Path=SaveDocumentCommand}" InputGestureText="Ctrl+S"/>
<MenuItem Header="{lex:Loc Project75:lang:mnuFileMenuSaveAll}" Command="{Binding Path=SaveAllDocumentsCommand}" InputGestureText="Ctrl+Shift+S" ToolTip="Closes all open Windows"/>
<Separator/>
<MenuItem Header="{lex:Loc Project75:lang:mnuFileMenuClose}" Command="{Binding Path=CloseDocumentCommand}" InputGestureText="Ctrl+F4"/>
<MenuItem Header="{lex:Loc Project75:lang:mnuFileMenuCloseAll}" Command="{Binding Path=CloseAllDocumentsCommand}" InputGestureText="Ctrl+Shift+F4"/>
<Separator/>
<MenuItem Header="{lex:Loc Project75:lang:mnuFileMenuExit}" Command="{Binding Path=ExitCommand}" InputGestureText="Alt+F4"/>
</MenuItem>
<MenuItem Header="{lex:Loc Project75:lang:mnuHelpMenu}">
<MenuItem Header="{lex:Loc Project75:lang:mnuHelpMenuAbout}" Command="{Binding Path=AboutCommand}"/>
</MenuItem>
</Menu>
Try this out:
<Window.Resources>
<ControlTemplate TargetType="MenuItem" x:Key="controlTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Header}"></TextBlock>
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InputGestureText}" Margin="5,0,0,0"></TextBlock>
</StackPanel>
</ControlTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Menu>
<MenuItem Header="Foo">
<MenuItem Header="Bar" Command="Copy" Template="{StaticResource controlTemplate}"></MenuItem>
</MenuItem>
</Menu>
</Grid>
I'm using the copy command as example but you can use any other command. Header can be localized as you are doing.
I'm developing a border less WPF window application with MahApps.Metro control.
I want to have my menu where normally the window title goes (Title bar's left side). Like below image:
What I have got so far looks like below image:
I have tried setting HorizontalAlignment="Left", but the menu group remains on the right side of the title bar.
Code for this:
<Controls:MetroWindow.WindowCommands>
<Controls:WindowCommands HorizontalAlignment="Left">
<Menu IsMainMenu="True" x:Name="mnuMainMenu" Height="28" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="12" Background="Transparent" Width="Auto" >
<MenuItem Header="_File" x:Name="mnuFile" Visibility="Visible" Background="Transparent">
<MenuItem Header="_Open" x:Name="mnuOpen" Background="Transparent" Command="{Binding MenuOpenCommand}" />
<MenuItem Header="_Exit" x:Name="mnuExit" Click="btnExit_Click" Background="Transparent"/>
</MenuItem>
<MenuItem Header="_Tools">
<MenuItem Header="_Repeat" x:Name="mnuRepete" Background="Transparent" >
<MenuItem Header="Repeat None" Command="{Binding RepeatNoneCommand}" IsCheckable="True"/>
<MenuItem Header="Repeat One" Command="{Binding RepeatOneCommand}" IsCheckable="True"/>
<MenuItem Header="Repeat All" Command="{Binding RepeatAllCommand}" IsCheckable="True"/>
</MenuItem>
</MenuItem>
<MenuItem Header="_Store" x:Name="smOnlineMode" Background="Transparent" Click="smOnlineMode_Click" IsCheckable="True" />
<MenuItem Header="_Play Mode" x:Name="smPlayMode" Background="Transparent" Click="smPlayMode_Click" IsCheckable="True" IsChecked="True"/>
<MenuItem Header="_Play">
<MenuItem Header="_Play" x:Name="mnuPlay" Background="Transparent" Command="{Binding PlayCommand}"/>
<MenuItem Header="P_ause" x:Name="mnuPause" Background="Transparent" Command="{Binding PauseCommand}"/>
<MenuItem Header="_Stop" x:Name="mnuStop" Background="Transparent" Command="{Binding StopCommand}"/>
<Separator/>
<MenuItem Header="_Next" x:Name="mnuNext" Background="Transparent" Command="{Binding NextTrackCommand}"/>
<MenuItem Header="P_revious" x:Name="mnuPrevious" Background="Transparent" Command="{Binding PreviousTrackCommand}" />
<MenuItem Header="_Mute/UnMute" x:Name="smnuMute" Background="Transparent" Command="{Binding MuteSoundCommand}" />
<!--Command="{Binding MuteSoundCommand}"-->
</MenuItem>
<MenuItem Header="_Help">
<MenuItem Header="_Help" x:Name="smnuOnlineHelp" Background="Transparent" Click="smnuHelp_Click" />
<Separator />
<MenuItem Header="_Register Player" x:Name="smnuRegister" Background="Transparent" Click="smnuRegisterPlayer" />
<MenuItem Header="_About Codero Music Player" x:Name="smnuAbout" Background="Transparent" Click="smnuAboutClick" />
</MenuItem>
</Menu>
</Controls:WindowCommands>
</Controls:MetroWindow.WindowCommands>
You can do something like this
Remove the title from the title bar
Add a MetroWindow.LeftWindowCommands tag
Add windows command tag inside LeftWindowCommands
Place a stackpanel or grid and place what ever you want in the title bar
Code:
<controls:MetroWindow.LeftWindowCommands>
<controls:WindowCommands>
<StackPanel Name="menuHolder" Orientation="Horizontal">
<TextBlock Padding="10,5,10,5" Text="My Window"></TextBlock>
<Menu Name="mymenu" Margin="0,5,0,0">
<MenuItem Name="File" Header="File">
<MenuItem Name="Open" Header="Open"/>
<MenuItem Name="Close" Header="Close"/>
</MenuItem>
<MenuItem Name="Edit" Header="Edit">
<MenuItem Name="Copy" Header="Copy"/>
<MenuItem Name="Paste" Header="Paste"/>
</MenuItem>
</Menu>
</StackPanel>
</controls:WindowCommands>
The solution that works for me in MahApps.Metro 1.6.5 is to bind the TitleTemplate dependency property with the MenuBar and Title Textblock in the Main Window as shown below:
MainWindow.xaml:
<Controls:MetroWindow
x:Class="MahAppsMetroDemo.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:MahAppsMetroDemo"
mc:Ignorable="d"
Title="ILSpy"
Height="450" Width="800"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
Icon="/MahAppsMetroDemo;component/Resources/ILSpy.ico"
>
<Controls:MetroWindow.TitleTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Menu
Grid.Column="0"
Margin="6,0">
<MenuItem Name="File" Header="File">
<MenuItem Name="Open" Header="Open"/>
<MenuItem Name="Close" Header="Close"/>
</MenuItem>
<MenuItem Name="Edit" Header="Edit">
<MenuItem Name="Copy" Header="Copy"/>
<MenuItem Name="Paste" Header="Paste"/>
</MenuItem>
</Menu>
<TextBlock
Grid.Column="1"
Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:MetroWindow}},Path=Title}"
HorizontalAlignment="Left" VerticalAlignment="Center"
Padding="10,5,10,5"
Margin="6,0"
FontSize="16"
FontWeight="Bold"
/>
</Grid>
</DataTemplate>
</Controls:MetroWindow.TitleTemplate>
<Grid>
</Grid>
</Controls:MetroWindow>
MainWindow.cs
namespace MahAppsMetroDemo
{
using MahApps.Metro.Controls;
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : MetroWindow
{
public MainWindow()
{
InitializeComponent();
}
}
}
Create StackPanel, put your menu into StackPanel and set the property HorizontalAlignment=Left or try to use Margin property again
You have to restyle the MetroWindow for your own. The easiest way for your needs would be to create a custom resource dictionary and copy the MetroWindow.xaml into it and change following line to Grid.Column="0":
MetroWindow.xaml
But do not forget to load that modified resource in App.xaml.
I am trying to create a Menu that has MenuItems displayed with a scrollbar or a ScrollViewer. I have many items to display in the menu and I just want to display a few of them and let the user scroll down for the others. It would look like a ListBox but it is inside a menu. I already tried adding a listbox to a menu. It works; but looks ugly and it is buggy so, I thought I would re-do it with MenuItems. I have not found anything significant on the internet so I thought I would ask. I have done some code already; but it does not work:
<Menu>
<MenuItem Width="80" Header="Test">
<MenuItem Header="Test2">
</MenuItem>
<Separator></Separator>
<!--<ScrollViewer>-->
<MenuItem Header="Test3">
<!--<ScrollBar></ScrollBar>-->
<MenuItem Header="Test4"></MenuItem>
<MenuItem Header="Test5"></MenuItem>
<MenuItem Header="Test6"></MenuItem>
<MenuItem Header="Test7"></MenuItem>
</MenuItem>
<!--</ScrollViewer>-->
</MenuItem>
</Menu>
The scrollviewer and the scrollbar are commented out but on un-commenting them I get an error in the case of the scrollviewer or a scrollbar on top of the menuitems in the case of the scroll bar. any ideas, articles, code, etc. would be appreciated.
<Menu>
<MenuItem Width="80" Header="Test">
<MenuItem Header="A"/>
<Separator></Separator>
<MenuItem Header="B">
<ScrollViewer VerticalScrollBarVisibility="Visible" Height="100">
<StackPanel>
<MenuItem Header="B1"></MenuItem>
<MenuItem Header="B2"></MenuItem>
<MenuItem Header="B3"></MenuItem>
<MenuItem Header="B4"></MenuItem>
<MenuItem Header="B5"></MenuItem>
<MenuItem Header="B6"></MenuItem>
<MenuItem Header="B7"></MenuItem>
<MenuItem Header="B8"></MenuItem>
<MenuItem Header="B9"></MenuItem>
<MenuItem Header="B10"></MenuItem>
<MenuItem Header="B11"></MenuItem>
<MenuItem Header="B12"></MenuItem>
<MenuItem Header="B13"></MenuItem>
<MenuItem Header="B14"></MenuItem>
<MenuItem Header="B15"></MenuItem>
<MenuItem Header="B16"></MenuItem>
</StackPanel>
</ScrollViewer>
</MenuItem>
<MenuItem Header="C">
<ScrollViewer VerticalScrollBarVisibility="Visible" Height="100">
<StackPanel>
<MenuItem Header="C1"></MenuItem>
<MenuItem Header="C2"></MenuItem>
<MenuItem Header="C3"></MenuItem>
<MenuItem Header="C4"></MenuItem>
<MenuItem Header="C5"></MenuItem>
<MenuItem Header="C6"></MenuItem>
<MenuItem Header="C7"></MenuItem>
<MenuItem Header="C8"></MenuItem>
<MenuItem Header="C9"></MenuItem>
<MenuItem Header="C10"></MenuItem>
<MenuItem Header="C11"></MenuItem>
<MenuItem Header="C12"></MenuItem>
<MenuItem Header="C13"></MenuItem>
<MenuItem Header="C14"></MenuItem>
<MenuItem Header="C15"></MenuItem>
<MenuItem Header="C16"></MenuItem>
</StackPanel>
</ScrollViewer>
</MenuItem>
<MenuItem Header="D"/>
<MenuItem Header="F"/>
<MenuItem Header="G"/>
<MenuItem Header="H"/>
<MenuItem Header="I"/>
<MenuItem Header="J"/>
<MenuItem Header="K"/>
</MenuItem>
</Menu>
OR you could set something up in the style... but then you have to know how many menu items you need.. so I don't really care so much for the style as it (at least this one) isn't for general use. But maybe this will give you other ideas or get you started.
<Style x:Key="MenuWithScroll" TargetType="{x:Type MenuItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<MenuItem Header="B">
<ScrollViewer VerticalScrollBarVisibility="Visible">
<StackPanel>
<MenuItem Header="{Binding title1}"/>
<MenuItem Header="{Binding title2}"/>
<MenuItem Header="{Binding title3}"/>
<MenuItem Header="{Binding title4}"/>
<MenuItem Header="{Binding title5}"/>
</StackPanel>
</ScrollViewer>
</MenuItem>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How do I make a certain menuitem's horizontal alignment set to right like the following?
Setting HorizontalAlignment="Right" in XAML wasn't the answer. Anyone know how?
Does this layout help you?
<Menu Height="20" >
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="File">
<MenuItem Header="three"/>
</MenuItem>
<MenuItem Header="Edit">
<MenuItem Header="two"/>
</MenuItem>
<MenuItem Header="Tools">
<MenuItem Header="one"/>
</MenuItem>
<MenuItem Header="Help" HorizontalAlignment="Right">
<MenuItem Header="zero"/>
</MenuItem>
</Menu>
Looks as your example.