An easy Windows Phone 7 Photo Viewer using Pivot control #WP7 Tip
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
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
Please suggest how to update the Image control in UI.
Thankyou.
so please, could you upload it again