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 = newbyte[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