WPF adds black bar to Window

Question

I have built a WPF application with a variable width and height (xaml height and width definition for the window is set to Auto). Once the contents of the window are loaded, the width does not (well, is not supposed to) change. The height might change as items are removed or added from the list.

The background is a gradient, not an image.

After a period where the application is idling and isn't the top-most, when switching back to the application, the window is wider as a black bar was added, extending the window to the right.
.
(Before this black bar appears, the window's width is the section with the blue gradient background)

I've added a hidden menu item to the window and when the user presses Alt the menu appears. At first, I simply added the menu and opening it caused the window to re-render as menu the item suddenly became visible and added to the window's height. As the window was re-rendered, the black bar disappeared and the window was its original width.

I tried the following solutions by adding an event where Window.OnFocus calls a function which:

1. changes the width (adds 1 pixel and then removes 1 pixel)... but this doesn't seem to do anything.
2. checks the width of the window. If the width is larger than the expected width, a re-render is manually called. But no dice...

What is causing this black bar to appear? How can I prevent it from happening?

The biggest problem here is that I can't seem to consistently reproduce the problem... sometimes, the application will sit open, idling in the background for the whole day and this won't happen. Sometimes, I'll go out to lunch, come back and there it is...

The content is loaded dynamically upon starting up, and there's a webservice call initiated every few minutes to check for changes. At this stage of development and testing, there aren't all that many changes happening so that the ui items are simply static most of the time. Even so, this black bar will appear at times after the application idles for a while, as mentioned.

---

Per suggestion, here is the xaml for the application:

MainWindow:

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:y="clr-namespace:MyApp"
        Title="MyApp"
        Height="Auto" Width="390"
        SizeToContent="WidthAndHeight"
        WindowStyle="SingleBorderWindow"
        WindowStartupLocation="Manual"
        ResizeMode="CanMinimize">
    <Grid Name="MainGrid" Style="{StaticResource Normal}">
        <Grid.RowDefinitions>
            <RowDefinition Height="18" />
            <RowDefinition Height="65"/>
            <RowDefinition Height="Auto" MinHeight="200"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150" />
            <ColumnDefinition Width="218" />
        </Grid.ColumnDefinitions>
        <Menu Grid.ColumnSpan="2"
              [SETTINGS REMOVED FOR BREVITY]>
        </Menu>
        [ELEMENTS REMOVED FOR BREVITY]
        <Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Height="Auto" Width="Auto" x:Name="ContentGrid"></Grid>
    </Grid>
</Window>

MainPanel (which goes into the ContentGrid):

<UserControl x:Class="MyApp.MainPanel"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             Height="Auto" Width="Auto" FlowDirection="RightToLeft">
    <Grid Margin="19,0,19,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="65" />
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="75" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="160" />
            <ColumnDefinition Width="85" />
            <ColumnDefinition Width="85" />
        </Grid.ColumnDefinitions>
        <TextBlock Name="FirstHeader" Grid.Column="0" Grid.Row="0" Style="{StaticResource Header}" Text="***" />
        <TextBlock Name="SecondHeader" Grid.Column="1" Grid.Row="0" Style="{StaticResource Header}">***<LineBreak />***</TextBlock>
        <TextBlock Name="ThirdHeader" Grid.Column="2" Grid.Row="0" Style="{StaticResource Header}" Text="***" />
        <StackPanel Name="MainStack" Grid.Row="1" Grid.ColumnSpan="3" />
        <Button Name="ActionButton" Grid.ColumnSpan="3" Grid.Row="2" FlowDirection="LeftToRight" Style="{StaticResource NotInService}"  Click="ActionButton_Click" />
    </Grid>
</UserControl>

And the MainStack in the MainPanel is filled with these:

<UserControl x:Class="MyApp.mItem"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="35" d:DesignWidth="348" FlowDirection="RightToLeft">
    <Grid Margin="0,0,0,05">
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="160" />
            <ColumnDefinition Width="85" />
            <ColumnDefinition Width="85" />
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Name="PanelActionButton" Style="{StaticResource PanelActionButton}" Click="PanelActionButton_Click">
            <TextBlock Name="AnswerButtonText" Style="{StaticResource ButtonText}"></TextBlock>
        </Button>
        <Label Grid.Row="0" Grid.Column="1" Name="SecondCol" Style="{StaticResource SecondCol}" />
        <Label Grid.Row="0" Grid.Column="2" Name="ThirdCol" Style="{StaticResource ThirdCol}" />
    </Grid>
</UserControl>

I don't know if it's pertinent, but this is the way I've styled the background:

        <Style TargetType="{x:Type Grid}" x:Key="Normal">
            <Setter Property="Background">
                <Setter.Value>
                    <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="1" RadiusY="1">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#00AEEF" Offset="0" />
                            <GradientStop Color="#034ea2" Offset="1" />
                        </RadialGradientBrush.GradientStops>
                    </RadialGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="FlowDirection" Value="RightToLeft" />
        </Style>

Answer 1

Some suggestions:

SizeToContent="WidthAndHeight"

could be changed to

SizeToContent="Height"

since you also defined the width to be 390. Besides that, check if the window with the black area is still the expected width of 390.

Although it´s not in your posted code, check if elements could extend the width with it´s content (like images, long strings, etc.).

Another thing you should consider is to carefully choose your margins and widths (and heights) since they could easily sum up. E.g. your using

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="160" />
        <ColumnDefinition Width="85" />
        <ColumnDefinition Width="85" />
    </Grid.ColumnDefinitions>

twice and inside grids which each have a margin.

Also have a look at the menu you´re using. Since it´s using some visibility converter, my guess is, that it might generate a menu that could be more than 390 wide.

And finally... what´s with the

FlowDirection="RightToLeft"

If there´s no real need for it, delete it :)