Get Microsoft Silverlight

Wednesday, September 15, 2010

An easy Windows Phone 7 Photo Viewer using Pivot control #WP7 Tip

Technorati Tags: ,,,

photoviewer  Source Code

Here is a small trick using the Pivot control for a Photo viewing experience. Imagine a Pivot control with out any header and the image as Pivot items. Yes it is that easy :). Since the Pivot supports for the Phone orientation you can enjoy the picture viewing both in Portrait and Landscape. I am giving step by step info if you are totally new to WP7 and XAML styling.

And please note that the performance wont be that great if you have many images in the Pivot control. So you may need to do design that around or use some tricks to clean up the memory well.

1) Place a Pivot control and override the Style. What we wanted is to take out all the Header Templates and other extra puddings.

        <Style x:Key="emptyPivot" TargetType="controls:Pivot">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="controls:Pivot">
                        <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                            <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

2) Override the ItemContainerStyle and place Image control for displaying Photo.

      <Style x:Key="PhotoVieweritemStyle" TargetType="controls:PivotItem">           
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="controls:PivotItem">
                     <Image Source="{Binding}"/>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>

3) Add ItemsSource Binding to the Pivot control with your Photo Collection.

        <controls:Pivot
             ItemsSource="{Binding YourImageCollection}"
             Style="{StaticResource emptyPivot}"
             ItemContainerStyle="{StaticResource PhotoVieweritemStyle}" />    

 

Happy WP7 Coding!!!