Drawing Pixels as Custom Shapes

Question

I have a source image, I want to reduce it to pixels using the method at http://notes.ericwillis.com/2009/11/pixelate-an-image-with-csharp/ and draw each pixel as either a filled circle, hollow circle or square (each actual pixel should be about 15px on screen).

The only way I can think of doing this is by creating each pixel as a usercontrol with DependancyProperties for Color and Shape (bound to a path maybe?). A parent UC derived from ItemsControl would create hundreds of these pixel UCs inside itself.

This seems like a performance nightmare though.

EDIT: To give some context, this is for a pixel art generating app. I need to store each 'pixel' in a database with attributes for X, Y and Color.

Is this the best way of achieving this?

Answer 1

Performance is actually very impressive. I used a UserControl (root), with a DependancyProperty for Sprite and an ItemsControl with a multibinding. A MultiValueConverter converts the dots of the art to Path elements, taking the size of the canvas into account:

<ItemsControl>
    <ItemsControl.ItemsSource>
        <MultiBinding Converter="{StaticResource dotToPixelConverter}">
            <Binding Path="Sprite.Beads" ElementName="root"/>
            <Binding Path="Sprite.Width" ElementName="root"/>
            <Binding Path="Sprite.Height" ElementName="root"/>
            <Binding Path="ActualWidth" ElementName="root"/>
            <Binding Path="ActualHeight" ElementName="root"/>
        </MultiBinding>
    </ItemsControl.ItemsSource>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>