読者です 読者をやめる 読者になる 読者になる

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

UWPでパララックススクロール

1つ前の記事で、あんまりうれしくない例でWindows.UI.Compositionの紹介をしました。

blog.okazuki.jp

Windows.UI.Compositionを使った強力なところは文字列で式を指定して、その結果をもとにアニメーションするということが出来る点だと個人的に思ってます。

コンポジションのアニメーション - Windows app development

これを使ったパララックススクロールの例がGitHubで公開されています。

github.com

ということで、これを真似してもうちょっとパララックスっぽい感じの例を作ってみました。

youtu.be

動的に1000個の矩形を作成して、アニメーションを適当に設定して追加しています。

var listViewVisual = ElementCompositionPreview.GetElementVisual(this.ListView);
var scrollViewer = FindVisualTree<ScrollViewer>(this.ListView);
var scrollViewerPropertySet = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scrollViewer);
var random = new Random();

for (int i = 0; i < 1000; i++)
{
    var argb = new byte[4];
    random.NextBytes(argb);
    var rect = new Border
    {
        Width = random.Next(10, 100),
        Height = random.Next(10, 100),
        Background = new SolidColorBrush(Color.FromArgb(argb[0], argb[1], argb[2], argb[3])),
        HorizontalAlignment = HorizontalAlignment.Left,
        VerticalAlignment = VerticalAlignment.Top
    };
    Canvas.SetTop(rect, random.NextDouble() * scrollViewer.ScrollableHeight);
    Canvas.SetLeft(rect, random.NextDouble() * scrollViewer.ActualWidth);
    this.ParallaxBackground.Children.Add(rect);

    var rectVisual = ElementCompositionPreview.GetElementVisual(rect);
    var offsetY = rectVisual.Offset.Y;
    var expression = listViewVisual.Compositor.CreateExpressionAnimation($"offsetY + scrollViewer.Translation.Y * {0.01 + random.NextDouble()}");
    expression.SetScalarParameter("offsetY", offsetY);
    expression.SetReferenceParameter("scrollViewer", scrollViewerPropertySet);
    rectVisual.StartAnimation("Offset.Y", expression);
}

コード全体

GitHubに公開しています。

github.com