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:
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?
4
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.
1