Create Vertical Menu - c#

I am try do a menu like the photo below:
I have this code:
<Menu >
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="Item1">
<MenuItem Header="SubItem 1">
<MenuItem Header="SubItem 1.1"></MenuItem>
<MenuItem Header="SubItem 1.2"></MenuItem>
<MenuItem Header="SubItem 1.3"></MenuItem>
<MenuItem Header="SubItem 1.4"></MenuItem>
</MenuItem>
<MenuItem Header="SubItem 2"></MenuItem>
<MenuItem Header="SubItem 3"></MenuItem>
<MenuItem Header="SubItem 4"></MenuItem>
</MenuItem>
<MenuItem Header="Item2">
<MenuItem Header="SubItem 1"></MenuItem>
<MenuItem Header="SubItem 2"></MenuItem>
<MenuItem Header="SubItem 3"></MenuItem>
</MenuItem>
</Menu>
but this code returns a menu like in the pictures below:
First appears this:
and when I put the mouse hover the Item 1 appears like this:
I want to that the second level of the Menu open on the right side of the first, like in the first image.

You have to create a custom template for your Menu to achieve your goal.
Here is the default ControlTemplate for Menu, I think the easiest way is to start from that. You will have to add HorizontalOffset and VerticalOffset for the PopUp in the TopLevelHeader template, so you can align it to your needs (or simply set Placement to Right - which is easier in my opinion).
Also, you should set a Width for your menu (either directly or by placing it inside some container that restricts it's Width), otherwise it will take up all the space and the PopUp might not be visible .
I will not replicate the whole XAML here, but here is the important part:
// ...
<!-- TopLevelHeader -->
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}"
TargetType="MenuItem">
<Border Name="Border" >
<Grid>
<ContentPresenter
Margin="6,3,6,3"
ContentSource="Header"
RecognizesAccessKey="True" />
<Popup
Name="Popup"
Placement="Right" <!-- This is modified -->
IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Fade">
// ... (You need all the XAML from the linked MSDN site in your Resources somewhere)
After that you can use your Menu almost exactly like you did (I only added Width):
<Menu Width="300">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="Item1">
<MenuItem Header="SubItem 1">
<MenuItem Header="SubItem 1.1"></MenuItem>
<MenuItem Header="SubItem 1.2"></MenuItem>
<MenuItem Header="SubItem 1.3"></MenuItem>
<MenuItem Header="SubItem 1.4"></MenuItem>
</MenuItem>
<MenuItem Header="SubItem 2"></MenuItem>
<MenuItem Header="SubItem 3"></MenuItem>
<MenuItem Header="SubItem 4"></MenuItem>
</MenuItem>
<MenuItem Header="Item2">
<MenuItem Header="SubItem 1"></MenuItem>
<MenuItem Header="SubItem 2"></MenuItem>
<MenuItem Header="SubItem 3"></MenuItem>
</MenuItem>
</Menu>
You might want to name the template and apply it to this Menu directly, not to mess up other Menus in your app...
The result:
Of course some more styling is needed to get the exact result you want, but I hope you got the idea.

Related

WPF MenuItem multi adding.

