我有一个关于如何在 WPF MVVM 中最好地完成某事的问题。我的 ViewModel 中有一系列整数。为了举例，我们称它们为：
public int Yellow
{
get;set;
}
public int Red
{
get;set;
}
public int Green
{
get;set;
}
我还有一些非常简单的小图像：红色圆圈、黄色圆圈和绿色圆圈。这个想法是在视图上有一个区域，其中包含许多这些图像，基于上述属性。因此，如果视图模型的这个实例有 3 个黄色、2 个红色和 1 个绿色，我想要在我的列表框中有 6 个图像，黄色圆圈的 3 个，红色的 2 个，绿色的 1 个。现在，我让它工作了，但是使用了一些非常笨拙的代码，我使用丑陋的 for 循环在 ViewModel 中构建图像列表。在 WPF 中是否有更优雅的方式来完成这项任务？理想情况下，我根本不想在 ViewModel 中引用图像...
【问题讨论】：
标签： wpf image data-binding mvvm
一种可能性是使用ValueConverter。它非常灵活、解耦并且有助于让 xaml 变得简单。这里是这样一个值转换器的代码：
public class ImageCountValueConverter : IValueConverter{
public string ImagePath {
get;
set;
}
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
if(null == value){
return Enumerable.Empty<string>();
} else if (value is int) {
List<string> list = new List<string>();
int v = (int)value;
for (int i = 0; i < v; i++) {
if (parameter is string) {
list.Add((string)parameter);
} else {
list.Add(ImagePath);
}
}
return list;
} else {
Type t = value.GetType();
throw new NotSupportedException("The \"" + t.Name+ "\" type is not supported");
}
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
throw new NotImplementedException();
}
}
标记看起来像这样：
<StackPanel>
<ItemsControl ItemsSource="{Binding Yellow,Converter={StaticResource ImageCount_ValueConverter},ConverterParameter=/image/yellow.png}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" Stretch="None"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Red,Converter={StaticResource ImageCount_ValueConverter},ConverterParameter=/image/red.png}" >
...
声明类似于：
<Window.Resources>
<local:ImageCountValueConverter x:Key="ImageCount_ValueConverter" ImagePath="/image/sampleImage.png"/>
</Window.Resources>
选项
根据您的要求，您还可以扩展或更改它以使用 ImageSource 而不是字符串，甚至提供List<Brush> 作为输出，然后在通过绑定设置画笔的 DataTemplate 中使用形状。
【讨论】：
您可以使用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 将获得比使用图像更好的缩放行为：
<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. -->
【讨论】：