lundi 11 mai 2015

WPF adds black bar to Window

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.
I've blurred out the content as it is unimportant here.
(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://ift.tt/o66D3f"
        xmlns:x="http://ift.tt/mPTqtT"
        xmlns:y="clr-namespace:MyApp"
        Title="MyApp"
        Height="Auto" Width="390"
        SizeToContent="WidthAndHeight"
        WindowStyle="SingleBorderWindow"
        WindowStartupLocation="Manual"
        ResizeMode="CanMinimize">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    </Window.Resources>
    <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"
              Visibility="{Binding Path=IsMenuVisible,
                                   RelativeSource={RelativeSource AncestorType=Window},
                                   Converter={StaticResource BooleanToVisibilityConverter}}">
            <MenuItem Header="File">
                <!--redacted other menu items-->
            </MenuItem>
        </Menu>
        <Image Grid.Row="1" Grid.Column="0" Source="http://packApplication:,,,/Resources/logo.png" Height="55" Width="118" HorizontalAlignment="Left" Margin="10,10,0,0" />
        <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://ift.tt/o66D3f"
             xmlns:x="http://ift.tt/mPTqtT"
             xmlns:mc="http://ift.tt/pzd6Lm" 
             xmlns:d="http://ift.tt/pHvyf2" 
             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://ift.tt/o66D3f"
             xmlns:x="http://ift.tt/mPTqtT"
             xmlns:mc="http://ift.tt/pzd6Lm" 
             xmlns:d="http://ift.tt/pHvyf2" 
             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>

Oh, and the App file (styles):

<Application x:Class="MyApp.App"
             xmlns="http://ift.tt/o66D3f"
             xmlns:x="http://ift.tt/mPTqtT"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style TargetType="{x:Type Control}" x:Key="CFontStyle">
            <Setter Property="FontFamily" Value="fonts/#Typograph" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
        <Style TargetType="{x:Type TextBlock}" x:Key="TBFontStyle">
            <Setter Property="TextBlock.FontFamily" Value="fonts/#Typograph" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
        <Style TargetType="{x:Type Label}" x:Key="LFontStyle">
            <Setter Property="Label.FontFamily" Value="fonts/#Typograph" />
            <Setter Property="FontSize" Value="20" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="Height" Value="30" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
        <Style TargetType="{x:Type Paragraph}" x:Key="PFontStyle">
            <Setter Property="FontSize" Value="12" />
        </Style>
        <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>
        <Style BasedOn="{StaticResource CFontStyle}" TargetType="{x:Type Button}" x:Key="NotInService">
            <Setter Property="Width" Value="104" />
            <Setter Property="Height" Value="37" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Border>
                                <Border.Background>
                                    <ImageBrush ImageSource="http://packApplication:,,,/Resources/service_button_OUT.png" Stretch="Fill" TileMode="None" />
                                </Border.Background>
                            </Border>
                            <ContentPresenter Content="{TemplateBinding Content}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Cursor" Value="Hand" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style BasedOn="{StaticResource CFontStyle}" TargetType="{x:Type Button}" x:Key="InService">
            <Setter Property="Width" Value="104" />
            <Setter Property="Height" Value="37" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Border>
                                <Border.Background>
                                    <ImageBrush ImageSource="http://packApplication:,,,/Resources/service_button_IN.png" Stretch="Fill" TileMode="None" />
                                </Border.Background>
                            </Border>
                            <ContentPresenter Content="{TemplateBinding Content}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Cursor" Value="Hand" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style BasedOn="{StaticResource CFontStyle}" TargetType="{x:Type Button}" x:Key="WaitForService">
            <Setter Property="Width" Value="104" />
            <Setter Property="Height" Value="37" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Border>
                                <Border.Background>
                                    <ImageBrush ImageSource="http://packApplication:,,,/Resources/service_button_WAIT.png" Stretch="Fill" TileMode="None" />
                                </Border.Background>
                            </Border>
                            <ContentPresenter Content="{TemplateBinding Content}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Cursor" Value="No" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style BasedOn="{StaticResource CFontStyle}" TargetType="{x:Type Button}" x:Key="PanelActionButton">
            <Setter Property="Width" Value="160" />
            <Setter Property="Height" Value="40" />
            <Setter Property="Foreground" Value="#414042" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Border>
                                <Border.Background>
                                    <ImageBrush ImageSource="http://packApplication:,,,/Resources/pancel_action_button.png" Stretch="Fill" TileMode="None" />
                                </Border.Background>
                            </Border>
                            <ContentPresenter Content="{TemplateBinding Content}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Cursor" Value="Hand" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type TextBlock}" x:Key="ButtonText">
            <Setter Property="TextAlignment" Value="Left" />
            <Setter Property="FlowDirection" Value="RightToLeft" />
            <Setter Property="Margin" Value="15,0,15,0" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
        <Style BasedOn="{StaticResource LFontStyle}" TargetType="{x:Type Label}" x:Key="SecondCol">
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="5" ShadowDepth="0" Opacity="1" Direction="315" Color="Black"/>
                </Setter.Value>
            </Setter>
        </Style>
        <Style BasedOn="{StaticResource LFontStyle}" TargetType="{x:Type Label}" x:Key="ThirdCol">
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="5" ShadowDepth="0" Opacity="1" Color="Black"/>
                </Setter.Value>
            </Setter>
        </Style>
        <Style BasedOn="{StaticResource TBFontStyle}" TargetType="{x:Type TextBlock}" x:Key="Header">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="TextAlignment" Value="Center" />
            <Setter Property="TextWrapping" Value="Wrap" />
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="3" ShadowDepth="0" Opacity="1" Color="Black"/>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

Aucun commentaire:

Enregistrer un commentaire