locked
How to show listbox selected items in uniformGrid (Data Binding) RRS feed

  • Question

  • Hi,

    I have some problem about items(e.g. images) selected on my listbox (SelectionMode=Multiple) to show/display on my uniformGrid.

    I successfully bind it to my uniformGrid BUT only 1 item(image) is displayed  even if I selected more than 1 item. Is it possible to bind the selected items(listBox) to uniformGrid?

    or are there any other ways to accomplish this?

    I am using expression blend and VS 2010.

     


    Rafee Nat


    • Edited by RafeeNat Friday, December 2, 2011 6:15 PM
    Friday, December 2, 2011 5:57 PM

All replies

  • Could you post the xaml you are using?
    Friday, December 2, 2011 7:32 PM
    Moderator
  • Hi Chuck,

    This is only my sample just to be concise.

    ListBox = main source
    UniformGrid=displays/fill the selected items from ListBox (2 rows and 2 columns)

    Here's the xaml:

    <Window
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"

    x:Class="SampleBinding.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">


    <Window.Resources>

    <DataTemplate x:Key="ItemTemplate">

    <StackPanel>

    <Image Source="{Binding myImages}" HorizontalAlignment="Left" Height="64" Width="64"/>

    </StackPanel>

    </DataTemplate>

    </Window.Resources>

     

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">

    <ListBox x:Name="listBox" HorizontalAlignment="Left" ItemTemplate="{DynamicResource ItemTemplate}" ItemsSource="{Binding Collection}" Margin="23,21,0,57" Width="200" SelectionMode="Multiple"/>

    <UniformGrid DataContext="{Binding SelectedItem, ElementName=listBox}" Margin="253,36,68,145" d:DataContext="{Binding Collection[0]}" Grid.Row="2" Grid.Column="2" Background="#FF9F9C9C">

    <Image Source="{Binding myImages}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Height="100"/>

    </UniformGrid>

    </Grid>

     

    </Window> 

    All I want is just to fill-in the UniformGrid from my items selected.

     

    Thanks


    Rafee Nat
    • Edited by RafeeNat Saturday, December 3, 2011 5:49 AM
    Saturday, December 3, 2011 5:48 AM
  • What you will want to do is replace your UniformGrid with a ListBox (or ItemsControl) and change it's panel template to a UniformGrid. The ItemsControl/ListBox will give you the functionality you need to databind to the selected items in the other ListBox. Here is a quick example I put together that uses a sample data source, with Property2 as the ImageSource property.

     

    You can edit the panel template by right clicking the ListBox, edit additional templates -> items panel -> replace the StackPanel with a UniformGrid.

     

     

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="WpfApplication22.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    	<Window.Resources>
    		<DataTemplate x:Key="ItemTemplate">
    			<StackPanel>
    				<TextBlock Text="{Binding Property1}"/>
    				<Image Source="{Binding Property2}" HorizontalAlignment="Left" Height="64" Width="64"/>
    			</StackPanel>
    		</DataTemplate>
    		<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
    			<UniformGrid IsItemsHost="True">
    				
    			</UniformGrid>
    		</ItemsPanelTemplate>
    		<DataTemplate x:Key="DataTemplate1">
    			<Grid>
    				<Image Source="{Binding Property2}" Width="100" Height="100"/>
    			</Grid>
    		</DataTemplate>
    	</Window.Resources>
    
    	<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    		<ListBox x:Name="Main" HorizontalAlignment="Left" ItemTemplate="{DynamicResource ItemTemplate}" ItemsSource="{Binding Collection}" Margin="21,47,0,95" Width="200" SelectionMode="Multiple"/>
    		<ListBox Margin="225,47,36,107" ItemsSource="{Binding SelectedItems, ElementName=Main}" ItemsPanel="{DynamicResource ItemsPanelTemplate1}" ItemTemplate="{DynamicResource DataTemplate1}"/>
    	</Grid>
    </Window>
    


    Monday, December 5, 2011 5:25 PM
    Moderator