Fixed background in a scrollviewer Windows Metro (not parallaxing)

Question

I am trying to add a texture as a background to a scrollviewer. I want the background to move with the content, but I want it fiexd. Not using the parallax effect...

So far what I've got is:

   <!-- Background -->
   <Canvas ZIndex="-1" x:Name="backgroundCanvas">
   </Canvas>

       <ScrollViewer
            x:Name="myGridScrollViewer"
            AutomationProperties.AutomationId="GridScrollViewer"
            Grid.Row="1"
            Margin="0,-4,0,0"
            Style="{StaticResource HorizontalScrollViewerStyle}">
            <StackPanel Orientation="Horizontal">
                <StackPanel Margin="116,4,0,0" Orientation="Horizontal" Height="586" VerticalAlignment="Top">
                    <Border x:Name="HeroImage" VerticalAlignment="Top"  Width="700" Height="550" Background="Yellow" Margin="0,0,15,0" ></Border>
                    <Border VerticalAlignment="Top"  Width="350" Height="400" Background="White" Margin="0" ></Border>
                </StackPanel>
                <GridView
                    x:Name="recipeGridView"
                    AutomationProperties.AutomationId="MyGridView"
                    AutomationProperties.Name="MyItems"
                    TabIndex="1"
                    Grid.Row="1"
                    Margin="65,0,116,46"
                    ItemsSource="{Binding Path=Items}"
                    ItemTemplate="{StaticResource myGridViewTemplate}"
                    VirtualizingStackPanel.VirtualizationMode="Recycling"
                    SelectionMode="None"
                    IsItemClickEnabled="True"
                    ItemClick="ItemDetailClick" VerticalContentAlignment="Top"/>
            </StackPanel>
        </ScrollViewer>

Code behind:

public ItemsList()
{
    this.InitializeComponent();

    UpdateBackground(0);
    myGridScrollViewer.ViewChanged += UpdateBackgroundImagePosition;
}

private void UpdateBackground(double offset)
{
    BitmapImage im = new BitmapImage(new Uri("ms-appx:///Assets/tileable_bg.png"));
    var brush = new ImageBrush();
    brush.ImageSource = im;

    backgroundCanvas.SetValue(Canvas.WidthProperty, Window.Current.Bounds.Width);
    backgroundCanvas.SetValue(Canvas.HeightProperty, Window.Current.Bounds.Height);
    backgroundCanvas.SetValue(Canvas.MarginProperty, new Thickness(offset, 0, 0, 0));
    backgroundCanvas.SetValue(Canvas.BackgroundProperty, brush);
}

private void UpdateBackgroundImagePosition(object sender, ScrollViewerViewChangedEventArgs e)
{
    UpdateBackground(-((ScrollViewer)sender).HorizontalOffset*2);
}

As you can see in the event listener (UpdateBackgroundImagePosition), I have had to multiply the HorizontalOffset by 2 to get the background fixed with the content. But when I am moving the content of the scroller the background is not fixed at the position of the content, is moving a little different, a bit slower, and then ending the animation in the right position.

Any suggestion about how to get that or if by default windows is "forcing" to use parallax backgrounds?

Thanks,

score 1 · Accepted Answer · answered Aug 01 '12 at 23:54

As the Tiled Brush is not yet supported in Windows 8 Metro, the solution that seems to work although is not really nice is:

     <ScrollViewer
        x:Name="itemsGridScrollViewer"
        AutomationProperties.AutomationId="GridScrollViewer"
        Grid.Row="0"
        Margin="0,-4,0,0"
        Style="{StaticResource HorizontalScrollViewerStyle}">

        <!-- Main Grid: Wrapper for all the content -->
        <Grid x:Name="MainGrid">
            <Grid x:Name="TiledBackground" />

            <GridView x:Name="ContentPanel" .... />
        </Grid>
     </Scrollviewer>

The Grid "TiledBackground" contains as many cells as tiles are needed to fill the Scrollviewer. This is implemented in the code-behind.

I hope that a better solution is available soon.

Fixed background in a scrollviewer Windows Metro (not parallaxing)

1 Answers1