MenuItems' Icon size changes on different systems - wpf

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.

Related

Creating a dropdown toolbar in xaml

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>

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

VS2010 WPF - Can I create a menu with menu items just via the UI (not editing XAML?)

Just trying to drag my first Menu control onto a WPF application in VS2010.
Is there a way to (via the VS2010 UI) setup the menu items etc? Or does one have to jump into the XAML to do this?
Also it seems like the Menu control, after I drag it onto the window, exists at the top of the Window. However I was expecting it to be rendered as a typical Windows menu where it's right at the top associated with the window itself (not the window contents), if that makes sense. Does the VS2010 "menu" item from the toolbox give you the "traditional" windows application menu?
I would really encourage you to read up on Panels (and Attached Properties) before you start playing with the controls to understand how they are laid out (Especially the difference between Panels and ContentControls is key). In WPF panels decide how the controls are laid out (at least the basics within which controls get a wee say). It sounds much like you are trying to do WPF the WinForms way - and you will end up really frustrated and needing lots of tranquillizers before the hour turns nigh... :)
In the VS Studio the template uses a Grid as the basis for layouting - which by default centers and stretches content (as well as overlaying controls), so just dragging a menu in there will provide insensible designs.
As for jumping into XAML - I never use the ToolBox and the Visual Designer. It's a matter of taste of course, but if you're used to using VS (in contrast to Blend), I find it easier to understand what is happening when I edit the raw XAML.
A few starter resources: link and link. And for a simpler learning environment for getting started - I enjoyed Kaxaml a lot (which is an editor build in XAML/WPF albeit in .Net 3.5 sp1).
EDIT: A small sample - just copy everything between the Window-tags and paste it between the ones in your template that Visual Studio gives you:
<Window ....>
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_File">
<MenuItem Header="_Open"/>
<MenuItem Header="_Save"/>
<MenuItem Header="_Exit"/>
</MenuItem>
<MenuItem Header="_Edit">
<MenuItem Header="C_ut"/>
<MenuItem Header="_Copy"/>
<MenuItem Header="Paste"/>
</MenuItem>
<MenuItem Header="Help">
<MenuItem Header="About"/>
</MenuItem>
</Menu>
<GroupBox Header="Some interesting controls go here">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Content="_First property"/>
<TextBox Grid.Column="1"/>
<Label Grid.Row="1" Content="_Second property"/>
<TextBox Grid.Column="1" Grid.Row="1"/>
</Grid>
</GroupBox>
</DockPanel>
</Window>

