Question

I have a question regarding how to best accomplish something in WPF MVVM. I have in my ViewModel a series of integers. For the sake of example, lets call them:

public int Yellow
{
    get;set;
}
public int Red
{
    get;set;
}
public int Green
{
    get;set;
}

I also have some small images that are very simple: A Red circle, a Yellow circle, and a Green circle. The idea is to have an area on the view with a number of these images, based on the above properties. So if this instance of the view model has 3 Yellow, 2 Red, and 1 Green, I want 6 images in my ListBox, 3 of the yellow circle, 2 of the red, and 1 of the green. Right now, I have it working, but using some very clumsy code where I build the image list in the ViewModel using an ugly for-loop. Is there some more elegant way to accomplish this task in WPF? Ideally, I wouldn’t want to have to reference the image in the ViewModel at all…

Answer 1

You could use an ImageBrush to tile a rectangle with an image, and bind the width of the rectangle to the number of copies of the image you want. Something like this:

<StackPanel Orientation="Horizontal">
    <StackPanel.LayoutTransform>
        <ScaleTransform ScaleX="20" ScaleY="20"/>
    </StackPanel.LayoutTransform>
    <Rectangle Width="{Binding Yellow}" Height="1">
        <Rectangle.Fill>
            <ImageBrush
                ImageSource="Yellow.png"
                Viewport="0,0,1,1"
                ViewportUnits="Absolute"
                TileMode="Tile"/>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Width="{Binding Red}" Height="1">
        <Rectangle.Fill>
            <ImageBrush
                ImageSource="Red.png"
                Viewport="0,0,1,1"
                ViewportUnits="Absolute"
                TileMode="Tile"/>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Width="{Binding Green}" Height="1">
        <Rectangle.Fill>
            <ImageBrush
                ImageSource="Green.png"
                Viewport="0,0,1,1"
                ViewportUnits="Absolute"
                TileMode="Tile"/>
        </Rectangle.Fill>
    </Rectangle>
</StackPanel>

---

Update: As Ray pointed out in his comment, if you are just trying to draw circles then you will get better zoom behavior by using a DrawingBrush than by using an Image:

<StackPanel Orientation="Horizontal">
    <StackPanel.LayoutTransform>
        <ScaleTransform ScaleX="20" ScaleY="20"/>
    </StackPanel.LayoutTransform>
    <StackPanel.Resources>
        <EllipseGeometry x:Key="Circle" RadiusX="1" RadiusY="1"/>
    </StackPanel.Resources>
    <Rectangle Width="{Binding Yellow}" Height="1">
        <Rectangle.Fill>
            <DrawingBrush ViewportUnits="Absolute" TileMode="Tile">
                <DrawingBrush.Drawing>
                    <GeometryDrawing
                        Brush="Yellow"
                        Geometry="{StaticResource Circle}"/>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Rectangle.Fill>
    </Rectangle>
    <!-- etc. -->