wpf - WPF MVVM 列表中的图像

Question

我有一个关于如何在 WPF MVVM 中最好地完成某事的问题。我的 ViewModel 中有一系列整数。为了举例，让我们称它们为:

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

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

Answer 1

您可以使用 ImageBrush用图像平铺矩形，并将矩形的宽度绑定(bind)到所需图像的副本数。像这样的东西:

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