Binding array of objects using ItemsControl

Question

I need to bind array of object Images to WrapPanel.

I have declared objects in main class constructor:

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

My Class Masina haves few variables inside it, but I want to bind just 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);
    }
}

I have tried this XAML code:

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

For now program starts but don't show me any Image (should be 12 of them). Can someone help me to figure it out ?

Does it show the image class name?

wingerse
– wingerse

2016-04-22 21:29:41 +00:00
Commented Apr 22, 2016 at 21:29 — wingerse
– wingerse, Commented Apr 22, 2016 at 21:29
You are using fields, use properties.

Wobbles
– Wobbles

2016-04-22 22:51:46 +00:00
Commented Apr 22, 2016 at 22:51 — Wobbles
– Wobbles, Commented Apr 22, 2016 at 22:51

Clemens · Accepted Answer · 2016-04-23 06:42:38Z

Image is a view class that should not be used in view models. Instead, your class should provide a public property of type ImageSource. Note that it's a property, not a field as you had declared it. This is necessary because WPF data binding only works with public properties.

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

Now your ItemsControl would have an ItemTemplate with an Image control that is bound to the view model property:

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

Besides that, you should be careful with setting a BitmapImage's DecodePixelWidth and DecodePixelHeight at the same time, because it may spoil the bitmap's aspect ratio.

Collectives™ on Stack Overflow

Binding array of objects using ItemsControl

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related