CODEWITHSUNDEEP
wpfmvvm
Jannik
Jannik

Reputation: 2429

Dynamically show a different amount (0-10) BitmapImages on a View

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

Upvotes: 0

Views: 46

Answers (1)

Josh
Josh

Reputation: 10614

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.

Upvotes: 2

Related Questions