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 />
</ScrollViewer>

You can see the live example here [live demo]

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

MainPage.xaml

<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}”>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Border HorizontalAlignment=”Center” VerticalAlignment=”Center”
            BorderBrush=”White” BorderThickness=”4″ CornerRadius=”0.5″
            Cursor=”Hand”
            RenderTransformOrigin=”0.5,0.5″>
                            <Border.RenderTransform>
                                <ScaleTransform />
                            </Border.RenderTransform>
                            <fxui:Interaction.Behaviors>
                                <fxui:HoverEffect>
                                    <fxeffects:Resize ScaleXRatio=”1.3″ ScaleYRatio=”1.3″ Duration=”0:0:.25″ />
                                fxui:HoverEffect>
                            fxui:Interaction.Behaviors>
                            <Grid>
                                <Image Source=”{Binding Logo}” Width=”85″ Height=”85″ />
                            </Grid>
                        </Border>
                    </DataTemplate>
                </ListBox.ItemTemplate>
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <fxui:TilePanel TileHeight=”110″ TileWidth=”110″
            UseAnimatedLayout=”True” />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>
        </Border>
        <HyperlinkButton Content=”Samples from http://silverlightips.net by Sharker Khaleed Mahmud” NavigateUri=”http://silverlightips.net” Foreground=”White” VerticalAlignment=”Top” HorizontalAlignment=”Center” IsTabStop=”False”/>
    </Grid>

MainPage.xaml.cs

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

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

Sharker Khaleed Mahmud
Web Developer

Advertisements

6 Comments »

  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 gsrini99@gmail.com.I 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:

WordPress.com Logo

You are commenting using your WordPress.com 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 WordPress.com.

%d bloggers like this: