Search code examples
wpfwindowsuser-interface

How to remove the line coming below the top grid row of my WPF application

I am trying to design an application with two rows on top that are of the same colour, however when I run it, no matter what the content is in the top row, there is always a line that separates it from the row below it.

My current code is as follows:

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"></RowDefinition>
        <RowDefinition Height="50"></RowDefinition>
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Background="DarkSlateGray" ShowGridLines="False">
        <DockPanel VerticalAlignment="Center">
            <Grid>
                <Rectangle Width="30" Height="30" Margin="10,0,0,0" VerticalAlignment="Center" Fill="#2F2F2F" ></Rectangle>
                <Image Width="30" Height="30" Margin="10,0,0,0" VerticalAlignment="Center"></Image>
            </Grid>
            <TextBlock Margin="10,0,0,0" FontSize="30" VerticalAlignment="Center">Title</TextBlock>
        </DockPanel>
    </Grid>
    <Grid Grid.Row="1" Background="DarkSlateGray" ShowGridLines="False">
        <Grid.Resources>
            <Style TargetType="RadioButton" BasedOn="{StaticResource NavButton}"/>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <RadioButton Grid.Column="0" Content="Home" VerticalAlignment="Center" Checked="RadioButton_Checked" Tag="home" IsChecked="True"></RadioButton>
        <RadioButton Grid.Column="1" Content="System" VerticalAlignment="Center" Checked="RadioButton_Checked" Tag="system"></RadioButton>
        <RadioButton Grid.Column="2" Content="Troubleshoot" VerticalAlignment="Center" Checked="RadioButton_Checked" Tag="troubleshoot"></RadioButton>
        <RadioButton Grid.Column="3" Content="Support" VerticalAlignment="Center" Checked="RadioButton_Checked" Tag="support"></RadioButton>

    </Grid>

</Grid>

And the line is coming like this below the top row:enter image description here
I have messed around with the contents of this row and even left it blank with no elements in it, however, this line persists. How do I remove it?

Solution

  • Properties SnapsToDevicePixels and/or UseLayoutRounding may be responsible for that effect if they are set to True. Try to set them False and check if that helps.

    <Grid SnapsToDevicePixels="False" UseLayoutRounding="False">
    ...
    <Grid Grid.Row="0" Background="DarkSlateGray" SnapsToDevicePixels="False" UseLayoutRounding="False">
        ...
    </Grid>
    <Grid Grid.Row="1" Background="DarkSlateGray" SnapsToDevicePixels="False" UseLayoutRounding="False">
        ...
    </Grid>
</Grid>

    Revert this change after checking if that was the source of the problem.

    As a solution move Background="DarkSlateGray" to the outer <Grid> and add Background="White" where the "Hello" text is.

    The problematic line is not a line - this is lack of DarkSlateGray background between two <Grid>s, mixed with white background undernach. The gap between grids is definitely bigger than 0.0, but less than 1.0 px.