locked
Show selected ListItem in TextBlock RRS feed

  • Question

  • Hello,

    In my Silverlight project I have a Sample Data source with 2 properties: an image and a description (string).

    I've made a ListBox containing a Stack of photos (so just showing the images from the Sample Data). I would like to show the description of the selected photo in a separate TextBlock.

    I tried to do data binding to the SelectedItem of the ListBox but then (I think) I need to write a IValueConverter to convert the selectedItem to a string. But where is the reference to the Sample Data? I think this is not the right approach.

    Perhaps there is another (better) way.

    Anyone?

     

    Tuesday, May 4, 2010 7:19 AM

Answers

  • Here are the steps to get what you want, or at least an example that shows how to do it.  The steps below produced the xaml you see pasted aftward.

     

    1. Create a new sample data source, make it have 2 properties, 1 an image, and the other a text description, named Picture and Description
    2. Drag the collection to the artboard, this creates a listbox displaying both items
    3. Right click the listbox, select edit additional templates -> itemtemplate -> edit current
    4. Select the textbox and delete it, now it should show only the image in the listbox
    5. Exit template editing mode by clicking on "listbox" in the breadcrumb bar (under the file tabs)
    6. Hold down the alt key, and drag from the "decription" property in the sample data panel out to the artboard, the cursor should indicate you are going to create a details view, drop it.
    7. Repeat for the Picture property.
    8. I also did a small bit of formatting below, but the data binding is the important part.

    In this case, the datacontext of the containing grid is set to the selected item in the listbox, and then each item within the grid is databound to the appropriate property.

     

    <UserControl
    	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"
    	x:Class="SilverlightApplication42.MainPage"
    	Width="640" Height="480" mc:Ignorable="d">
    
    	<UserControl.Resources>
    		<DataTemplate x:Key="ItemTemplate">
    			<StackPanel>
    				<Image Source="{Binding Picture}" HorizontalAlignment="Left" Height="64" Width="64"/>
    			</StackPanel>
    		</DataTemplate>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    		<ListBox x:Name="listBox" HorizontalAlignment="Left" Margin="8,8,0,100" Width="162" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}"/>
    		<Grid DataContext="{Binding SelectedItem, ElementName=listBox}" Margin="204,0,65,49" d:DataContext="{Binding Collection[0]}" Height="123" VerticalAlignment="Bottom">
    			<TextBlock Text="{Binding Description}" Margin="0" FontFamily="Segoe UI Light" FontWeight="Bold" FontSize="18.667"/>
    		</Grid>
    		<Grid DataContext="{Binding SelectedItem, ElementName=listBox}" Margin="269,37,54,189" d:DataContext="{Binding Collection[0]}">
    			<Image Source="{Binding Picture}"/>
    		</Grid>
    	</Grid>
    </UserControl>

     

    Tuesday, May 4, 2010 2:20 PM
    Moderator

All replies

  • Here are the steps to get what you want, or at least an example that shows how to do it.  The steps below produced the xaml you see pasted aftward.

     

    1. Create a new sample data source, make it have 2 properties, 1 an image, and the other a text description, named Picture and Description
    2. Drag the collection to the artboard, this creates a listbox displaying both items
    3. Right click the listbox, select edit additional templates -> itemtemplate -> edit current
    4. Select the textbox and delete it, now it should show only the image in the listbox
    5. Exit template editing mode by clicking on "listbox" in the breadcrumb bar (under the file tabs)
    6. Hold down the alt key, and drag from the "decription" property in the sample data panel out to the artboard, the cursor should indicate you are going to create a details view, drop it.
    7. Repeat for the Picture property.
    8. I also did a small bit of formatting below, but the data binding is the important part.

    In this case, the datacontext of the containing grid is set to the selected item in the listbox, and then each item within the grid is databound to the appropriate property.

     

    <UserControl
    	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"
    	x:Class="SilverlightApplication42.MainPage"
    	Width="640" Height="480" mc:Ignorable="d">
    
    	<UserControl.Resources>
    		<DataTemplate x:Key="ItemTemplate">
    			<StackPanel>
    				<Image Source="{Binding Picture}" HorizontalAlignment="Left" Height="64" Width="64"/>
    			</StackPanel>
    		</DataTemplate>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    		<ListBox x:Name="listBox" HorizontalAlignment="Left" Margin="8,8,0,100" Width="162" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}"/>
    		<Grid DataContext="{Binding SelectedItem, ElementName=listBox}" Margin="204,0,65,49" d:DataContext="{Binding Collection[0]}" Height="123" VerticalAlignment="Bottom">
    			<TextBlock Text="{Binding Description}" Margin="0" FontFamily="Segoe UI Light" FontWeight="Bold" FontSize="18.667"/>
    		</Grid>
    		<Grid DataContext="{Binding SelectedItem, ElementName=listBox}" Margin="269,37,54,189" d:DataContext="{Binding Collection[0]}">
    			<Image Source="{Binding Picture}"/>
    		</Grid>
    	</Grid>
    </UserControl>

     

    Tuesday, May 4, 2010 2:20 PM
    Moderator
  • Thanks a lot!

    I see the TextBlock needs a container (Grid) with the proper DataContext (in this case to the SelectedItem of the Listbox). Then if I make a data binding to the Description I get the description of the selected item.

    [edit] Well in fact, the TextBlock needs a proper DataContext. There is no actual need for a (Grid) container required.

    Wednesday, May 5, 2010 6:04 AM
  • You could also try the following binding for your TextBlock:

    <TextBlock Text="{Binding ElementName=listBox, Path=SelectedItem.Description}" />

    You shouldn't have to explicity set the DataContext of the TextBlock.

    Wednesday, May 5, 2010 8:06 PM
  • Yep, the grid is optional and just how Blend generates it, you can set the DataContext directly on the TextBlock, or higher up  in the tree, as DataContext is inherited from the parent.
    Wednesday, May 5, 2010 8:32 PM
    Moderator