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>
Related
I got this piece of code for context menu in datagrid:
<DataGrid.ContextMenu>
<ContextMenu >
<MenuItem Header="Detail" Command="{Binding Path=DataContext.OpenTruckDetailCmd,
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}">
<MenuItem.Icon>
<Image Source="/MES.WPF.MainLibrary;Component/Resources/ElegantIcons/icon_document_alt.png" Height="20"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Časová osa" Command="{Binding Path=DataContext.OpenTimeWindowDetailCmd,
RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type DataGrid}}}">
<MenuItem.Icon>
<Image Source="/MES.WPF.MainLibrary;Component/Resources/ElegantIcons/icon_clock.png" Height="20"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Přestávka" Command="{Binding Path=DataContext.OpenBreakWindowCmd,
RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type DataGrid}}}">
<MenuItem.Icon>
<Image Source="/MES.WPF.MainLibrary;Component/Resources/ElegantIcons/icon_calendar.png" Height="20"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Foto z vážení" Command="{Binding Path=DataContext.OpenImageGalleryCmd,
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}">
<MenuItem.Icon>
<Image Source="/MES.WPF.MainLibrary;Component/Resources/ElegantIcons/icon_calendar.png" Height="20"/>
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</DataGrid.ContextMenu>
Problem is .. When i click with right mouse button on some menu item, any window i click won´t open.
Any ideas how to deal with it?Thanks.
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.
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.
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>