Send comments on this topic. | Back to Introduction - All Topics | Help Version 17.0.8.10
Link an Image List to an Image Viewer Using Microsoft Expression Blend
See Also

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

  1. Create an Image List. Make your project Name and Window Title "MyList." (Be sure to set it up to use LEADTOOLS WPF controls.)
  2. Add an Image Viewer. For stepwise instructions, see: Displaying an Image Using Expression Blend. Do not designate the image Source yet.
  3. 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


      • Data Binding Dialog

    • Click Finish to close.
  4. 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:

    Image List Linked to Image 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:/Program Files/LEAD Technologies/LEADTOOLS 15/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:/Program Files/LEAD Technologies/LEADTOOLS 15/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:/Program Files/LEAD Technologies/LEADTOOLS 15/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:/Program Files/LEAD Technologies/LEADTOOLS 15/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:/Program Files/LEAD Technologies/LEADTOOLS 15/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>

See Also