Error CS0120 An object reference is required for the non-static field,
method, or property 'MainWindow.System' %Path%\MainWindow.g.cs at line
316
I get the code error i mentioned on title when i try to add Sub MenuItems under a SubMenuItem. Here is my Code:
<Menu x:Name="MainMenu" Height="Auto" Width="Auto" VerticalAlignment="Top">
<MenuItem Header="_Menu" x:Name="Menu" Foreground="Black">
<MenuItem x:Name="RestartComputer" Header="_Restart Computer" Click="restart_Click"/>
<MenuItem x:Name="ShutdownComputer" Header="_Shutdown Computer" Click="shutdown_Click"/>
<MenuItem x:Name="OnTop" Header="_Always On Top" Click="OnTop_Click"/>
<Separator Width="Auto" Height="2"/>
<MenuItem x:Name="Exit" Header="_Exit" Click="MenuItem_Click"/>
</MenuItem>
<MenuItem x:Name="ControlPanel" Header="_Control Panel" Height="Auto" Width="Auto" Foreground="Black">
<MenuItem x:Name="Main" Header="Control Panel Main"/>
<MenuItem x:Name="ProgramsAndFeatures" Header="Programs and Features"/>
<MenuItem x:Name="AdministrativeTools" Header="Administrative Tools"/>
<MenuItem x:Name="DeviceManager" Header="Device Manager"/>
<MenuItem x:Name="NetworkAndSharing" Header="Network and Sharing"/>
<MenuItem x:Name="PowerOptions" Header="Power Options"/>
<Separator Width="Auto" Height="2"/>
<MenuItem x:Name="WindowsFirewall" Header="Windows Firewall"/>
<MenuItem x:Name="Display" Header="Display"/>
<Separator Width="Auto" Height="2"/>
<MenuItem x:Name="System" Header="System"/>
<MenuItem x:Name="DevicesAndPrinters" Header="Devices and Printers"/>
</MenuItem>
</Menu>
If i lessen these MenuItems under ControlPanel menu item to 4 or 5 no problem, but if i make them more than 5 or 6 i get the error what can it be ?
And also at MainWindow.g.cs line 316 is this.
[System.ComponentModel.EditorBrowsableAttribute(System.ComponentModel.EditorBrowsableState.Never)]
Use different x:Name for
<MenuItem x:Name="System" Header="System"/>

My menu showing up at the top left of the screen

I built a menu bar using the menu control in WPF and it had been working but at some point the menu started showing up on the top left of my first monitor regardless of where in the screen I had the window. Even if I move the main window to the second monitor the menu still shows up in the first monitor.
Here is the code for the menu control:
<Menu>
<MenuItem Header="_File">
<MenuItem Header="_New" Command="New" InputGestureText="Ctrl+N"/>
<MenuItem Header="_Open" Command="Open" InputGestureText="Ctrl+O" />
<MenuItem Header="_Close" Command="Close" InputGestureText="Ctrl+W" />
<Separator/>
<MenuItem Header="_Save" Command="Save" InputGestureText="Ctrl+S" />
<MenuItem Header="Save _As" Command="SaveAs" InputGestureText="Ctrl+Shift+S" />
<Separator/>
<MenuItem Header="E_xit" Command="{StaticResource CommandBinding_Exit}" InputGestureText="Ctrl+Q" />
</MenuItem>
<MenuItem Header="_Edit">
<MenuItem Header="_Add" Command="{StaticResource CommandBinding_Add}" InputGestureText="" />
<MenuItem Header="_Edit" Command="{StaticResource CommandBinding_Edit}" InputGestureText="" />
<MenuItem Header="_Delete" Command="Delete" InputGestureText="" />
<Separator/>
<MenuItem Header="Cut" Command="Cut" InputGestureText="Ctrl+X" />
<MenuItem Header="Copy" Command="Copy" InputGestureText="Ctrl+C" />
<MenuItem Header="Paste" Command="Paste" InputGestureText="Ctrl+V" />
</MenuItem>
<MenuItem Header="_View">
<MenuItem x:Name="miShowStatusBar" Header="Show Status Bar" IsCheckable="True" IsChecked="True" Click="miShowStatusBar_Click"/>
<MenuItem x:Name="miShowFullPath" Header="Show Full Path" IsCheckable="True" IsChecked="True" Click="miShowFullPath_Click"/>
</MenuItem>
<MenuItem Header="_Help">
<MenuItem Header="_About"/>
</MenuItem>
</Menu>
The menu is not referenced any where in the code behind so I can't figure out what might be causing this odd menu placement.
I think the source of the OP's problem is in the search box under the MenuBar. It may come from the Margin or Width settings of the search box.
I faced the same problem and found the sources. Here is the boilerplate code to reproduce the same error. The problem is a combination of 5 parts, as shown in the following XAML. Remove any one of them will solve the OP's issue.
You need to bind the XAML View to a ViewModel with public property Films. If the Films collection has any element in it, it will also cause the issue (Part 5).
<Grid x:Name="MainContent">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid >
<Menu>
<MenuItem Header="Film">
<MenuItem Header="New"/>
</MenuItem>
</Menu>
</Grid>
<Grid Grid.Row="1">
<Grid>
<!--Part 1: Remove HorizontalScrollBarVisibility="Auto"-->
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<!--Part 2: Remove ItemsSource="{Binding Films}"-->
<ItemsControl ItemsSource="{Binding Films}">
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<!--Part 3: Remove the setter tag-->
<Setter Property="Margin" Value="2" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button>
<Button.Template>
<ControlTemplate TargetType="Button">
<!--Part 4: Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}, Path=ActualWidth}-->
<ContentPresenter Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}, Path=ActualWidth}"/>
</ControlTemplate>
</Button.Template>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Grid>
This has nothing to do with WPF. It's a possible corruption of the Handedness setting or driver issues if you have a touch screen monitor, tablet PC or have a tablet attached with a bad driver (such as a Wacom drawing tablet).
Type this into the Run dialog: shell:::{80F3F1D5-FECA-45F3-BC32-752C152E456E}.
Once Tablet PC Settings come up, go to the Other tab and in the Handedness section, check the Left Handed option.
I bet that this has something to do with the Xaml-Designer of your Visual Studio instance. I encounter similar strange things because of leaving the Xaml-Designer open while debugging.
Try to kill the XDesProc.exe process and check if the problem still occurs.