WPF SplitButton? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I've just spent a very frustrating afternoon trawling Google looking for a commercial-grade WPF SplitButton control that will work in a ToolBar. A SplitButton is one where you can click on the main part of the Button to take a default action, or click on a little triangle on the right to get a drop-down menu of alternate actions).
I found several on the web (including the one on CodeProject, and including the two on CodePlex). None of them work properly in a ToolBar--they either don't appear at all, or they don't have toolbar button styling. I even looked at some commercial offerings, like ActiPro's pop-up button (in their SharedLibrary DLL). Same problems.
And yes, I've seen all the posts about how easy it is to create one. It's very easy to create a bad one, but not so easy to create one that looks and works like the SplitButtons in Outlook or Visual Studio, where the drop-down menu doesn't disappear if you release the mouse button.
So, here's my question: Are there any commercial-grade SplitButtons out there, either open-source or commercial, that work in toolbars? I'm not looking for a control that is part of a $1,500 annual subscription to somebody's controls library, but if there is a reasonably-priced SplitButton, I'd sure like to find it.
The only true "commercial-grade" split button that I know of is the one by Syncfusion, which is included as part of their ribbon controls (although it works outside of the ribbon as well).
That being said, I remember this implementation as being fairly usable and complete, if you're looking for something free.
Another good free implementation that seem to have it all:
http://huydinhpham.blogspot.com/2008/09/wpf-drop-down-and-split-button.html
The split button can be used in the toolbar and has a proper toolbar style. It can also be restyled if you want.
Dropdown menu is exposed via its own property - i.e splitbutton can have it's own context menu separate from the dropdown one (even though it seems illogical it can be useful in some cases - like toolbar context menu that pops up when you right click on a button placed in the toolbar).
The dropdown menu is standard ContextMenu - i.e. content can be databound, menu items restyled etc.
Both the main and the dropdown parts of the split button have command properties associated with them.
The Extended WPF Toolkit Community Edition (which is free) has a nice SplitButton (and it has a DropDownButton as well)
<xctk:SplitButton Content="Click Me">
<xctk:SplitButton.DropDownContent>
<xctk:ColorCanvas />
</xctk:SplitButton.DropDownContent>
</xctk:SplitButton>
I don't know what exactly you are looking for in a split button, but this video on how to create one is pretty complete and makes a splitbutton that is just about perfect.
http://windowsclient.net/learn/video.aspx?v=3929
I know you didn't want a tutorial, but I've used this before and you couldn't tell the difference between it and the ones in outlook.
There is a pretty good split button implementation for WPF and Silverlight over Delay's blog:
Banana SplitButton (A WPF-specific fix for SplitButton and some code analysis improvements for the Silverlight version, too)
I think what you mean is called a DropDownButton.
There is a boolean property on MenuItem "StaysOpenOnClick" which could solve your problem.
I was looking for the same and just rolled my own (you will need to style to your liking (to match the ToolBar) and you could refactor it / convert it into a custom control ... etc.)
<StackPanel x:Name="Split" Orientation="Horizontal">
<Button Command="{Binding MainCommand}">
<StackPanel>
<Image Source="{StaticResource MainCommandImage}"/>
<TextBlock>MainCommand</TextBlock>
</StackPanel>
</Button>
<Separator HorizontalAlignment="Left" Width="1" VerticalAlignment="Stretch" Margin="0,5"/>
<CheckBox Width="16" IsThreeState="False">
<Grid>
<Path Fill="Black" Data="{StaticResource DownArrowGeometry}"
Stretch="Uniform" Height="6" Width="6" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Popup x:Name="popupOptions" AllowsTransparency="True" PopupAnimation="Fade" StaysOpen="False"
Placement="Bottom" PlacementTarget="{Binding ElementName=Split}" HorizontalOffset="-3"
IsOpen="{Binding RelativeSource={RelativeSource AncestorType={x:Type CheckBox}, AncestorLevel=1}, Path=IsChecked}">
<StackPanel>
<StackPanel>
<Image Source="{StaticResource SubCommandImage1}"/>
<TextBlock>SubCommand1</TextBlock>
</StackPanel>
<StackPanel>
<Image Source="{StaticResource SubCommandImage2}"/>
<TextBlock>SubCommand2</TextBlock>
</StackPanel>
</StackPanel>
</Popup>
</Grid>
</CheckBox>
</StackPanel>
Using the WPF Toolkit split button to show a context menu is reasonably straight forward. Add a context menu in your window resources. On the window load - bind the context menu to the split button and then use the context menu as you would do normally.
It really needs to be added in the WPF Toolkit as the majority use case for this button is to replicate the old WinForm Splitt button.
<Window x:Class="SplitButtonTesting.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:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ContextMenu x:Key="contextMenu" IsOpen="{Binding IsOpen}">
<MenuItem Header="One" />
<MenuItem Header="Two" />
<MenuItem Header="More...">
<MenuItem Header="One" />
<MenuItem Header="Two" />
</MenuItem>
</ContextMenu>
</Window.Resources>
<DockPanel>
<Menu DockPanel.Dock="Top" x:Name="ApplicationMenu">
<xctk:SplitButton x:Name="SplitButton" Content="Main Button" DropDownContent="{x:Null}" />
</Menu>
<Border />
</DockPanel>
Code behind:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
namespace SplitButtonTesting
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
SetupSplitButton();
}
public void SetupSplitButton()
{
var menu = this.Resources["contextMenu"] as ContextMenu;
menu.PlacementTarget = SplitButton;
menu.Placement = PlacementMode.Bottom;
menu.DataContext = SplitButton;
}
}
}

Resources