WPF MVVM中列表中的图像

Question

我有一个关于如何在WPF MVVM中最好地完成某些事情的问题.我在我的ViewModel中有一系列整数.为了举例,我们打电话给他们:

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

我还有一些非常简单的小图像:红色圆圈,黄色圆圈和绿色圆圈.根据上述属性,想法是在视图上有一些区域,其中包含许多这些图像.因此,如果视图模型的这个实例有3个黄色,2个红色和1个绿色,我想在我的ListBox中有6个图像,黄色圆圈中有3个,红色中有2个,绿色中有1个.现在,我有它工作,但使用一些非常笨拙的代码,我使用丑陋的for循环在ViewModel中构建图像列表.在WPF中有没有更优雅的方法来完成这项任务？理想情况下,我根本不想在ViewModel中引用图像...

Answer 1

您可以使用ImageBrush使用图像平铺矩形,并将矩形的宽度绑定到所需图像的份数.像这样的东西:

<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>

更新:正如Ray在评论中指出的那样,如果您只是想绘制圆圈,那么使用DrawingBrush比使用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. -->