0

I have a small problem designing problem:

My card tool should display 0-10 images on my view.

Sometime just three, sometimes six, sometimes all ten...

Due to MVVM I don't want to just Controls.Add() the images to the grids/controls content.

What is a good approach to this? One way would be having ten bitmap variables, but is there another better way?

Edit:\

I tried it like that:

<ItemsControl ItemsSource="{Binding CardImages}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"></WrapPanel>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" Stretch="Uniform" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

But its not working as it should.

I have SIX pictures, but the rest of the pictures arent visibilty (out of sigth). I want to show all of the pictures, so the 3 have to be about 50 % smaller in height and the other three atm not visible pictures should be shown under the shown three pictures. Hope thats clear.

How to solve that? I tried ScrollViewers, ViewBoxes and some different kind of templates / panels, but had no sucess. :(

Jannik
  • 2,310
  • 6
  • 32
  • 61

1 Answers1

2

I would bind an ItemsControl to a public observable collection property that contains your image sources / locations / however you reference them on your view model and then template the items to display images. 

<ItemsControl Binding="{Binding MyPublicProperty}">
    <ItemsControl.ItemTemplate>
         <Image Source="{Binding Source={StaticResource MyImage}, Path=Source}"/>
    </ItemsControl.ItemTemplate>
</ItemsControl>

See this SO question for binding the image.

Community
  • 1
  • 1
Josh
  • 10,352
  • 12
  • 58
  • 109
  • Thank you for the answer. Can the ItemControl.Orientation be changed? Is it possible to make a new line after every 5 images? Guess a style is needed, isnt it? – Jannik Feb 05 '14 at 15:29
  • @Jannik See http://stackoverflow.com/questions/1052342/itemscontrol-with-horizontal-orientation for orientation. As far as breaking on five, you'll definitely want to start looking at styles. – Josh Feb 05 '14 at 15:32
  • To make the images wrap, consider using a `WrapPanel` instead of a `StackPanel` in the `ItemsPanelTemplate`. It won't let you set the number of items after which to wrap, but you could set a max width on the panel and images to get that behavior. – Mike Strobel Feb 05 '14 at 15:33
  • Thank you both. Appreciate it. @Mike: Good hint. I will test that out tommorow, when I am going to get back to work. :) – Jannik Feb 05 '14 at 20:06
  • Please review my updated start post. I have an upfollowing problem stated there. – Jannik Feb 06 '14 at 11:54
  • @Jannik You didn't set a max width on the wrap panel. Have you tried adding it? – Josh Feb 06 '14 at 14:27