Search code examples
wpf

WPF - Uniformgrid - Remove space between items

I'm creating a visualization that should look something similar to a progress bar. I'm using a Uniform grid container with a collection of borders of different color but it create a sort of border around the items that doesn't look nice.

This is my code:

<UniformGrid x:Name="FakeProgressBar" Grid.Row="2" Height="20" Rows="1">
   <UniformGrid.Resources>
       <Style TargetType="Border">
          <Setter Property="BorderThickness" Value="0"/>
          <Setter Property="BorderBrush" Value="Black"/>
          <Setter Property="Margin" Value="0"/>
       </Style>
   </UniformGrid.Resources>
   <Border Background="Blue"/>
   <!- Borders get added dynamically from code behind ->
</UniformGrid>

This is how it does look like: enter image description here

There are pixels separating the borders. But this is not margin nor actual border.. How do I get rid of those?

PS: I cannot use a normal progress bar because not all borders will be blue. I have different colors encoding different kinds of items.

Solution

  • Try adding UseLayoutRounding="True" to your UniformGrid, should make it less visible.
    Since it's a rendering problem, if you zoom in and out in the designer window, you should see the spaces appear and disappear.
    It also affects normal Grids.