Link an Image List to an Image Viewer Using Microsoft Expression Blend

Take the following steps in Microsoft Expression Blend to link an image list to an image viewer, using LEADTOOLS ImageList and ImageListItem controls.

Create an Image List. Make your project Name and Window Title "MyList." (Be sure to set it up to use LEADTOOLS WPF controls.)
Add an Image Viewer. For stepwise instructions, see: Displaying an Image Using Expression Blend. Do not designate the image Source yet.
On the Properties tab, under Common Properties, to the right of the Source field, click the Advanced Properties button, then select Data Binding from the pop-up list.
- In the Create Data Binding dialog, select Element Property, then under Scene elements, expand the tree until you can select ImageList
- Click the Use custom path expression checkbox, then type SelectedItem.Image
- Click Finish to close.
Press F5 to build your application. This will take a few seconds. When it is done, click any image in the list to display it in the viewer:

Example

[Window1.xaml]

<Window 
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
 xmlns:Leadtools_Windows_Controls="clr-namespace:Leadtools.Windows.Controls;assembly=Leadtools.Windows.Controls" 
 x:Class="MyList.Window1" 
 x:Name="Window" 
 Title="Window" 
 Width="640" Height="480"> 
              
 <Grid x:Name="LayoutRoot"> 
  <Leadtools_Windows_Controls:ImageList HorizontalAlignment="Left" Margin="8,0,0,8" VerticalAlignment="Center" Width="150" IsSynchronizedWithCurrentItem="True" ScrollStyle="Vertical" ViewStyle="Explorer" x:Name="_imageList"> 
   <Leadtools_Windows_Controls:ImageListItem Width="131" Content="ImageListItem" x:Name="_imageListItem1"> 
    <Leadtools_Windows_Controls:ImageListItem.Image> 
     <BitmapImage UriSource="file:///C:/users/Public/Documents/LEADTOOLS Images/ImageProcessingDemo/NaturalFruits.jpg"/> 
    </Leadtools_Windows_Controls:ImageListItem.Image> 
   </Leadtools_Windows_Controls:ImageListItem> 
   <Leadtools_Windows_Controls:ImageListItem Width="127" Height="96" Content="ImageListItem" x:Name="_imageListItem2"> 
    <Leadtools_Windows_Controls:ImageListItem.Image> 
     <BitmapImage UriSource="file:///C:/users/Public/Documents/LEADTOOLS Images/ScarletMaCaws.jpg"/> 
    </Leadtools_Windows_Controls:ImageListItem.Image> 
   </Leadtools_Windows_Controls:ImageListItem> 
   <Leadtools_Windows_Controls:ImageListItem Width="124" Height="107" Content="ImageListItem" x:Name="_imageListItem3"> 
    <Leadtools_Windows_Controls:ImageListItem.Image> 
     <BitmapImage UriSource="file:///C:/users/Public/Documents/LEADTOOLS Images/eye.gif"/> 
    </Leadtools_Windows_Controls:ImageListItem.Image> 
   </Leadtools_Windows_Controls:ImageListItem> 
   <Leadtools_Windows_Controls:ImageListItem Width="115" Height="120" Content="ImageListItem" x:Name="_imageListItem4"> 
    <Leadtools_Windows_Controls:ImageListItem.Image> 
     <BitmapImage UriSource="file:///C:/users/Public/Documents/LEADTOOLS Images/Butterfly.jpg"/> 
    </Leadtools_Windows_Controls:ImageListItem.Image> 
   </Leadtools_Windows_Controls:ImageListItem> 
  </Leadtools_Windows_Controls:ImageList> 
               
  <!-- add code from Displaying Images project--> 
  <Leadtools_Windows_Controls:ImageViewer x:Name="Frame" Width="Auto" Height="Auto" SizeMode="Fit" Margin="173,29,14,53"> 
   <Leadtools_Windows_Controls:ImageViewer.Source> 
    <BitmapImage UriSource="file:///C:/users/Public/Documents/LEADTOOLS Images/TestFrame1.jpg"/> 
   </Leadtools_Windows_Controls:ImageViewer.Source> 
   <Leadtools_Windows_Controls:ImageViewer x:Name="Picture" Width="302" Height="235.5" Content="" SizeMode="Stretch" Source="{Binding Path=SelectedItem.Image, ElementName=_imageList, Mode=Default}"/> 
  </Leadtools_Windows_Controls:ImageViewer> 
              
               
 </Grid> 
</Window>