在 Windows Phone 上渲染屏幕外内容

Question

基本上我有两倍于页面宽度的控件（例如网格）。

这个想法是为控件设置动画，使其向左滑动并显示看不见的一半 - 但它不会被渲染。

有没有办法强制离屏渲染或动态渲染（在动画播放时）？

提前致谢，

杰米

Answer 1

实现此目的的一种方法是使用单个宽网格，并具有两个渲染变换（特别是 TranslateTransform）- 一个用于左侧内容，一个用于右侧内容。 “左侧”内容的 TranslateTransform X 值为 0，而右侧的 X 值为 480，有效地创建了一个双宽网格。要执行一个侧面，只需使用具有 -480 的双重动画的情节提要到两个变换的 X 值。

听起来有点复杂，但也不错，如果您需要更多详细信息，请告诉我！

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>

代码背后：

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();
    }
}