Unable to set Menu width to 100% in WPF. What's wrong with my code?

Question

I am looking for a way to set Menu width to 100% in WPF. I am trying to create a Notepad like application, and tried the following.

<Window x:Name="Notepad" x:Class="Notepad.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Untitled - My Notepad" Height="350" Width="525"
        WindowState="Maximized" 
        SizeToContent="Width">
    <Grid>
        <RichTextBox x:Name="mainTextBox" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <FlowDocument>
                <Paragraph>
                    <InlineUIContainer>
                        <Menu Height="25" HorizontalContentAlignment="Stretch" >
                            <MenuItem Header="_File" />
                            <MenuItem Header="_Edit" />
                            <MenuItem Header="_Format" />
                            <MenuItem Header="_View" />
                            <MenuItem Header="_Run" />
                            <MenuItem Header="_Help" />
                        </Menu>
                    </InlineUIContainer>
                </Paragraph>
             </FlowDocument>
        </RichTextBox>
    </Grid>
</Window>

and

<Window x:Name="Notepad" x:Class="Notepad.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Untitled - My Notepad" Height="350" Width="525"
        WindowState="Maximized" 
        SizeToContent="Width">
    <Grid>
        <RichTextBox x:Name="mainTextBox" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <FlowDocument>
                <Paragraph>
                    <InlineUIContainer>
                        <Menu Height="25" HorizontalAlignment="Stretch" >
                            <MenuItem Header="_File" />
                            <MenuItem Header="_Edit" />
                            <MenuItem Header="_Format" />
                            <MenuItem Header="_View" />
                            <MenuItem Header="_Run" />
                            <MenuItem Header="_Help" />
                        </Menu>
                    </InlineUIContainer>
                </Paragraph>
             </FlowDocument>
        </RichTextBox>
    </Grid>
</Window>

The result in both case was the same. It didn't work. Here's the screenshot.

https://i.sstatic.net/Elyzu.png

Then I found the following solution.

<Window x:Name="Notepad" x:Class="Notepad.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Untitled - My Notepad" Height="350" Width="525"
        WindowState="Maximized" 
        SizeToContent="Width">
    <Grid>
        <RichTextBox x:Name="mainTextBox" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <FlowDocument>
                <Paragraph>
                    <InlineUIContainer>
                        <Menu Height="25" Width="{Binding ElementName=mainTextBox, Path=ActualWidth}" >
                            <MenuItem Header="_File" />
                            <MenuItem Header="_Edit" />
                            <MenuItem Header="_Format" />
                            <MenuItem Header="_View" />
                            <MenuItem Header="_Run" />
                            <MenuItem Header="_Help" />
                        </Menu>
                    </InlineUIContainer>
                </Paragraph>
             </FlowDocument>
        </RichTextBox>
    </Grid>
</Window>

But the result was not satisfactory.

https://i.sstatic.net/Dydp5.png

As you can see I am getting some kind of margin for the Menu bar. Can someone tell me what is wrong with my code (in both cases)?

Answer 1

Before implementing this approach, set Padding="-5,0" on the RichTextBox and give it a try.

Or go for the second way :

<Window x:Class="MenuWidthStack.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid x:Name="container">
    <RichTextBox x:Name="mainTextBox" Padding="0" Margin="0" Width="{Binding ElementName=container, Path=ActualWidth}">
        <FlowDocument x:Name="fd" PagePadding="{Binding PagePadding, Mode=TwoWay}" >
            <Paragraph>
                <InlineUIContainer>
                    <Menu Height="25" Padding="0" Width="{Binding ElementName=container, Path=ActualWidth}">
                        <MenuItem Header="_File" />
                        <MenuItem Header="_Edit" />
                        <MenuItem Header="_Format" />
                        <MenuItem Header="_View" />
                        <MenuItem Header="_Run" />
                        <MenuItem Header="_Help" />
                    </Menu>
                </InlineUIContainer>
            </Paragraph>
        </FlowDocument>
    </RichTextBox>
</Grid>

Code behind:

public partial class MainWindow : Window, INotifyPropertyChanged
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;
    }

    private Thickness pagePadding;

    public Thickness PagePadding
    {
        get
        {
            return this.pagePadding;
        }
        set
        {
            this.pagePadding = value;
            this.Changed("PagePadding");
        }
    }

    private void Changed(string name)
    {
        var handlers = this.PropertyChanged;
        if (handlers != null)
        {
            handlers.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

For some reason the PagePadding is being overwritten as "5,0". Use databinding, it will work properly. So simply databind to a Thickness of 0. For it to work, you have to two-way databind.

Just to emphasize, this is the trick:

PagePadding="{Binding PagePadding, Mode=TwoWay}" on FlowDocument

and of course the PagePadding property in code behind.

Answer 2

It seems like you could just move the menu out of the RichTextBox and put them both into a StackPanel.

<Grid>
    <StackPanel>
        <Menu>
            <MenuItem Header="_File" />
            <MenuItem Header="_Edit" />
            <MenuItem Header="_Format" />
            <MenuItem Header="_View" />
            <MenuItem Header="_Run" />
            <MenuItem Header="_Help" />
        </Menu>
        <RichTextBox x:Name="mainTextBox">
            <FlowDocument>
                <Paragraph>

                </Paragraph>
            </FlowDocument>
        </RichTextBox>
    </StackPanel>

</Grid>