Can't see the buttons on my toolbar (WPF, xaml)

As you can read in the title, I can't see the buttons if I run the the program. I can only see them if my courser is on the code.
<DockPanel>
<Menu DockPanel.Dock="Top" Name="nenu" Margin="0,0,-891,0">
<MenuItem Header="_File">
<MenuItem Header="_Start"/>
<MenuItem Header="_Stop"/>
<MenuItem Header="_Safe"/>
</MenuItem>
<MenuItem Header="_Bearbeiten">
<MenuItem Header="_Add filter"/>
<MenuItem Header="_Delete filter"/>
</MenuItem>
</Menu>
<ToolBar DockPanel.Dock="Top" Height="30">
<Button><Image x:Name="StartBttn" Source="layouts\start.png"/></Button>
<Button><Image x:Name="StopBttn" Source="layouts\stop.png"/></Button>
<Button><Image x:Name="SafeBttn" Source="layouts\save.png"/></Button>
<Button><Image x:Name="AddBttn" Source="layouts\add.png"/></Button>
<Button><Image x:Name="DeleteBttn" Source="layouts\delete.png"/></Button>
</ToolBar>
</DockPanel>
The icons are 20x20 pixel. I searched in the internet and tried some things out but nothing worked. Hope you guys can see what I can't.
Use Right Slash
<ToolBar DockPanel.Dock="Top" Height="30">
<Button><Image x:Name="StartBttn" Source="layouts/start.png"/></Button>
<Button><Image x:Name="StopBttn" Source="layouts/stop.png"/></Button>
<Button><Image x:Name="SafeBttn" Source="layouts/save.png"/></Button>
<Button><Image x:Name="AddBttn" Source="layouts/add.png"/></Button>
<Button><Image x:Name="DeleteBttn" Source="layouts/delete.png"/></Button>
</ToolBar>
ok, I solved the problem
I had to set the propertie of the button "Stretch" to none. Now I can see the picture.

WPF tooltip for file operations

