Vertically rotated Label on all subMenuItems inside MenuItem - wpf

I have a Menu in my app, that consists of few MenuItems. I'd like a vertical label on the left side of all the MenuItems. Like this (of course with grey background, pardon my paint skill):
I've tried it this way:
<Menu IsMainMenu="True" Grid.Row="0" Grid.ColumnSpan="3">
<MenuItem Header="_File">
<TextBlock Text="Type1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,0">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
<MenuItem Header="_Open" Command="{Binding OpenFileCommand}" IsEnabled="{Binding CanOpenFile}"/>
<Separator/>
<MenuItem Header="_Save" Command="{Binding SaveFileCommand}"/>
<MenuItem Header="_Save As" Command="{Binding SaveAsFileCommand}"/>
<Separator/>
<MenuItem Header="_Exit" Command="{Binding ExitAppCommand}"/>
</MenuItem>
</Menu>
But it produces an output like this:
Then I tried it via background image (transparent with just a plain text):
<Menu IsMainMenu="True" Grid.Row="0" Grid.ColumnSpan="3">
<MenuItem Header="_File">
<MenuItem.Background>
<ImageBrush ImageSource="{Binding SelectedObjectResourcePath}"/>
</MenuItem.Background>
<MenuItem Header="_Open" Command="{Binding OpenFileCommand}" IsEnabled="{Binding CanOpenFile}"/>
<Separator/>
<MenuItem Header="_Save" Command="{Binding SaveFileCommand}"/>
<MenuItem Header="_Save As" Command="{Binding SaveAsFileCommand}"/>
<Separator/>
<MenuItem Header="_Exit" Command="{Binding ExitAppCommand}"/>
</MenuItem>
</Menu>
But it sets the background for the first menuItem only:

Using StackPanel (with horizontal orientation) here is the best solution in my opinion. Check this out. You just need to make it look as good as you want :)
<Menu IsMainMenu="True" Grid.Row="0">
<MenuItem Header="_File">
<StackPanel Orientation="Horizontal">
<Label Content="Type1" Margin="-30" HorizontalContentAlignment="Center">
<Label.LayoutTransform>
<RotateTransform Angle="-90"/>
</Label.LayoutTransform>
</Label>
<StackPanel>
<MenuItem Header="_Open" Command="{Binding OpenFileCommand}" IsEnabled="{Binding CanOpenFile}"/>
<Separator/>
<MenuItem Header="_Save" Command="{Binding SaveFileCommand}"/>
<MenuItem Header="_Save As" Command="{Binding SaveAsFileCommand}"/>
<Separator/>
<MenuItem Header="_Exit" Command="{Binding ExitAppCommand}"/>
</StackPanel>
</StackPanel>
</MenuItem>
</Menu>

Related

MenuItem with image as header ignores alignment

