使用 ItemsControl 绑定对象数组

Question

我需要将对象数组Image绑定到 WrapPanel。

我在主类构造函数中声明了对象：

public MainWindow()
{
    InitializeComponent();
    private Masina[] _masina = new Masina[12];
    DataContext = new
    {
        data1 = _masina
    };
}

我的类Masina里面有几个变量，但我想绑定Image：

public class Masina
{
    public Image masina_pav = new Image();
    public bool r_mas;   
    public string s_mas;
    public Masina()
    {
        byte[] buffer = File.ReadAllBytes("teksturos/masinos/red/top.png");
        MemoryStream memoryStream = new MemoryStream(buffer);
        BitmapImage bitmap = new BitmapImage();
        bitmap.BeginInit();
        bitmap.DecodePixelWidth = 100;
        bitmap.DecodePixelHeight = 200;
        bitmap.StreamSource = memoryStream;
        bitmap.EndInit();
        bitmap.Freeze();
        masina_pav.Source = bitmap;
        Canvas.SetLeft(masina_pav, 100);
        Canvas.SetTop(masina_pav, 200);
    }
}

我试过这个 XAML 代码：

<WrapPanel Name="zem" Height="1000" Width="1108" >
      <ItemsControl ItemsSource="{Binding data1}" DisplayMemberPath="masina_pav">
          <ItemsControl.ItemsPanel>
              <ItemsPanelTemplate>
                  <WrapPanel Name="masinu_sarasas" HorizontalAlignment="Center" IsItemsHost="True" />
              </ItemsPanelTemplate>
          </ItemsControl.ItemsPanel>
      </ItemsControl>
 </WrapPanel >

现在程序开始了，但没有向我显示任何Image（应该是其中的 12 个）。有人可以帮我弄清楚吗？

Answer 1

Image是一个视图类，不应在视图模型中使用。相反，您的类应提供类型 ImageSource 的公共属性。请注意，它是一个属性，而不是您声明的字段。这是必需的，因为 WPF 数据绑定仅适用于公共属性。

public class Masina
{
    public ImageSource MasinaPav { get; private set; }
    ...
    public Masina()
    {
        using (var fileStream = new FileStream(
            "teksturos/masinos/red/top.png",
            FileMode.Open, FileAccess.Read, FileShare.Read))
        {
            var bitmap = new BitmapImage();
            bitmap.BeginInit();
            bitmap.DecodePixelWidth = 100;
            bitmap.DecodePixelHeight = 200;
            bitmap.StreamSource = fileStream;
            bitmap.EndInit();
            bitmap.Freeze();
            MasinaPav = bitmap;
        }
    }
}

现在，您的 ItemsControl 将具有一个ItemTemplate，其中包含绑定到视图模型属性的 Image 控件：

<ItemsControl ItemsSource="{Binding data1}">
     ...
     <ItemsControl.ItemTemplate>
          <DataTemplate>
              <Image Source="{Binding MasinaPav}"/>
          </DataTemplate>
     </ItemsControl.ItemTemplate>
</ItemsControl>

---

除此之外，您应该小心同时设置 BitmapImage 的DecodePixelWidth和DecodePixelHeight，因为它可能会破坏位图的纵横比。