Sharker Khaleed Mahmud Silverlight Tips & Tricks

July 10, 2010

75. Visual Zooming Datalist using ListBox in Silverlight

Filed under: Silverlight — Tags: , , , , — Sharker Khaleed Mahmud | shamrat231 @ 10:14 AM

[tweetmeme source=”shamrat231” only_single=false]In this entry, I am going to view a collection of data to represent like datalist using ListBox. Afterwards, add some simple interactive behaviours. In this case for the interactive zooming part, I will use Nikhilk’s Silverlight FX behaviours. You can just add your own sets of collection to this sample. This kind of representation seems to be very popular. Populated with images i found on search engine.

If you want to add scrollviewer you have to add it like this.

<ScrollViewer Width=”705″ Height=”540″ BorderThickness=”0″>
<ListBox />

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.


<Grid x:Name=”LayoutRoot” Background=”Gray” >
        <Border x:Name=”ContentBorder” Width=”960″ Height=”600″ Background=”White” BorderThickness=”1″ CornerRadius=”10″ BorderBrush=”White”>
            <ListBox x:Name=”LogoHost”  Style=”{StaticResource AutoWrap}”>
                        <Border HorizontalAlignment=”Center” VerticalAlignment=”Center”
            BorderBrush=”White” BorderThickness=”4″ CornerRadius=”0.5″
                                <ScaleTransform />
                                    <fxeffects:Resize ScaleXRatio=”1.3″ ScaleYRatio=”1.3″ Duration=”0:0:.25″ />
                                <Image Source=”{Binding Logo}” Width=”85″ Height=”85″ />
                        <fxui:TilePanel TileHeight=”110″ TileWidth=”110″
            UseAnimatedLayout=”True” />
        <HyperlinkButton Content=”Samples from by Sharker Khaleed Mahmud” NavigateUri=”” Foreground=”White” VerticalAlignment=”Top” HorizontalAlignment=”Center” IsTabStop=”False”/>


    //System.Windows.Control.Toolkit from Silverlight Toolkit
    //Silverlight FX from Tips.Web\SilverlightFXDLL
    public partial class MainPage : UserControl
        public MainPage()
            this.LogoHost.ItemsSource = CompanyInfo.GetLogoSet();

As always, you can download the source code from here [download link

Sharker Khaleed Mahmud
Web Developer



  1. For some reason, it’s a bit shaky as you approach the items near the edge.

    Comment by Fallon Massey — July 24, 2010 @ 9:20 PM

  2. Hi Khaleed,

    I am new to the silverlight,i have the requirement just like your Visual Zooming Datalist using Listbox in Silverlight.I am trying to download the code,but i am unable to download.can you please send me the copy of the code to my personal email i.e am badly in need of that help.Your help will be appreciated.

    Comment by Sree — August 31, 2010 @ 4:44 AM

  3. Hi Sharker Khaleed Mahmud also I am new to the silverlight, I want to make like this but there is some problem which I dont know. I add this code in my SL web aplication and Fx referance and other dll. it isnt appear.

    Comment by Orhan — December 19, 2010 @ 11:04 AM

  4. I really enjoy the fact that writers are sharing their thoughts and opinions on things. I really like your style man

    Comment by floor and decor — May 11, 2011 @ 2:00 PM

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at

%d bloggers like this: