Page 1 of 1

How do I right-align the 'help' menu item

Posted: 09 Apr 2017, 11:06
by PhiLong
In WPF I can use the below to right-align the 'help' menu
<Menu Height="20" Background="#FFA9D1F4">
            <Menu.ItemsPanel>
                <ItemsPanelTemplate>
                    <DockPanel HorizontalAlignment="Stretch"/>
                </ItemsPanelTemplate>
            </Menu.ItemsPanel>
            <MenuItem Header="File">
                <MenuItem Header="Exit"/>
            </MenuItem>
            <MenuItem Header="Edit">
                <MenuItem Header="Cut"/>
            </MenuItem>
                <MenuItem Header="Help" HorizontalAlignment="Right">
                    <MenuItem Header="About"/>
                </MenuItem>
        </Menu>
+-------------------------------------------+
| File Edit                            Help |
+-------------------------------------------+
|                                           |
Could I do it in Noesis GUI?

Re: How do I right-align the 'help' menu item

Posted: 09 Apr 2017, 12:59
by Ziriax
Could you try to explicitly set the width of the menu to some large number, and observe the effect?

Re: How do I right-align the 'help' menu item

Posted: 10 Apr 2017, 07:52
by nokola
Instead of HorizontalAlignment="Right" for the help menu can you try DockPanel.Dock="Right"? That might work. https://wpftutorial.net/DockPanel.html

Re: How do I right-align the 'help' menu item

Posted: 10 Apr 2017, 17:36
by Ziriax
I tried playing with this code in Kaxaml and the Noesis XamlPlayer, and as far as I can tell, this is a bug, Menu seems to ignore the ItemsPanel completely.

For example, the following code

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
   <Menu Foreground="White">
      <Menu.ItemsPanel>
         <ItemsPanelTemplate>
         <StackPanel IsItemsHost="True" Orientation="Vertical" Background="Skyblue"/>
         </ItemsPanelTemplate>
      </Menu.ItemsPanel>
      <MenuItem Header="File">
         <MenuItem Header="Exit"/>
      </MenuItem>
      <MenuItem Header="Edit">
         <MenuItem Header="Cut"/>
      </MenuItem>
      <MenuItem Header="Help">
         <MenuItem Header="About"/>
      </MenuItem>
   </Menu>
</UserControl>
still layouts each MenuItem horizontally stacked

Re: How do I right-align the 'help' menu item

Posted: 10 Apr 2017, 17:55
by Ziriax
If I include the Noesis style into the XAML, the WPF version also fails. So it seems the default Noesis Menu template is wrong. Investigating further.

Re: How do I right-align the 'help' menu item

Posted: 10 Apr 2017, 18:08
by Ziriax
Indeed, the builtin Noesis style for Menu is wrong (well actually, so is the MSDN documentation).

I assume you're using `NoesisStyle.xaml` as your theme.

Open `NoesisStyle.xaml`, and search for `<Style TargetType="{x:Type Menu}"`.

Then replace the following code
<StackPanel IsItemsHost="True" Orientation="Horizontal"/>
by
<ItemsPresenter/>

Re: How do I right-align the 'help' menu item

Posted: 11 Apr 2017, 03:40
by nokola
Good find! I recommend report it on the bug tracker.

Re: How do I right-align the 'help' menu item

Posted: 11 Apr 2017, 11:37
by Ziriax
Working on it! I'll provide a patch too.

Re: How do I right-align the 'help' menu item

Posted: 11 Apr 2017, 19:04
by sfernandez
Thanks for all the investigation here Ziriax.
We will include the patch in the following release.

PhiLong, meanwhile you can override default template in the Menu to apply the patch locally:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
   <Menu Foreground="White">
      <Menu.Template>
         <ControlTemplate TargetType="Menu">
            ...
         </ControlTemplate>
      </Menu.Template>
      <Menu.ItemsPanel>
         <ItemsPanelTemplate>
            <DockPanel IsItemsHost="True" LastChildFill="False"/>
         </ItemsPanelTemplate>
      </Menu.ItemsPanel>
      <MenuItem Header="File" DockPanel.Dock="Left">
         <MenuItem Header="Exit"/>
      </MenuItem>
      <MenuItem Header="Edit" DockPanel.Dock="Left">
         <MenuItem Header="Cut"/>
      </MenuItem>
      <MenuItem Header="Help" DockPanel.Dock="Right">
         <MenuItem Header="About"/>
      </MenuItem>
   </Menu>
</UserControl>

Re: How do I right-align the 'help' menu item

Posted: 25 Apr 2017, 11:27
by sfernandez
Default styles fixed in NoesisGUI 2.0.1 to use ItemsPresenter in all the items controls.