First of all, I know there are lot of questions about alignment in wpf, and I've read some of them, but none seems to work in this case...
What do I have
I've a menu, where the third MenuItem doesn't have a text but an image. To be exact, this one:
I want this element to be right aligned, so after looking at some examples and problem with alignment questions in SO, I'm using the following code:
<MenuItem HorizontalAlignment="Right" HorizontalContentAlignment="Right">
<MenuItem.Header>
<StackPanel>
<Image Source="Resources/Img/donarBoton.gif" UseLayoutRounding="False" />
</StackPanel>
</MenuItem.Header>
</MenuItem>
Problem
As you can see, even whith the HorizontalAlignment set to right, it doesn't appear on the right side.
I've read about it and found that the Menu where it is, need to have the same property set to Stretch, what I've tried too with no success. I even tried it with the DockPanel where the menu is located (just to try, I'm not used to WPF yet), but it does nothing either.
I've tried to add a text element after my image element too, in order to see if the problem is the MenuItem or any other thing in my configuration, but it didn't move to the right side either.
What am I doing wrong?
There's the full DockPanel code:
<DockPanel x:Name="superiorDock" Height="25" LastChildFill="False" VerticalAlignment="Top" Width="307">
<Menu x:Name="superiorMenu" Width="307" Height="25" DockPanel.Dock="Top" HorizontalAlignment="Stretch" >
<MenuItem Header="{Binding XPath=#topMenu_1}">
<MenuItem Header="{Binding XPath=#topMenu_2}"/>
<MenuItem Header="{Binding XPath=#topMenu_3}"/>
<Separator/>
<MenuItem Header="{Binding XPath=#topMenu_4}"/>
<Separator/>
<MenuItem Header="{Binding XPath=#topMenu_5}"/>
</MenuItem>
<MenuItem Header="{Binding XPath=#topMenu_6}">
<MenuItem Header="{Binding XPath=#topMenu_7}"/>
<Separator/>
<MenuItem Header="{Binding XPath=#topMenu_8}"/>
</MenuItem>
<MenuItem HorizontalAlignment="Right" HorizontalContentAlignment="Right">
<MenuItem.Header>
<StackPanel>
<Image Source="Resources/Img/donarBoton.gif" UseLayoutRounding="False" />
</StackPanel>
</MenuItem.Header>
</MenuItem>
</Menu>
</DockPanel>
Thanks in advance
Use this:
<DockPanel x:Name="superiorDock" Height="25" LastChildFill="False" VerticalAlignment="Top" Width="307">
<Menu x:Name="superiorMenu" Width="307" Height="25" DockPanel.Dock="Top" HorizontalAlignment="Stretch">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel HorizontalAlignment="Stretch" />
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="{Binding XPath=#topMenu_1}">
<MenuItem Header="{Binding XPath=#topMenu_2}"/>
<MenuItem Header="{Binding XPath=#topMenu_3}"/>
<Separator/>
<MenuItem Header="{Binding XPath=#topMenu_4}"/>
<Separator/>
<MenuItem Header="{Binding XPath=#topMenu_5}"/>
</MenuItem>
<MenuItem Header="{Binding XPath=#topMenu_6}">
<MenuItem Header="{Binding XPath=#topMenu_7}"/>
<Separator/>
<MenuItem Header="{Binding XPath=#topMenu_8}"/>
</MenuItem>
<MenuItem HorizontalAlignment="Right">
<MenuItem.Header>
<StackPanel>
<Image Source="Resources/Img/donarBoton.gif" UseLayoutRounding="False" />
</StackPanel>
</MenuItem.Header>
</MenuItem>
</Menu>
</DockPanel>
The default ItemsPanel of the Menu uses a WrapPanel. The panel defined in the ItemsPanel will be used as the container of the MenuItems.
WrapPanel doesn't respect the HorizontalAlignment property of its children. That's why we change the ItemsPanel to one that does support this: DockPanel.

Resizing Icon of MenuItems in WPF

How to resize the icon of the menu and menuitems in WPF C#
I have done following
<DockPanel>
<Menu Background="CadetBlue" Height="53" Width="500" IsMainMenu="True" DockPanel.Dock="Top" VerticalAlignment="Top">
<MenuItem Padding="40,0,0,0" Header="File" Foreground="#FF383131" FontSize="20" Background="Beige" Width="100" Height="50" >
<MenuItem.Icon>
<Image Source="/WPFMenuItem;component/Images/garden.jpg" Stretch="Uniform"/>
</MenuItem.Icon>
<MenuItem Header="New" FontSize="20">
<MenuItem.Icon>
<Image Source="/WPFMenuItem;component/Images/garden.jpg" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Exit" FontSize="20">
<MenuItem.Icon>
<Image Source="/WPFMenuItem;component/Images/ic_launch_man.png" />
</MenuItem.Icon>
</MenuItem>
</MenuItem>
</Menu>
<TextBox />
</DockPanel>
I have increased width,height and margin but did not work?
Try using a render transform and set the X and Y scale.
http://msdn.microsoft.com/en-us/library/ms750596(v=vs.110).aspx
<Image Source="/WPFMenuItem;component/Images/garden.jpg" Stretch="Uniform" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform X="2" Y="3.7"/>
</TransformGroup>
</Image.RenderTransform>
</Image>

WPF MenuItem child controls width is less than parent menuitem

As shown in below code, The contextmenu has four menuitems one, two, three and four. MenuItem three has subitems embeded in list box and they are test1, test2 and test3. The width of test1 test2 and test3 is less than parent item (i.e menuitem or submenuitem). How to make the width stretched to takethe width of the parent.
<Window.Resources>
<ContextMenu x:Key="CustomContextMenu">
<MenuItem Header="One"></MenuItem>
<MenuItem Header="two"></MenuItem>
<MenuItem Header="three" Margin="0" x:Name="menu_three"
Padding="0"
Grid.IsSharedSizeScope="True" >
<StackPanel Background="Blue" Margin="0"
Width="{Binding Path=PlacementTarget.Parent.Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type MenuItem}}}">
<ListBox HorizontalAlignment="Stretch">
<ListBoxItem Content="test1"></ListBoxItem>
<ListBoxItem Content="test2"></ListBoxItem>
<ListBoxItem Content="test3"></ListBoxItem>
</ListBox>
</StackPanel>
</MenuItem>
<MenuItem Header="four"></MenuItem>
</ContextMenu>
</Window.Resources>
Thanks
Remove ListBox and use MenuItem to show your sub menu items
<ContextMenu>
<MenuItem Header="One"></MenuItem>
<MenuItem Header="two"></MenuItem>
<MenuItem Header="three" Margin="0" x:Name="menu_three" Padding="0" >
<MenuItem Header="test1"></MenuItem>
<MenuItem Header="test2"></MenuItem>
<MenuItem Header="test3"></MenuItem>
</MenuItem>
<MenuItem Header="four"></MenuItem>
</ContextMenu>

WPF Datagrid dgDataGrid_Loaded event triggers more than once

I have a wpf dadatagrid and every time the contents being loaded the dgDataGrid_Loaded event triggers twice.
I am not sure whether this is WPF bug or I have missed something!?
here is my Xaml code:
<my:DataGrid Name="dgDataGrid" DockPanel.Dock="Top"
AutoGenerateColumns="False" ClipboardCopyMode="ExcludeHeader"
CanUserDeleteRows="True"
SelectionMode="Extended" SelectionUnit="FullRow"
FontFamily="Tahoma"
ItemsSource="{Binding}"
VirtualizingStackPanel.VirtualizationMode="Recycling"
VirtualizingStackPanel.IsVirtualizing="True"
EnableRowVirtualization="false"
EnableColumnVirtualization="False"
IsSynchronizedWithCurrentItem="True"
BorderBrush="Blue"
RowBackground="White"
HorizontalGridLinesBrush="Blue"
GridLinesVisibility="Horizontal" VerticalGridLinesBrush="Blue" IsTextSearchEnabled="False"
IsTabStop="True" HeadersVisibility="All"
Loaded="dgDataGrid_Loaded" ContextMenuOpening="dgDataGrid_ContextMenuOpening"
LoadingRow="dgDataGrid_LoadingRow">
<my:DataGrid.Resources>
</my:DataGrid.Resources>
<my:DataGrid.RowHeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type my:DataGridRow}}, Path=Header}"></TextBlock>
</DataTemplate>
</my:DataGrid.RowHeaderTemplate>
<my:DataGrid.ColumnHeaderStyle>
<Style TargetType="my:DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}" Foreground="Blue"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</my:DataGrid.ColumnHeaderStyle>
<my:DataGrid.ContextMenu>
<ContextMenu Name="cmDataGrid" StaysOpen="True">
<MenuItem Name="mnuView" Header="نمایش">
<MenuItem Name="mnuHideColumn" Header="Hide Column" Click="mnuHideColumn_Click"/>
<MenuItem Name="mnuShowColumn" Header="Show Column"/>
<Separator/>
<MenuItem Name="mnuGroupByColumn"
Header="Group by this column" Click="mnuGroupColumn_Click" />
<MenuItem Name="mnuClearGroups"
Header="Clear grouping" Click="mnuGroupColumn_Click" />
<Separator/>
<MenuItem Header="Header Alignment">
<MenuItem Name="mnuHeaderCenter" Header="Center"/>
<MenuItem Name="mnuHeaderLeft" Header="Left"/>
<MenuItem Name="mnuHeaderRight" Header="Right"/>
</MenuItem>
<MenuItem Header="Content Alignment">
<MenuItem Name="mnuContentCenter" Header="Center"/>
<MenuItem Name="mnuContentLeft" Header="Left"/>
<MenuItem Name="mnuContentRight" Header="Right"/>
</MenuItem>
</MenuItem>
</ContextMenu>
</my:DataGrid.ContextMenu>
</my:DataGrid>
Any suggestions?

