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.

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
   • 
     
     

     

   • 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:
   
   

   

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>
            

See Also

Programming Reference

Adding LEADTOOLS Controls to Microsoft Expression Blend
Display Images Using Expression Blend
Creating Image Lists Using Expression Blend
Link an Image List to an Image Viewer Using Expression Blend
Add a Magnifying Glass Using Expression Blend
Adding Bitmap Effects Using Expression Blend
Working with Images Using Visual Studio
Loading an Image File Using WIC
Saving an Image File Using WIC
Loading and Saving Images with the LEADTOOLS RasterImageViewer

 

 

---

Products | Support | Contact Us | Copyright Notices

© 2006-2012 All Rights Reserved. LEAD Technologies, Inc.