Creating a dropdown toolbar in xaml - wpf

I've recently started working with XAML in WPF and I'm working on someone elses code. I'm trying to rework a drop down toolbar/menu, because of some display issues but the drop down is created as a <Popup>. I feel technically a menu is not really a popup...
So my question is, is it appropriate to ever create sub/drop down menus using the popup tag? Or would it be better suited for <stackPanel> or something else?
Thanks

As someone already stated, you could use a ComboBox and make it look like a drop down menu. You could use a Popup to make it look like drop down menu either. Both require quite some template work but I wouldn't have anything against it as long as it looks as you want it to look.
For a classic menu & drop down I would just use the Menu control. Here some information about it. Depending on your situation, it's probably just an easier way to get the same result
Code from site:
<Window x:Class="WpfTutorialSamples.Common_interface_controls.MenuSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MenuSample" Height="200" Width="200">
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_File">
<MenuItem Header="_New" />
<MenuItem Header="_Open" />
<MenuItem Header="_Save" />
<Separator />
<MenuItem Header="_Exit" />
</MenuItem>
</Menu>
<TextBox AcceptsReturn="True" />
</DockPanel>

Related

MenuItems' Icon size changes on different systems

I have a WPF UserControl hosted inside of a WinForms application. This UserControl has a ContentControl which has a ContextMenu. The ContextMenu has a few MenuItems, all of which have their Icon property set to a .ico.
For whatever reason, the icons become massive on different systems. I've tested them on a Windows 10 and Windows 7 machine and they are fine, but other win10/win7 machines they are huge.
The actual .ico files range from 32x32 bit to 256x256.
Here's how they look normally:
Here's how they look on certain machines:
Here's the .xaml:
<UserControl x:Class="TestUC.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Height="737.239" Width="1455.446"
<Grid>
<ContentControl>
<ContentControl.ContextMenu>
<ContextMenu>
<MenuItem Header="Pan">
<MenuItem.Icon>
<Image Source="Images/panHand.ico" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Zoom In">
<MenuItem.Icon>
<Image Source="Images/zoom_In.ico" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Zoom Out">
<MenuItem.Icon>
<Image Source="Images/zoom_Out.ico" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</ContentControl.ContextMenu>
</ContentControl>
</Grid>
</UserControl>
I can go ahead and manually set the Height and Width, but I would love to know what causes this.
It's my understanding the user setting for icon size will influence this particular scenario.
They pick big icons then windows will prefer the big version of the ico.
I'm not sure about that because I never risk default sizes for Image.
In any event, it's picking 256x256 and you gave it no size so it decides that image is 256x256.
IMO.
It's a bad idea to use ico or any bitmap file for this stuff in a wpf app.
You're best using vector graphics.
A Path for simple iconography.
With a menu, that does also mean some re-templating or replacing the header.
But you can then have consistent scaleable iconography across your application.
Using very lightweight geometries in a resource dictionary.

VB WPF How to handle a click event on a context menuItem in an object in a resourceDictionary

I've just started out using WPF so bear with me.
I'm using ready built NotifyIcon replacement for WPF in Visual Basic 2015.
(http://www.hardcodet.net/wpf-notifyicon)
I've read the docs (they are in c# though...) and initially configured it in a resourceDictionary.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SystemTrayTest"
xmlns:tb="http://www.hardcodet.net/taskbar"
>
<!-- Globally declared notify Icon -->
<tb:TaskbarIcon x:Key="MyNotifyIcon"
IconSource="/Icons/Error.ico"
ToolTipText="Project Activity Recorder" >
<tb:TaskbarIcon.ContextMenu>
<ContextMenu
Background="LightCoral">
<MenuItem x:Name="CA" Header="Current Activity"/>
<MenuItem Header="New Activity" />
<MenuItem Header="Manage Activities" />
<Separator />
<MenuItem Header="Manage Companies" />
<MenuItem Header="Manage Projects" />
<MenuItem Header="Manage Users" />
<Separator />
<MenuItem Header="Exit" />
</ContextMenu>
</tb:TaskbarIcon.ContextMenu>
</tb:TaskbarIcon>
</ResourceDictionary>
I kick off the NotifyIcon by instantiating it in Application_Startup Event.
tb = CType(FindResource("MyNotifyIcon"), TaskbarIcon)
This shows the SystemTray icon fine with a context menu.
However, I can't figure out how to pick up when a user selects from the content Menu.
I've programmed in windows forms before but as I have mentioned WPF is new to me. I can suss out how to do this from a WPF form but I'm beginning to think its because I've set up the NotifyIcon in the resourceDictionary.
I would appreciate some friendly guidance.
Many thanks All!
It is possible for a ResourceDictionary to have a code behind. However, in this case, I doubt that it will be useful to you because I am pretty sure you will need something from your window.
If that's not a requirement, you can just use the code behind of the resource dictionary.

How to create vertical menu control in WPF

Iam trying to create vertical menu control but dont know from where to start. I am basically coming from winform to wpf and using telerik controls and this control which am using is called RadMenuControl.
Please view the video in link and suggest me accordingly with code and helping links from where i can start, thanks in advance.
MenuItem Video
You can change the ItemsPanel of Menu control.
Inheritance heirarchy :
ItemsControl > MenuBase > Menu.
<Menu Height="Auto" Width="Auto" FontSize="18">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="Styling">
<MenuItem Header="Background"/>
</MenuItem>
<MenuItem Header="Measurement">
<MenuItem Header="Width"/>
<MenuItem Header="Height"/>
</MenuItem>
<MenuItem Header="Font"/>
</Menu>
If you need an similar functionality, you may consider using a StackPanel and keep stacking button items to them.
<StackPanel>
<Button Content="Home"/>
<Button Content="Edit"/>
<Button Content="View"/>
</StackPanel>
If you are using Telerik controls would you try RadPanelBar or RadOutlookBar. Surely your requirement will be satisfied one of these two controls.
RadPanelBar

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 Menu: Wrap items

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.

Resources