×
Namespaces

Variants
Actions
(Difference between revisions)

Image scrolling synced with large text scrolling

From Nokia Developer Wiki
Jump to: navigation, search
Depechie (Talk | contribs)
(Depechie -)
Depechie (Talk | contribs)
(Depechie -)
Line 5: Line 5:
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.wgt]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.wgt]]) -->
|devices= <!-- Devices tested against - e.g. Nokia Lumia 928, Nokia Asha 501) -->
+
|devices= Nokia Lumia 820
|sdk= <!-- SDK(s) built and tested against (e.g. Windows Phone 8.0 SDK) -->
+
|sdk= Windows Phone 8.0 SDK
 
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
 
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
 
|signing=<!-- Special Signing requirements -->
 
|signing=<!-- Special Signing requirements -->
Line 18: Line 18:
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate= <!-- Format YYYYMMDD -->
+
|creationdate= 20131006
 
|author= [[User:Depechie]]
 
|author= [[User:Depechie]]
 
}}
 
}}
Line 36: Line 36:
 
== Summary ==
 
== 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 {{Icode|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 {{Icode|ContentPanel}}.
  
+
<code xml>
''Remove Category:Draft when the page is complete or near complete''
+
<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"
''The "platform categories" will be displayed here in '''preview''' only - Copy paste relevant categories into text here''
+
                        Grid.Row="1"
{{VersionHint}}
+
                        Margin="0,12,0,12"
 
+
                        VerticalAlignment="Top"
''Add categories below using category selector. ''
+
                        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>
 +
</code>

Revision as of 22:44, 6 October 2013

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>
130 page views in the last 30 days.
×