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

12 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)

gwath 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

sam said...

very nice thanks.

sam said...

very nice thanks

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 .

Jobi Joy said...

There is no dependencies.

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

martin.suchan@email.cz said...

Interesting, on WP8 if you use this, the app will crash without any exception or event.

Anonymous said...

PivotGrid control for Windows Forms

Anonymous said...

i need this source code
so please, could you upload it again

Melisa Marzett 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