Logo
My Account |  Site Map | Contact Us  
 The same content in Microsoft HTML help file format is included in the download package.
Spacer Item and Template

EO.Wpf Menu provides built-in "spacer" support. The "spacer" is the available space not occupied by menu items. The default spacer location is at the right, as demonstrated in the following image:

Use SpacerPosition property to specify the position of the spacer. Postivie number indicates a location from left to right, while negative number indicates a location from right to left. For example, a typical value for this property is -1, which produces the following result:

Note the position of the "Help" menu item is now being pushed to the right, while the "spacer" item is being placed between the "Window" and the "Help" menu item.

You can further customize the content of the spacer item with SpacerTemplate. For example, the following sample places a "theme selector" ComboBox inside the spacer item:

XAML
<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:eo="http://schemas.essentialobjects.com/wpf/"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>
        <eo:Menu IsMainMenu="True" SpacerPosition="-1">
            <eo:Menu.SpacerTemplate>
                <DataTemplate>
                    <eo:ComboBox Width="100" IsEditable="True" HorizontalAlignment="Right">
                        <eo:ComboBoxItem>Classic</eo:ComboBoxItem>
                        <eo:ComboBoxItem>Aero</eo:ComboBoxItem>
                        <eo:ComboBoxItem>Luna</eo:ComboBoxItem>
                    </eo:ComboBox>
                </DataTemplate>
            </eo:Menu.SpacerTemplate>
            <eo:MenuItem Header="_File" />
            <eo:MenuItem Header="_Edit" />
            <eo:MenuItem Header="_View" />
            <eo:MenuItem Header="_Window" />
            <eo:MenuItem Header="_Help" />
        </eo:Menu>
    </StackPanel>
</Window>

The above code produces the following result:


Direct link to this topic