The following code creates MenuItems from a list inside another MenuItem. I'm recreating a recent files option but, it is creating a container inside another container when generating the sub-item.
<MenuItem Header="_Recent" Height="25" ItemsSource="{x:Static cl_resources:MenuActions.Recent}">
<MenuItem.Icon>
<Image Source="/Resources/Icons/MenuBar/list.ico" Height="25"/>
</MenuItem.Icon>
<MenuItem.ItemTemplate>
<DataTemplate>
<MenuItem Header="{Binding}" Click="MenuItem_Recent_Click" Height="25" Cursor="Hand">
<MenuItem.Icon>
<Image Source="/Resources/Icons/MenuBar/document.ico" Height="25"/>
</MenuItem.Icon>
</MenuItem>
</DataTemplate>
</MenuItem.ItemTemplate>
</MenuItem>
This is the Result that I get, I want to only display what's labeled as 1 and remove the part 2.
I hope the question was clear enough, thank you.
Replace the MenuItem in the DataTemplate with StackPanel, Grid or whatever Panel you like.
There was a similar question asked already. Basically MenuItem.ItemTemplate shouldn't contain MenuItem. The parent MenuItem creates its sub-MenuItems automatically and sets their content to the specified MenuItem.ItemTemplate.
<DataTemplate>
<StackPanel Orientation="Horizontal" Click="MenuItem_Recent_Click" Height="25" Cursor="Hand">
<Image Source="/Resources/Icons/MenuBar/document.ico" Height="25"/>
<TextBlock Text="{Binding}"/>
</StackPanel>
</DataTemplate>
Related
I have this menu items in my WPF application. I noticed big spaces between and after the menu list.
This is how it looks like in the designer:
which seemed to be just fine except, there are too much space on both sides.
Then, when I run the application, it looks like this:
Now, there are spaces all around the menu item.
Here's my XAML code:
<DockPanel>
<Menu VerticalAlignment="Center" Width="Auto" Height="Auto" DockPanel.Dock="Top">
<MenuItem Header="_File" Width="Auto" Height="Auto" FontFamily="Century Gothic" FontSize="12">
<MenuItem Header="Exit" Width="Auto" Height="20">
<MenuItem.Icon>
<materialDesign:PackIcon Kind="ExitToApp"/>
</MenuItem.Icon>
</MenuItem>
</MenuItem>
</Menu>
</DockPanel>
How can I remove spaces around the menu item?
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.
So I made a simple menu with a Width of 55 I try to make my title ("FILE") centered within the button itself while still being on the left of the window.
At the moment the basic code looks like that
<Menu Height="25" VerticalAlignment="Top" Width="800" Margin="0">
<MenuItem Header="File" Margin="0" Height="25" Width="55" HorizontalContentAlignment="Center">
<MenuItem Header="Login"/>
<MenuItem Header="New User"/>
...
</MenuItem> </Menu>
I've already tried playing around with a code like
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
To remove the grid but no sucess it's only the actual menu being centered and not the text "FILE" within the button.
Here's an example of what the "FILE" looks like at the moment and I try to make it centered within the blue area.
http://i.stack.imgur.com/KRXw2.png
(Cannot post the actual image I don't have enough rep.)
Thanks.
You an achieve this by setting the MenuItem's header template to be a TextBlock, with the TextBlock being the same width of the MenuItem itself. Also, you will need to add a Margin to compensate for the default MenuItem template.
<Menu Height="25" VerticalAlignment="Top" Width="800" Margin="0">
<MenuItem Margin="0" Height="25" Width="55" HorizontalContentAlignment="Center">
<MenuItem.Header>
<TextBlock Text="File" HorizontalAlignment="Stretch" Margin="-7" Width="55" TextAlignment="Center"/>
</MenuItem.Header>
<MenuItem Header="Login"/>
<MenuItem Header="New User"/>
</MenuItem>
</Menu>
I'm trying to get the ListView to look like the MS Outlook Attachment-Control. I've already got the horizontal scrolling, but it still displays only one item in a row.
How can I get it to look like this?
What I've achieved so far:
<Grid x:Name="grdAttachments"
Grid.Row="4"
Grid.Column="1"
Grid.ColumnSpan="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MaxHeight="45" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65" />
<ColumnDefinition Width="15" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Margin="3,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Cursor="Hand"
Text="Angefügt:" />
<ScrollViewer Grid.Row="0" Grid.Column="2">
<ListBox x:Name="libAttachments"
Background="Transparent"
ItemsSource="{Binding Attachments}"
MouseDoubleClick="lvAttachments_MouseDoubleClick">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,10,0" Orientation="Horizontal">
<Image Source="{Binding MimeTypeIcon}" Stretch="None" />
<TextBlock Margin="5,0,0,0" Text="{Binding File.Name}" />
<StackPanel.ContextMenu>
<ContextMenu>
<ContextMenu.Items>
<MenuItem Click="btnOpenAttachment_Click" Header="Öffnen">
<MenuItem.Icon>
<Image Source="/Images/magnifier.png" Stretch="None" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Click="btnSaveAttachment_Click" Header="Speichern unter">
<MenuItem.Icon>
<Image Source="/Images/disk-black.png" Stretch="None" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu.Items>
</ContextMenu>
</StackPanel.ContextMenu>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
It sounds like what you want is an ListBox with a custom ItemsPanel.
<ListBox>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
The snippet above configures a ListBox to use a WrapPanel as the layout provider or "ItemsPanel" for the items it is to present. From there it may make sense to implement a custom Item Container style, and/or custom Data Templates. You could easily apply a DataTemplate as you did above if you are using an MVVM pattern and data binding to a collection (preferably observable)
<DataTemplate>
<StackPanel Margin="0,0,10,0" Orientation="Horizontal">
<Image Source="{Binding MimeTypeIcon}" Stretch="None" />
<TextBlock Margin="5,0,0,0" Text="{Binding File.Name}" />
</StackPanel>
</DataTemplate>
To complete this picture, a scroll viewer can be used so long as it's height is constrained by either a parent layout control (Grid.Row = 1 where RowDefinition Height="constant") or my an explicit height being set on the ScrollViewer.
My final solution based on yours looks like this:
<ScrollViewer HorizontalScrollBarVisibility="Disabled">
<ListBox
ItemsSource="{Binding Attachments}"
MouseDoubleClick="lvAttachments_MouseDoubleClick"
SelectionMode="Single">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,10,0" Orientation="Horizontal">
<Image Source="{Binding MimeTypeIcon}" Stretch="None" />
<TextBlock Margin="5,0,0,0" Text="{Binding File.Name}" />
<StackPanel.ContextMenu>
<ContextMenu>
<ContextMenu.Items>
<MenuItem Click="btnOpenAttachment_Click" Header="Öffnen">
<MenuItem.Icon>
<Image Source="/Images/magnifier.png" Stretch="None" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Click="btnSaveAttachment_Click" Header="Speichern unter">
<MenuItem.Icon>
<Image Source="/Images/disk-black.png" Stretch="None" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu.Items>
</ContextMenu>
</StackPanel.ContextMenu>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
A few things to note: When possible, consider using Commands instead of events, they can lead to looser coupling. Introducing a Behavior might even make sense if the behavior it's self is something that you might have other places in your project or re-usability is ideal.
Ok so where it seems you got snagged up was with your ListBox still pushing things in single column fashion and the lack of ability to give you something to fire off say a click event. So what I had in mind was something more like this;
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="300" HorizontalContentAlignment="Stretch">
<ItemsControl ItemsSource="{Binding Collection}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="5,0" Orientation="Horizontal">
<Image Source="{Binding MimeTypeIcon}" Stretch="None" />
<HyperlinkButton Margin="5,0,0,0" Text="{Binding File.Name}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
I wasn't to sure what you were trying to do with your magnifier and disk though I see your Clicks for them, but you can add those to this layout however you like, just a note though, I just free-handed this between meetings so never built it but should work fine. If not we'll plug at it again. Main differences are changing to a hyperlinkbutton to give you click and some other subtle differences from Firoso's but his is still technically sound, or should be anyway :)
How do I vertically center a header in the menu control?
This was my try:
<MenuItem Header="File" StaysOpenOnClick="True" FontFamily="Arial" VerticalAlignment="Center">
<MenuItem Header="Open" Click="Open_Click" IsEnabled="True"/>
</MenuItem>
</Menu>
But its aligned to the Top-left.
What am I doing wrong?
[EDIT]
My whole menu now looks like this:
<Menu Canvas.Left="0" Canvas.Top="0" Name="menu1" Margin="0,0,0,384">
<MenuItem Header="File" StaysOpenOnClick="True" FontFamily="Arial" VerticalAlignment="Center">
<MenuItem Click="Open_Click" IsEnabled="True">
<MenuItem.Header>
<TextBlock Text="Open" VerticalAlignment="Center"/>
</MenuItem.Header>
</MenuItem>
</MenuItem>
</Menu>
The header text 'file' still isn't vertically centered (which is what i want to center).
What exactly is this code centering? Is it the text 'open'?
[/EDIT]
If you want to format the header you'll need to explicitly layout the header control:
<MenuItem StaysOpenOnClick="True" FontFamily="Arial" VerticalAlignment="Center">
<MenuItem Click="Open_Click" IsEnabled="True">
<MenuItem.Header>
<TextBlock Text="Open" VerticalAlignment="Center"/>
</MenuItem.Header>
</MenuItem>
</Menu>
Update:
To format the position of a MenuItem in the Menu you'll need to override the Menu's ItemsPanelTemplate. By default the Menu uses a vertical WrapPanel which justifies the items to the top. Replace the default with a panel of your choice (StackPanel, Grid, DockPanel, etc) and you'll be able center the menu items as you please. Here's an example:
<Menu Canvas.Left="0" Canvas.Top="0" Name="menu1" Margin="0,0,0,384">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="File" StaysOpenOnClick="True" FontFamily="Arial" VerticalAlignment="Center" >
<MenuItem Header="Open" Click="Open_Click" IsEnabled="True"/>
</MenuItem>
</Menu>
Information gathered from this post on MSDN.
I think you would want to set the VerticalContentAlignment. If the aligmnet is still not to your liking there is probably a problem with the default MenuItem Template, it may not bind to the property or there are some margins or Paddings which shift the header.