How to fill the grid/panel with the selected images from ListBox multiple selection

[rafeenatnat]

Hi,
I can only bind 1 item even if I selected more than 1 item from my ListBox. Every time I select another item, my uniformGrid(grid to display selected items) will only display the first selection not the other selected items.

My uniformGrid has 2 rows and 2 columns. I just want to fill them with my selected items(i.e. image) from my ListBox.
Problem Summary:
I just like to know how to fill any grid/uniformGrid/Stackpanel or whatever it takes to fill those item(i.e. image) selected from my listbox (SelectionMode=Multiple).

Thank You

[Frinavale]

Since you are binding to more than one thing, you should use a control whose purpose is to display more than one thing....like an ItemsControl

You can then set ItemsPanel property for that control to use the UniformGrid.

The following is a working example of what I'm talking about.
The array of strings are paths to the default sample images that come with Windows 7. If you aren't using Windows 7, then modify the paths to point to existing images.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.Resources>
        <x:Array x:Key="ImagePaths" Type="sys:String" 
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:sys="clr-namespace:System;assembly=mscorlib">
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg</sys:String>
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Desert.jpg</sys:String>
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Hydrangeas.jpg</sys:String>
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Jellyfish.jpg</sys:String>
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Koala.jpg</sys:String>
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Lighthouse.jpg</sys:String>
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg</sys:String>
            <sys:String>C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg</sys:String>
        </x:Array>
    </Grid.Resources>
    <ListBox x:Name="ImageList" 
                 SelectionMode="Multiple" 
                 Grid.Row="0" Grid.Column="0" 
                 ItemsSource="{StaticResource ImagePaths}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}" Width="70"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <ItemsControl ItemsSource="{Binding ElementName=ImageList, Path=SelectedItems}"  Grid.Row="0" Grid.Column="1">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Background="Cornsilk" Columns="2" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Center" VerticalAlignment="Top" Margin="1">
                    <Border Opacity=".2" Background="Black" BorderBrush="Black" BorderThickness="5" CornerRadius="5"></Border>
                    <Image Source="{Binding}" Margin="5" />
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

-Frinny