Pixel Alignment Issues in WPF Grid

I am using WPF Grid to align objects and am faced with a rather egregious problem regarding column pixel alignment. I tried to remove as many variables as possible and was able to show the problem in this code:

<Window x:Class="Test.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100.5" />
        <ColumnDefinition Width="199.5" />
    </Grid.ColumnDefinitions>
    <Border Background="Red">
        <Grid.Column>1</Grid.Column>
    </Border>
    <Border Background="Red">
    </Border>
</Grid>
</Window>

      

If you run this sample, it is easy to see that there is a problem at the border between the two columns. This caused, I believe, because WPF is just alpha combining one column with the background and the other with the result, although conceptually both columns are in the same Z, so the pixel should be mixing the sum of their weights and the background.

I realize this is a problematic issue and naturally I am not intentionally creating columns with partial pixel sizes, but the same effect can be easily observed when using star sizes (which I use frequently).

This problem can be solved by using the SnapsToDevicePixels property ( <Grid SnapsToDevicePixels="True">

instead of <Grid>

). this works because WPF has internally consistent rounding, so both columns are bound to the same pixel. However, I hit a related issue that is very vein-like that I couldn't find a solution to.

For some reason, when I use the Geometry class, I get the same pixel alignment problems and I didn't find any work this time. It's as if the pixels have been rounded, but now the geometry is cut by one pixel, leaving a 1-pixel hole.

Sample code:

<Window x:Class="Test.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid SnapsToDevicePixels="False">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100.5" />
        <ColumnDefinition Width="199.5" />
    </Grid.ColumnDefinitions>
    <Border Background="Red">
        <Grid.Column>1</Grid.Column>
    </Border>
    <Border>
        <Border.Background>
            <DrawingBrush>
                <DrawingBrush.Drawing>
                    <GeometryDrawing Brush="Red">
                        <GeometryDrawing.Geometry>
                            <RectangleGeometry Rect="0,0,1,1"></RectangleGeometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Border.Background>
    </Border>
</Grid>
</Window>

      

Any idea how to properly align my pixels?

EDIT:

Working correctly after adding the GuidelineSet as per the answer. Drawing working code:

<DrawingGroup>
    <DrawingGroup.GuidelineSet>
        <GuidelineSet GuidelinesX="0,1" GuidelinesY="0,1"></GuidelineSet>
    </DrawingGroup.GuidelineSet>                
    <GeometryDrawing Brush="Red">
        <GeometryDrawing.Geometry>
            <RectangleGeometry Rect="0,0,1,1"></RectangleGeometry>
        </GeometryDrawing.Geometry>
    </GeometryDrawing>
</DrawingGroup>

      

+2


source to share


1 answer


I believe you should use the GuidelineSet in the drawing case . There's a good section on how to apply the available tutorial sets here in the SDK.



+2


source







All Articles