Question

Basically I have control (such as a Grid) which is twice the width of the page.

The idea is to animate the control so that it slides left and the unseen half is shown – but it is not rendered.

Is there a way to force offscreen rendering or force render on the fly (as the animation is playing)?

Thanks in advance,

Jamie

Answer 1

One way to do this is to have a single wide grid, and have two render transforms (TranslateTransform specifically) – one for the left content, and one for the right content. The “left” content would have a TranslateTransform X value of 0, while the right one would have an X value of 480, effectively creating a double wide grid. To perform a side, just use a Storyboard with a double animation of -480 to the X value of both transforms.

It sounds a little complicated but it’s not too bad, let me know if you need more details!

XAML:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.Resources>
        <Storyboard x:Key="SlideLeftStoryboard">
            <DoubleAnimation From="0" To="-480" Duration="0:0:0.5" Storyboard.TargetName="BlueTransform" Storyboard.TargetProperty="X">

            </DoubleAnimation>
            <DoubleAnimation From="480" To="0" Duration="0:0:0.5" Storyboard.TargetName="RedTransform" Storyboard.TargetProperty="X">

            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="SlideRightStoryboard">
            <DoubleAnimation From="-480" To="0" Duration="0:0:0.5" Storyboard.TargetName="BlueTransform" Storyboard.TargetProperty="X">

            </DoubleAnimation>
            <DoubleAnimation From="0" To="480" Duration="0:0:0.5" Storyboard.TargetName="RedTransform" Storyboard.TargetProperty="X">

            </DoubleAnimation>
        </Storyboard>
    </Grid.Resources>
    <Border Name="BlueBorder" Background="Blue">
        <Border.RenderTransform>
            <TranslateTransform x:Name="BlueTransform" X="0">

            </TranslateTransform>
        </Border.RenderTransform>
        <Button Click="SlideLeft_Click">
            <TextBlock>
                Slide Left
            </TextBlock>
        </Button>
    </Border>
    <Border Name="RedBorder" Background="Red">
        <Border.RenderTransform>
            <TranslateTransform x:Name="RedTransform" X="480">

            </TranslateTransform>
        </Border.RenderTransform>
        <Button Click="SlideRight_Click">
            <TextBlock>
                Slide Right
            </TextBlock>
        </Button>
    </Border>

</Grid>

Code Behind:

public partial class MainPage : PhoneApplicationPage
{
    Storyboard slideLeftStoryboard;
    Storyboard slideRightStoryboard;
    // Constructor
    public MainPage()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(MainPage_Loaded);
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        slideLeftStoryboard = LayoutRoot.Resources["SlideLeftStoryboard"] as Storyboard;
        slideRightStoryboard = LayoutRoot.Resources["SlideRightStoryboard"] as Storyboard;
    }

    private void SlideLeft_Click(object sender, RoutedEventArgs e)
    {
        slideLeftStoryboard.Begin();
    }

    private void SlideRight_Click(object sender, RoutedEventArgs e)
    {
        slideRightStoryboard.Begin();
    }
}