Skip to main content Skip to footer

Creating a TileView Photo Gallery

In a previous post I demonstrated how you can display photos from the server inside Silverlight and using C1CoverFlow to create an interactive photo gallery. Using C1CoverFlow gives you a familiar iTunes UI, but the one limitation is that the photos can’t be expanded (without some significant more work). In this post I’ll demonstrate how you can use the new C1TileView control to create a photo gallery with minimize/maximize functionality. In this post I’m leaving out the code which loads images from the server using an XML file, but you can take that from the previous post and apply it to this one yourself if you are interested enough. New in Studio for Silverlight and WPF 2011 v2, the C1TileView control gives you interactive data browsing capabilities. Allowing you to specify minimized and maximized item templates, users can quickly browse through items in the minimized state, and then maximize an item to view more information. Drop a C1TileView on your page, and add 8 items to the Items collection (open the Items collection editor and click ‘Add’ 8 times). Add an image path as the content and header for each C1TileViewItem, such as this:

<c1:C1TileViewItem Header="Jellyfish.jpg"  
Content="Images/Jellyfish.jpg" />

Set the MinimizedItemsPosition to Bottom and UpdateSourceCollection to False:

<c1:C1TileView Name="c1TileView1"  
MinimizedItemsPosition="Bottom" UpdateSourceCollection="False">

To the Resources, add a couple DataTemplates which define the content for each state of the TileView. In this case, we’ll use the same template for both the maximized and default states. For the minimized state, we specify the height and width.

<UserControl.Resources>  
    <DataTemplate x:Key="template">  
        <Grid>  
            <Image Source="{Binding}" />  
        </Grid>  
    </DataTemplate>  
    <DataTemplate x:Key="mintemplate">  
        <Grid Width="100" Height="75">  
            <Image Source="{Binding}" />  
        </Grid>  
    </DataTemplate>  
    <Style TargetType="c1:C1TileViewItem">  
        <Setter Property="Padding" Value="0" />  
        <Setter Property="ContentTemplateMinimized" Value="{StaticResource mintemplate}" />  
        <Setter Property="ContentTemplateMaximized" Value="{StaticResource template}" />  
        <Setter Property="ContentTemplate" Value="{StaticResource template}" />  
    </Style>  
</UserControl.Resources>

Now you have an instant, interactive photo gallery which allows users to expand images, as well as reorder. Here is the full XAML for this sample.


<UserControl x:Class="TileViewPhotos.MainPage"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
    mc:Ignorable="d"  
    d:DesignHeight="300" d:DesignWidth="400" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml">  
    <UserControl.Resources>  
        <DataTemplate x:Key="template">  
            <Grid>  
                <Image Source="{Binding}" />  
            </Grid>  
        </DataTemplate>  
        <DataTemplate x:Key="mintemplate">  
            <Grid Width="100" Height="75">  
                <Image Source="{Binding}" />  
            </Grid>  
        </DataTemplate>  
        <Style TargetType="c1:C1TileViewItem">  
            <Setter Property="Padding" Value="0" />  
            <Setter Property="ContentTemplateMinimized" Value="{StaticResource mintemplate}" />  
            <Setter Property="ContentTemplateMaximized" Value="{StaticResource template}" />  
            <Setter Property="ContentTemplate" Value="{StaticResource template}" />  
        </Style>  
    </UserControl.Resources>  
    <Grid x:Name="LayoutRoot" Background="White">  
        <c1:C1TileView Name="c1TileView1" MinimizedItemsPosition="Bottom" UpdateSourceCollection="False">  
            <c1:C1TileViewItem Header="Chrysanthemum.jpg" Content="Images/Chrysanthemum.jpg" />  
            <c1:C1TileViewItem Header="Desert.jpg" Content="Images/Desert.jpg" />  
            <c1:C1TileViewItem Header="Hydrangeas.jpg" Content="Images/Hydrangeas.jpg" />  
            <c1:C1TileViewItem Header="Jellyfish.jpg" Content="Images/Jellyfish.jpg" />  
            <c1:C1TileViewItem Header="Koala.jpg" Content="Images/Koala.jpg" />  
            <c1:C1TileViewItem Header="Lighthouse.jpg" Content="Images/Lighthouse.jpg" />  
            <c1:C1TileViewItem Header="Penguins.jpg" Content="Images/Penguins.jpg" />  
            <c1:C1TileViewItem Header="Tulips.jpg" Content="Images/Tulips.jpg" />         
        </c1:C1TileView>  
    </Grid>  
</UserControl>  

ComponentOne Product Manager Greg Lutz

Greg Lutz

comments powered by Disqus