×
Namespaces

Variants
Actions
Revision as of 22:44, 6 October 2013 by Depechie (Talk | contribs)

Image scrolling synced with large text scrolling

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to auto scroll a large image in sync with a large text

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata
Tested with
SDK: Windows Phone 8.0 SDK
Devices(s): Nokia Lumia 820
Compatibility
Platform(s):
Windows Phone 8
Article
Created: Depechie (06 Oct 2013)
Last edited: Depechie (06 Oct 2013)

Introduction

Sometimes you have a page that will contain a lot of text, but with that text there is also an accompanying image. Putting the image in full height on that page won't give us the needed space for showing enough readable text. So to solve this we will cut off the image height and let it scroll into view while the user is scrolling the readable text.

It's a small image parallax effect, but the scroll offset is kept in sync with the text.

Summary

To keep enough text readable for the user, we tend to keep our image height low, but this could be a problem with larger images. So to allow the user to view the full image, we track the ScrollViewer of the text part and slide the image into view accordingly! The layout of such a page is very simple, you'll only need an image and some text and we put this inside the ContentPanel.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" LayoutUpdated="ContentPanel_OnLayoutUpdated">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ItemsControl Name="ImageControl" Height="175" Grid.Row="0">
<Image Source="{Binding Image}" Name="Image">
<Image.RenderTransform>
<CompositeTransform x:Name="ImageCompositeTransform" TranslateY="{Binding ElementName=ScrollViewer, Path=VerticalOffset, Converter={StaticResource ScrollViewerOffsetConverter}, ConverterParameter='inverse'}" />
</Image.RenderTransform>
</Image>
</ItemsControl>
 
<ScrollViewer Name="ScrollViewer"
Grid.Row="1"
Margin="0,12,0,12"
VerticalAlignment="Top"
VerticalScrollBarVisibility="Visible"
ManipulationMode="Control"
Style="{StaticResource ScrollViewerStyle}">
<RichTextBox Name="Article">
<Paragraph>
<Run FontWeight="Bold" FontSize="22" Text="{Binding Title}" />
</Paragraph>
<Paragraph>
<LineBreak />
<Run Text="{Binding Body}" />
</Paragraph>
</RichTextBox>
</ScrollViewer>
</Grid>
</Grid>
83 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×