I am implementing a texteditor in WPF. I am pretty new to WPF and C#. I am able to get tooltip for "Cut","Copy","Paste" options. But how do I get tooltip for File operations like "New","Open","Save","Save_As" and "Close"? Also I do see that when I edit a file in my Richtextbox, the editor does not indicate that file is changed. How do I implement this feature? Any help is appreciated.
<MenuItem Header="_File">
<MenuItem Header="_New" Click="New_Click"/>
<Separator />
<MenuItem Header="_Open" Click="Open_Click"/>
<Separator />
<MenuItem Header="_Save" Click="Save_Click">
<MenuItem.Icon>
<Image Source="C:\Users\stambi\Documents\Visual Studio 2012\Projects\PatternEditor\PatternEditor\Images\FileSave.png" Height="21"></Image>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="_Save As" Click="Save_As_Click">
<MenuItem.Icon>
<Image Source="C:\Users\stambi\Documents\Visual Studio 2012\Projects\PatternEditor\PatternEditor\Images\FileSaveAs.png" Height="21"></Image>
</MenuItem.Icon>
</MenuItem>
<Separator />
<MenuItem Header="_Close" Click="Close_Click"/>
<Separator />
<MenuItem Header="_Exit" Click="Exit_Click"/>
</MenuItem>
<MenuItem Header="_Edit">
<MenuItem Header="_Cut" Command="ApplicationCommands.Cut" ToolTip="Cut">
<MenuItem.Icon>
<Image Source="C:\Users\stambi\Documents\Visual Studio 2012\Projects\PatternEditor\PatternEditor\Images\EditCut.png" Height="21"></Image>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="_Copy" Command="ApplicationCommands.Copy" ToolTip="Copy">
<MenuItem.Icon>
<Image Source="C:\Users\stambi\Documents\Visual Studio 2012\Projects\PatternEditor\PatternEditor\Images\EditCopy.png" Height="21"></Image>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="_Paste" Command="ApplicationCommands.Paste" ToolTip="Paste">
<MenuItem.Icon>
<Image Source="C:\Users\stambi\Documents\Visual Studio 2012\Projects\PatternEditor\PatternEditor\Images\EditPaste.png" Height="21"></Image>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="_Undo" Command="ApplicationCommands.Undo" ToolTip="Undo">
<MenuItem.Icon>
<Image Source="C:\Users\stambi\Documents\Visual Studio 2012\Projects\PatternEditor\PatternEditor\Images\EditUndo.png" Height="21"></Image>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="_Redo" Command="ApplicationCommands.Redo" ToolTip="Redo">
<MenuItem.Icon>
<Image Source="C:\Users\stambi\Documents\Visual Studio 2012\Projects\PatternEditor\PatternEditor\Images\EditRedo.png" Height="21"></Image>
</MenuItem.Icon>
</MenuItem>
</MenuItem>
You do the same thing with New, Open, Save you have to define the ToolTip property.
Regarding how to determine if the file has changed depends on how you want to build it. Assuming you have Dock Windows as the parent of the RichTextBox Do you want an indicator that gives a * in the Header of the DockWindow or do you just want to know if the file has changed then you can use an event called TextChanged.

MenuItem Vertical alignment issue

I am facing an issue with MenuItem that whenever I specify an access key, the header alignment is getting disrupted. Below is a sample image wherein I have specified "_New" for New menu item and bound it to New command. You can observe tha the Text "New" is align at bottom and shortcut key is aligned at top. Also for other menu items I have not specified any access key, so they have no issue.
Here is the XAML
<StackPanel DockPanel.Dock="Top">
<Menu Padding="0,5">
<MenuItem x:Name="MnuTask" Header="Task">
<MenuItem x:Name="MnuNew" Header="_New" Command="New"/>
<MenuItem x:Name="MnuSave" Header="Save" Command="Save"/>
<MenuItem x:Name="MnuDelete" Header="Delete" Command="Delete"/>
<Separator/>
<MenuItem x:Name="MnuRefresh" Header="Reload Data" Command="{x:Static Local:MainWindow.RefreshDataCommand}" />
<MenuItem x:Name="MnuHistory" Header="View Range History" Command="{x:Static Local:MainWindow.RangeHistoryCommand}" />
<Separator/>
<MenuItem x:Name="MnuExit" Header="Exit" Command="Close"/>
</MenuItem>
<MenuItem x:Name="MnuView" Header="View">
<MenuItem x:Name="MnuFind" Header="Find Formula"/>
</MenuItem>
</Menu>
</StackPanel>
Could any body let me know what's going on?
Found it. I had the below TextBlock Style present in Resources section of my window. Commenting those lines resolved the issue. (But now I need to apply TextBlock style explicitly using keys :( )
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="3,6,3,0"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
</Style>

Categories

Resources