Horizontal menu?

I want to create a horizontal menu across the top of my user control whose items fill the whole space horizontally. There are six items and it's one level only - so it's not really a menu as such.
Can I do this with a menu? Or am I better off with using a six column grid with a button per col, or even a horizontal stack panel? Here is what I have so far:
<DockPanel>
<DockPanel DockPanel.Dock="Top" KeyboardNavigation.TabNavigation="None">
<Menu KeyboardNavigation.TabNavigation="Cycle" VerticalAlignment="Top" Background="DarkGray" Height="40">
<MenuItem Header="_New"/>
<MenuItem Header="_Load" />
<MenuItem Header="_Save" />
<MenuItem Header="_Validate" />
<MenuItem Header="_Import" />
<MenuItem Header="_Export"/>
</Menu>
</DockPanel>
</DockPanel>
Menu derives from ItemsControl so can just switch the ItemsPanel:
<DockPanel>
<DockPanel DockPanel.Dock="Top" KeyboardNavigation.TabNavigation="None">
<Menu KeyboardNavigation.TabNavigation="Cycle" VerticalAlignment="Top" Background="DarkGray" Height="40">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<MenuItem Header="_New"/>
<MenuItem Header="_Load" />
<MenuItem Header="_Save" />
<MenuItem Header="_Validate" />
<MenuItem Header="_Import" />
<MenuItem Header="_Export"/>
</Menu>
</DockPanel>
</DockPanel>
<Menu KeyboardNavigation.TabNavigation="Cycle" VerticalAlignment="Top" Background="DarkGray" Height="40">
<MenuItem Header="File">
<MenuItem Header="_New"/>
<MenuItem Header="_Load" />
<MenuItem Header="_Save" />
<MenuItem Header="_Validate" />
<MenuItem Header="_Import" />
<MenuItem Header="_Export"/>
</MenuItem>
<MenuItem Header="Edit">
<MenuItem Header="Cut"/>
<MenuItem Header="Copy"/>
<MenuItem Header="Paste" />
</MenuItem>
</Menu>
Hope this will help. you need to add Menu subitems within the MenuItem. it itself is o0f List type.

Resources