WPF Menu item right alignment

Question

I have the following menu. I am trying to right align the content of the menu.

<Menu Grid.ColumnSpan="3">
        <MenuItem Header="Items">
            <MenuItem>
                <MenuItem.Header>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="Item 1" Grid.Column="0" HorizontalAlignment="Stretch" />
                        <Button Grid.Column="1" Content="E" />
                        <Button Grid.Column="2" Content="D" />
                    </Grid>
                </MenuItem.Header>
            </MenuItem>
            <MenuItem>
                <MenuItem.Header>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="Item 2" Grid.Column="0" HorizontalAlignment="Stretch" />
                        <Button Grid.Column="1" Content="E" />
                        <Button Grid.Column="2" Content="D" />
                    </Grid>
                </MenuItem.Header>
            </MenuItem>
        </MenuItem>
    </Menu>

What is displayed is as below:

 ------------------
 Item 1 D E       |
 ------------------
 Item 2 D E       |
 ------------------

There is still lot of space left after E.

What I am expecting is:

 ------------------
 Item 1       D E |
 ------------------
 Item 2       D E |
 ------------------

I want the D and E to be aligned to the right where as the Item 1 and Item 2 are aligned to the left.

I tried playing with HorizontalAlignment with no help to find the answer.

Answer 1

You can use DockPanel instead of Grid for that purpose. Also try to set Width of your menu items explicitly. Like this:

    <MenuItem>
        <MenuItem.Header>
            <DockPanel LastChildFill="False" Width="250">
                <TextBlock Text="Item 1" DockPanel.Dock="Left" HorizontalAlignment="Stretch" />
                <Button DockPanel.Dock="Right" Content="E" />
                <Button DockPanel.Dock="Right" Content="D" />
            </DockPanel>
        </MenuItem.Header>
    </MenuItem>

Answer 2

I'm more of a dockpanel type of guy. How about you try:

<MenuItem>
    <MenuItem.Header>
        <DockPanel LastChildFill="True">
            <Button DockPanel.Dock="Right" Content="E" />
            <Button DockPanel.Dock="Right" Content="D" />

            <TextBlock DockPanel.Dock="Left" Text="Item 1" />
        </DockPanel>
    </MenuItem.Header>
</MenuItem>