Gap between shapes after scaling in Silverlight

Create a 400 x 400 Canvas. Put a Blue rectangle that is 200 x 400 in it. Put another Blue rectangle, same size, with Canvas.Left = 200. Wrap this in a Viewbox and scale the view box. At certain resolutions, you will find a white column appears between the rectangles despite the fact they are supposed to be flush.

How can I avoid this? The only way I've found so far is to set the canvas left of 开发者_开发知识库the right rectangle to slightly less than 200, like 199 - but even that shows artifacts at certain scales.

The ScaleTransform in ViewBox is giving you trouble. Pixel snapping for text will be delivered in Silverlight 5, but I'm not sure about all UI elements.

Using Dave Reyea's Pixel Snapper can help you get around this:

<UserControl x:Class="SO_Viewbox.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
              xmlns:local="clr-namespace:SO_Viewbox">

    <Viewbox>
        <Canvas Width="400" Height="400" Background="Yellow">
            <local:Snapper Snap="TopLeft">
                <Rectangle Width="200" Height="400" Fill="Blue" />
            </local:Snapper>
            <local:Snapper Canvas.Left="200" Snap="TopLeft">
                <Rectangle  Width="200" Height="400" Fill="Blue" />
            </local:Snapper>
        </Canvas>
    </Viewbox>
</UserControl>

He also shows how to implement it as a dependency property. It would be nice if you could modify Viewbox to correct the issue, but it seems to me that this can't simply be solved by modifying the Viewbox's transform -- that instead, pixel snapping must be applied to each of the decendant elements of the Viewbox.