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?
Related
I am struggling to set up a footer in a WPF application. I want my footer to be a simple text and nothing more and I want it to stay still when resizing the page. The page contains a menu on in the top, a button, that is put into a canvas because I don't want it to change its size. I also have a textBox that is in a grid and I want it to be resized with the page. Under the textBox I want to setup the footer (I set it up with a label). Can anybody tell me how can I achieve this ? I tried everything ..
Here is the main part of my .XAML file:
<Grid>
<Menu>
<MenuItem Header="_File">
<MenuItem Header="_Exit" Command="{Binding x}"/>
</MenuItem>
<MenuItem Header="_View">
<MenuItem Header="Logs" Comm`enter code here`and="{Binding y}" />
</MenuItem>
</Menu>
<Canvas Margin="0,0,-0.4,432.6">
<Button Command="{Binding z}" Name="Button" Canvas.Top="22" Width="122" Height="24" Canvas.Left="10">Download Images</Button>
</Canvas>
<Canvas Margin="0,0,-0.4,432.6">
<Label HorizontalAlignment="Left" Width="108" Canvas.Left="10" Height="25" Canvas.Top="47">Status</Label>
</Canvas>
<TextBox Name="MessageDisplay" Text="{Binding q, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay,IsAsync=True}" Margin="10,73,10.6,44.6"/>
<Label Margin="0,475,-0.4,-0.4">Footer !!!</Label>
</Grid>
This is how it looks when I run the app:
Before any resize
and this is what happens after I maximize the page :
maximized
You should be making use of RowDefinitions for your Grid to do this reliably. Don't set canvas postions and margins to specific areas or your resizing will never look right. Margin is a great tool, but it should be set in the scope of the area the control is in within the layout
Specify your row definitions and their height. Here's an example using your code. Rows start at index 0. Take this example and look up some more information about specifying grid row and column layouts in WPF. This should get you started on the right path though.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Menu>
<MenuItem Header="_File">
<MenuItem Header="_Exit" Command="{Binding x}"/>
</MenuItem>
<MenuItem Header="_View">
<MenuItem Header="Logs" />
</MenuItem>
</Menu>
<Canvas Grid.Row="1">
<Button Command="{Binding z}" Name="Button" Margin="5" Width="122" Height="24" >Download Images</Button>
</Canvas>
<Canvas Grid.Row="2">
<Label HorizontalAlignment="Left" Width="108" Height="25" >Status</Label>
</Canvas>
<TextBox Grid.Row="3" Name="MessageDisplay" Text="{Binding q, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay,IsAsync=True}" Margin="5"/>
<Label Grid.Row="4" >Footer !!!</Label>
</Grid>
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>
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 want to float my two menu items in menu bar, but it isn't working.
Here's my code:
<Menu Height="30" Background="#ccc" VerticalAlignment="Top" Grid.ColumnSpan="2" Grid.RowSpan="2">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="New game" Click="NewGame"></MenuItem>
<MenuItem Header="About" Click="AboutWindow" HorizontalAlignment="Right"></MenuItem>
<MenuItem Header="Exit" Click="CloseWindow" HorizontalAlignment="Right"></MenuItem>
</Menu>
And my menu looks like this:
So you need just to make some little changes to your XAML:
<Menu Height="30" Background="#ccc" VerticalAlignment="Top" Grid.ColumnSpan="2" Grid.RowSpan="2">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel HorizontalAlignment="Stretch" LastChildFill="False" />
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="New game" Click="NewGame" DockPanel.Dock="Left" />
<MenuItem Header="Exit" Click="CloseWindow" DockPanel.Dock="Right" />
<MenuItem Header="About" Click="AboutWindow" DockPanel.Dock="Right" />
</Menu>
And this is the result:
I hope this can help you
Since you're using a DockPanel as Items Panel, use DockPanel.Dock instead of HorizontalAlignment
<Menu Height="30" Background="#ccc" VerticalAlignment="Top" Grid.ColumnSpan="2" Grid.RowSpan="2">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="New game" Click="NewGame"></MenuItem>
<MenuItem Header="About" Click="AboutWindow" DockPanel.Dock="Right"></MenuItem>
<MenuItem Header="Exit" Click="CloseWindow" DockPanel.Dock="Right"></MenuItem>
</Menu>
You were already halfway there :P HorizontalAlignment doesn't affect the DockPanel behavior, so all your menu items were being docked to the left by default. Your last menu item was shown in the right side just because its container was stretched to fill the remaining space, leaving the menu item space to effectively align itself to the right (in that case, HorizontalAlignment had an effect, but only in how the menu item aligned inside its container, not how it was layouted inside the DockPanel)
EDIT - You may have to change the order in which "About" and "Exit" are defined in XAML, since I don't remember correctly how the precedence worked.
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.