CODEWITHSUNDEEP
xamlgridwindows-phone-8rectangles
Ian Flynn
Ian Flynn

Reputation: 3727

Thin lines appears between rectangles when the grid control is used to tile them together for windows phone

Below code will show thin lines between the tiled rectangles on the windows phone. I tried setting UseLayoutRounding to true but does not seem to do anything. There are more thin lines when code is run using a device (lumina 920 in my case) rather than the emulator but the 720p emulator seems to have more trouble with this. Is there a simple property that I missed that can fix this? I'm using rectangle scaling to 1.1 right now to hide the line but not an elegant solution especially if the rectangles turns semi-transparent then there are bright spots on the overlapped area.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" UseLayoutRounding="True" >
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="White" Grid.Row="0" Grid.Column="0" StrokeThickness="0" />
    <Rectangle Fill="White" Grid.Row="1" Grid.Column="0" StrokeThickness="0" />
    <Rectangle Fill="White" Grid.Row="2" Grid.Column="0" StrokeThickness="0" />
    <Rectangle Fill="White" Grid.Row="0" Grid.Column="1" StrokeThickness="0" />
    <Rectangle Fill="White" Grid.Row="1" Grid.Column="1" StrokeThickness="0" />
    <Rectangle Fill="White" Grid.Row="2" Grid.Column="1" StrokeThickness="0" />
    <Rectangle Fill="White" Grid.Row="0" Grid.Column="2" StrokeThickness="0" />
    <Rectangle Fill="White" Grid.Row="1" Grid.Column="2" StrokeThickness="0" />
    <Rectangle Fill="White" Grid.Row="2" Grid.Column="2" StrokeThickness="0" />
    <Rectangle Fill="White" Grid.Row="3" Grid.Column="0" StrokeThickness="0" />
    <Rectangle Fill="White" Grid.Row="3" Grid.Column="1" StrokeThickness="0" />
    <Rectangle Fill="White" Grid.Row="3" Grid.Column="2" StrokeThickness="0" />
</Grid>

thin lines between grids

Upvotes: 0

Views: 401

Answers (1)

JasonRShaver
JasonRShaver

Reputation: 4394

If you are seeing this on WXGA (Nokia 920) and 720p (HTC 8X), but not on a WVGA (Nokia 820), then this is a result with the multiresolution scale factor system. In WP8, all the screens are 480 logical pixels wide, and we apply a multiplier for each resolution (1.5 for 720p, 1.6 for WXGA). If you need the layout to be perfect, you have a few options:

  • Use a separate XAML for problem resolutions
  • Use numbers that round in the same direction when multiplied 1.0, 1.5, and 1.6.
  • Set your widths based on the ScaleFactor value

I admit that none of these are perfect, but depending on your needs, sometimes a small change to the values can fix any issues.

An article you can read that gives some information about this can be found here: http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206974%28v=vs.105%29.aspx

Upvotes: 1

Related Questions