Рендеринг закадрового содержимого на Windows Phone - PullRequest
Новая
       26

Рендеринг закадрового содержимого на Windows Phone

1 голос
/ 24 октября 2011

В основном у меня есть элемент управления (например, Grid), который в два раза больше ширины страницы.

Идея состоит в том, чтобы анимировать элемент управления так, чтобы он скользил влево и отображалась невидимая половина - но этоне визуализируется.

Есть ли способ форсировать рендеринг за кадром или рендеринг на лету (во время воспроизведения анимации)?

Заранее спасибо,

Джейми

1 Ответ

1 голос
/ 24 октября 2011

Один из способов сделать это - иметь одну широкую сетку и иметь два преобразования рендеринга (в частности, 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();
    }
}
...