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!!!

Comments

Morten said…
Neat trick. But what if I also want to enable pinch-zooming and pan around when zoomed in? (ie only allow to pivot to other element and vertical scroll when zoomed out)
trailynx said…
Hi Morten,

you could disable the pivot when zoomed in.
could look something like this:

private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
if (((CompositeTransform)((Image)sender).RenderTransform).ScaleX <= 1.1)
{
return;
}
pvtImages.IsEnabled = false;
// DO INTERACTION/PANNING HERE
}

and enable it again when drag completes:

private void OnDragCompleted(object sender, DragCompletedGestureEventArgs e)
{
pvtImages.IsEnabled = true;
}

that's how i accomplished this, hope it helps :)

Josch
Anonymous said…
Is there any dependency of this control? because i have implemented the same as you said but images is not showing and not getting any error .
winphoneDev said…
I am using a ObservableCollection to bind to the Image Control. But its not updating in UI when image Item is Changed.
Please suggest how to update the Image control in UI.

Thankyou.
Anonymous said…
not working link...
Anonymous said…
Interesting, on WP8 if you use this, the app will crash without any exception or event.
Anonymous said…
i need this source code
so please, could you upload it again
Unknown said…
Thanks a lot for this tricky hint, I will bookmark your blog entry. Hope you will be keeping up the excellent work. Can you also provide a source code if you get the chance? Thanks in advance! Keep in touch, our paper writing services online

Popular posts from this blog

Time Picker User Control

A simple Multiselect ComboBox using expression Blend

A Simple Radial Panel for WPF and SilverLight