Search code examples
wpfxamlwpf-style

Black line under the window title


How to get rid of the black color above the grid?

Log in view with a black bar between the title bar and the window content.

<Window x:Class="Nipendo.Desktop.Biur.Login.LoginWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:adorners="http://gu.se/Adorners"
    mc:Ignorable="d"
    Title="Nipendo Sign Tool" Height="600" Width="600"
    Background="White"
    FlowDirection="{Binding FlowDirection}">
<Window.Resources>
    <Style TargetType="ComboBox">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Height" Value="20"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="Width" Value="90"/>
    </Style>
    <Style TargetType="Border">
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="Gray"/>
        <Setter Property="CornerRadius" Value="2"/>
        <Setter Property="Margin" Value="0,15,0,0"/>
    </Style>
    <Style TargetType="TextBox">
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="FontSize" Value="15"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
    </Style>
    <Style TargetType="PasswordBox">
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="FontSize" Value="15"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
    </Style>
    <Style TargetType="Button">
        <Setter Property="Background" Value="#37b0eb"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="Margin" Value="0,15,0,0"/>
    </Style>
    <Style TargetType="{x:Type adorners:WatermarkAdorner}">
        <Setter Property="TextStyle">
            <Setter.Value>
                <Style TargetType="{x:Type TextBlock}">
                    <Setter Property="Opacity" Value="0.5" />
                    <Setter Property="VerticalAlignment" Value="Center"/>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid Margin="15">
    <Image Grid.Row="1" Grid.Column="1" Source="/Resources/Icons/login_nipendo-logo.png" Height="70" Width="130" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    <ComboBox Grid.Row="1" 
              Grid.Column="1"  
              HorizontalAlignment="Right" 
              Name="comboLanguage" 
              VerticalAlignment="Top" 
              ItemsSource="{Binding Languages}"
              SelectedItem="{Binding SelectedLanguage}"
              DisplayMemberPath="Name">
    </ComboBox>
    <StackPanel Grid.Row="2" VerticalAlignment="center" HorizontalAlignment="Center" MinWidth="350" MaxWidth="450">
        <TextBlock Text="{Binding SignInTitleText}" 
               FontWeight="Bold" 
               FontSize="25" 
               Margin="0,0,0,15"/>
        <Border>
            <DockPanel>
                <Image DockPanel.Dock="Left" Source="/Resources/Icons/login_site.png" Width="20" Height="20"></Image>
                <TextBox Name="txtSiteName" Text="{Binding SiteName}" adorners:Watermark.Text="{Binding SiteNameText}">
                </TextBox>
            </DockPanel>
        </Border>
        <Border >
            <DockPanel>
                <Image DockPanel.Dock="Left" Source="/Resources/Icons/login_user.png" Width="20" Height="20"/>
                <TextBox Name="txtUserName" Text="{Binding UserName}" adorners:Watermark.Text="{Binding UserNameText}"></TextBox>
            </DockPanel>
        </Border>
        <Border >
            <DockPanel>
                <Image DockPanel.Dock="Left" Source="/Resources/Icons/login_password.png" Width="20" Height="20"/>
                <PasswordBox Name="txtPassword" PasswordChanged="txtPassword_PasswordChanged" adorners:Watermark.Text="{Binding PasswordText}"></PasswordBox>
            </DockPanel>
        </Border>
        <Button Name="btnSubmit" Content="{Binding SignInButtonText}" IsEnabled="{Binding CanSubmit}" Command="{Binding SubmitCommand}"/>
    </StackPanel>

    <StackPanel Grid.Row="3" Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="35">
        <TextBlock FontSize="12" Text="{Binding NeedHelpText}" Foreground="#bcc3c7"/>
    </StackPanel>
    
    <StackPanel Grid.Row="4" Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        <TextBlock FontSize="12">
            <Hyperlink NavigateUri="{Binding HelpUrl}"  RequestNavigate="Hyperlink_RequestNavigate" >
                <TextBlock Text="{Binding HelpText}"></TextBlock>
            </Hyperlink>
        </TextBlock>
        <TextBlock FontSize="12" Margin="10,0,10,0">|</TextBlock>
        <TextBlock FontSize="12">
            <Hyperlink NavigateUri="{Binding SupportEmail}" RequestNavigate="Hyperlink_RequestNavigate">
                <TextBlock Text="{Binding SupportEmailText}"></TextBlock>
            </Hyperlink>
        </TextBlock>
        <TextBlock FontSize="12" Margin="10,0,10,0">|</TextBlock>
        <TextBlock FontSize="12">
            <Hyperlink NavigateUri="{Binding NipendoUrl}" RequestNavigate="Hyperlink_RequestNavigate">
                <TextBlock Text="{Binding NipendoUrlText}"></TextBlock>
            </Hyperlink>
        </TextBlock>
    </StackPanel>
</Grid>

Solution

  • Your Border style is an implicit style that is defined in the Resources of your Window. If you remove your Grid and the other styles, you can see that the issue still persists and is perfectly reproducible, which means the Window is the cause. It seems that your implicit style affects the internal style of the Window in any way. This is the reason why the bar is black and setting a window background explicitly does not change this color.

    If you still need to set the style of the Border implicitly, move it to a different inner scope, e.g. down to the next child control, e.g. the Grid or just give it an x:Key and reference it explicitly where needed.

    <Grid Margin="15">
       <Grid.Resources>
          <Style TargetType="Border">
             <Setter Property="BorderThickness" Value="1"/>
             <Setter Property="BorderBrush" Value="Gray"/>
             <Setter Property="CornerRadius" Value="2"/>
             <Setter Property="Margin" Value="0,15,0,0"/>
          </Style>
       </Grid.Resources>
       <!-- ...your grid markup. -->
    </Grid>
    

    Otherwise remove the Margin setter completely and add it to the styles of other, specific controls.