C# Compositor.CreateContainerVisual方法代码示例

        private void SamplePage_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            // Acquire Compositor and set up basic visual tree structure
            _xamlRoot = ElementCompositionPreview.GetElementVisual(MainGrid);
            _compositor = _xamlRoot.Compositor;
            _root = _compositor.CreateContainerVisual();
            _mainImage = Image.SpriteVisual;

            ElementCompositionPreview.SetElementChildVisual(ImageContainer, _root);
            _root.Children.InsertAtTop(_mainImage);


            // Add visual indicators to show the position of AnchorPoint and CenterPoint
            _indicatorContainer = _compositor.CreateContainerVisual();

            _apIndicator = _compositor.CreateSpriteVisual();
            _apIndicator.Size = new Vector2(10, 10);
            _apIndicator.AnchorPoint = new Vector2(0.5f, 0.5f);
            _apIndicator.Brush = _compositor.CreateColorBrush(Windows.UI.Colors.Red);

            _cpIndicator = _compositor.CreateSpriteVisual();
            _cpIndicator.Size = new Vector2(10, 10);
            _cpIndicator.AnchorPoint = new Vector2(0.5f, 0.5f);
            _cpIndicator.Brush = _compositor.CreateColorBrush(Windows.UI.Colors.Green);

            _root.Children.InsertAtTop(_indicatorContainer);
            _indicatorContainer.Children.InsertAtTop(_cpIndicator);
            _indicatorContainer.Children.InsertAtTop(_apIndicator);


            // Specify a clip to prevent image from overflowing into the sliders list
            Visual containerGrid = ElementCompositionPreview.GetElementVisual(ContentGrid);
            containerGrid.Size = new Vector2((float)ContentGrid.ActualWidth, (float)ContentGrid.ActualHeight);
            ContentGrid.SizeChanged += (s, a) =>
            {
                containerGrid.Size = new Vector2((float)ContentGrid.ActualWidth, (float)ContentGrid.ActualHeight);
            };
            containerGrid.Clip = _compositor.CreateInsetClip();


            // Create list of properties to add as sliders
            var list = new List<TransformPropertyModel>();
            list.Add(new TransformPropertyModel(AnchorPointXAction) { PropertyName = "AnchorPoint - X (Red)", MinValue = -1, MaxValue = 2, StepFrequency = 0.01f, Value = _mainImage.AnchorPoint.X });
            list.Add(new TransformPropertyModel(AnchorPointYAction) { PropertyName = "AnchorPoint - Y (Red)", MinValue = -1, MaxValue = 2, StepFrequency = 0.01f, Value = _mainImage.AnchorPoint.Y });
            list.Add(new TransformPropertyModel(CenterPointXAction) { PropertyName = "CenterPoint - X (Green)", MinValue = -600, MaxValue = 600, StepFrequency = 1f, Value = _mainImage.CenterPoint.X });
            list.Add(new TransformPropertyModel(CenterPointYAction) { PropertyName = "CenterPoint - Y (Green)", MinValue = -600, MaxValue = 600, StepFrequency = 1f, Value = _mainImage.CenterPoint.Y });
            list.Add(new TransformPropertyModel(RotationAction) { PropertyName = "Rotation (in Degrees)", MinValue = 0, MaxValue = 360, StepFrequency = 1f, Value = _mainImage.RotationAngleInDegrees });
            list.Add(new TransformPropertyModel(ScaleXAction) { PropertyName = "Scale - X", MinValue = 0, MaxValue = 3, StepFrequency = 0.01f, Value = _mainImage.Scale.X });
            list.Add(new TransformPropertyModel(ScaleYAction) { PropertyName = "Scale - Y", MinValue = 0, MaxValue = 3, StepFrequency = 0.01f, Value = _mainImage.Scale.Y });
            list.Add(new TransformPropertyModel(OffsetXAction) { PropertyName = "Offset - X", MinValue = -200, MaxValue = 200, StepFrequency = 1f, Value = _mainImage.Offset.X });
            list.Add(new TransformPropertyModel(OffsetYAction) { PropertyName = "Offset - Y", MinValue = -200, MaxValue = 200, StepFrequency = 1f, Value = _mainImage.Offset.Y });

            XamlItemsControl.ItemsSource = list;

        }

        public void SetupVisuals()
        {
            // Intialize the Compositor
            _compositor = new Compositor();
            _root = ElementCompositionPreview.GetElementVisual(Container);
            _compositor = _root.Compositor;

            // Create the Blue Square
            var blueSquareVisual = _compositor.CreateSpriteVisual();
            blueSquareVisual.Brush = _compositor.CreateColorBrush(Colors.Blue);
            blueSquareVisual.Size = new System.Numerics.Vector2(50.0f, 50.0f);
            blueSquareVisual.Offset = new Vector3(100.00f, 50.00f, 0.00f);

            // Create the Green Square with 20% opacity
            var greenSquareVisual = _compositor.CreateSpriteVisual();
            greenSquareVisual.Brush = _compositor.CreateColorBrush(Colors.Green);
            greenSquareVisual.Size = new System.Numerics.Vector2(50.0f, 50.0f);
            greenSquareVisual.Offset = new Vector3(150.00f, 100.00f, 0.00f);
            greenSquareVisual.Opacity = 0.20f;

            // Add the Visuals to the tree
            ContainerVisual mainContainer = _compositor.CreateContainerVisual();
            ElementCompositionPreview.SetElementChildVisual(Container, mainContainer);
            mainContainer.Children.InsertAtTop(blueSquareVisual);
            mainContainer.Children.InsertAtTop(greenSquareVisual);

            _source = greenSquareVisual;
            _target = blueSquareVisual;
        }

        public void Parallax_Expression()
        {
            _compositor = new Compositor();
            _root = ElementCompositionPreview.GetElementVisual(Container);
            _compositor = _root.Compositor;

            // Create the Blue Square
            var blueSquareVisual = _compositor.CreateSpriteVisual();
            blueSquareVisual.Brush = _compositor.CreateColorBrush(Colors.Blue);
            blueSquareVisual.Size = new System.Numerics.Vector2(100.0f, 100.0f);
            blueSquareVisual.Offset = new Vector3(100.00f, 50.00f, 0.00f);

            // Create the Green Square
            var greenSquareVisual = _compositor.CreateSpriteVisual();
            greenSquareVisual.Brush = _compositor.CreateColorBrush(Colors.Green);
            greenSquareVisual.Size = new System.Numerics.Vector2(50.0f, 50.0f);
            greenSquareVisual.Offset = new Vector3(100.00f, 50.00f, 0.00f);


            // Add the Blue and Green square visuals to the tree
            ContainerVisual mainContainer = _compositor.CreateContainerVisual();
            ElementCompositionPreview.SetElementChildVisual(Container, mainContainer);
            mainContainer.Children.InsertAtTop(blueSquareVisual);
            mainContainer.Children.InsertAtTop(greenSquareVisual);

            _foreground = greenSquareVisual;
            _background = blueSquareVisual;
        }

        // Define and setup the Green Square Visual that will be animated 
        public void SetupVisual()
        {
            // Intialize the Compositor
            _compositor = new Compositor();
            _root = (ContainerVisual)ElementCompositionPreview.GetElementVisual(Container);
            _compositor = _root.Compositor;

            _linear = _compositor.CreateLinearEasingFunction();

            // Create Green Square
            var colorVisual = _compositor.CreateSpriteVisual();
            colorVisual.Brush = _compositor.CreateColorBrush(Colors.Green);
            colorVisual.Size = new Vector2(150.0f, 150.0f);
            colorVisual.Offset = new Vector3(250.0f, 50.0f, 0.0f);
            colorVisual.CenterPoint = new Vector3(75.0f, 75.0f, 0.0f);
            _target = colorVisual;

            // Create Blue Square
            var colorVisual2 = _compositor.CreateSpriteVisual();
            colorVisual2.Brush = _compositor.CreateColorBrush(Colors.Aqua);
            colorVisual2.Size = new Vector2(200.0f, 150.0f);
            colorVisual2.Offset = new Vector3(25.0f, 50.0f, 0.0f);
            colorVisual2.IsVisible = false; 
            _target2 = colorVisual2;

            // Add the Blue and Green square visuals to the tree
            _mainContainer = _compositor.CreateContainerVisual();
            ElementCompositionPreview.SetElementChildVisual(Container, _mainContainer);
            _mainContainer.Children.InsertAtTop(_target);
            _mainContainer.Children.InsertAtTop(_target2);

            // Create Scoped batch for animations
            _batch = _compositor.CreateScopedBatch(CompositionBatchTypes.Animation);

            // Add Animation1 to the batch
            Animation1(_target);

            // Suspend the batch to exclude an animation
            _batch.Suspend();

            // Exluding Animation2 from batch
            Animation2(_target);

            // Resuming the batch to collect additional animations
            _batch.Resume();

            // Add Animation3 to the batch
            Animation3(_target);

            // Batch is ended an no objects can be added
            _batch.End();

            // Method triggered when batch completion event fires
            _batch.Completed += OnBatchCompleted;
        }

        void InitNewComposition()
        {
            _compositor = new Compositor();

            _root = _compositor.CreateContainerVisual();

            _compositionTarget = _compositor.CreateTargetForCurrentView();
            _compositionTarget.Root = _root;

            CreateChildElement();
        }

        void InitNewComposition()
        {
            //
            // Set up Windows.UI.Composition Compositor, root ContainerVisual, and associate with
            // the CoreWindow.
            //

            _compositor = new Compositor();
            _root = _compositor.CreateContainerVisual();
            _target = _compositor.CreateTargetForCurrentView();
            _target.Root = _root;
            Mask();
        }

        //------------------------------------------------------------------------------
        //
        // VisualProperties.InitNewComposition
        //
        // This method is called by SetWindow(), where we initialize Composition after
        // the CoreWindow has been created.
        //
        //------------------------------------------------------------------------------

        void InitNewComposition()
        {
            //
            // Set up Windows.UI.Composition Compositor, root ContainerVisual, and associate with
            // the CoreWindow.
            //

            _compositor = new Compositor();
            _root = _compositor.CreateContainerVisual();
            _target = _compositor.CreateTargetForCurrentView();
            _target.Root = _root;
            _imageFactory = CompositionImageFactory.CreateCompositionImageFactory(_compositor);
            TintedBrush();
        }

        /// <summary>
        /// Creates an instance of the ColorBloomTransitionHelper. 
        /// Any visuals to be later created and animated will be hosted within the specified UIElement.
        /// </summary>
        public ColorBloomTransitionHelper(UIElement hostForVisual)
        {
            this.hostForVisual = hostForVisual;

            // we have an element in the XAML tree that will host our Visuals
            var visual = ElementCompositionPreview.GetElementVisual(hostForVisual);
            _compositor = visual.Compositor;

            // create a container
            // adding children to this container adds them to the live visual tree
            _containerForVisuals = _compositor.CreateContainerVisual();
            ElementCompositionPreview.SetElementChildVisual(hostForVisual, _containerForVisuals);

            // initialize the ImageLoader and create the circle mask
            _imageLoader = ImageLoaderFactory.CreateImageLoader(_compositor);
            _circleMaskSurface = _imageLoader.CreateCircleSurface(200, Colors.White);
        }

        /// <summary>
        /// Creates an instance of the ColorBloomTransitionHelper. 
        /// Any visuals to be later created and animated will be hosted within the specified UIElement.
        /// </summary>
        public ColorBloomTransitionHelper(UIElement hostForVisual)
        {
            this.hostForVisual = hostForVisual;

            // we have an element in the XAML tree that will host our Visuals
            var visual = ElementCompositionPreview.GetElementVisual(hostForVisual);
            _compositor = visual.Compositor;

            // create a container
            // adding children to this container adds them to the live visual tree
            _containerForVisuals = _compositor.CreateContainerVisual();
            ElementCompositionPreview.SetElementChildVisual(hostForVisual, _containerForVisuals);

            // initialize the ImageLoader and create the circle mask
            _imageLoader = ImageLoaderFactory.CreateImageLoader(_compositor);
            _circleMaskSurface = _imageLoader.CreateManagedSurfaceFromUri(new Uri("ms-appx:///Samples/SDK 10586/TransitionAnimation-ColorBloom/CircleOpacityMask.png"));
        }

        /// <summary>
        /// Creates an instance of the ColorSlideTransitionHelper. 
        /// Any visuals to be later created and animated will be hosted within the specified UIElement.
        /// </summary>
        public ColorSlideTransitionHelper(UIElement hostForVisual)
        {


            this.hostForVisual = hostForVisual;

            // we have an element in the XAML tree that will host our Visuals
            var visual = ElementCompositionPreview.GetElementVisual(hostForVisual);
            _compositor = visual.Compositor;

            // create a container
            // adding children to this container adds them to the live visual tree
            _containerForVisuals = _compositor.CreateContainerVisual();

            InitializeSlideAnimation();


            ElementCompositionPreview.SetElementChildVisual(hostForVisual, _containerForVisuals);
        }

        private async void BusyIndicator_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
            generator = CompositionMaskFactory.GetCompositionMaskGenerator(compositor);

            container = compositor.CreateContainerVisual();
            container.Size = new Vector2(60, 60);
            container.Offset = new Vector3(-30, -30, 0);

            float size = 30;

            var color = Color.FromArgb(255, 0xD2, 0x42, 0x29);

            ellipse_0 = await CreateEllipseVisual(color, size, size);
            ellipse_1 = await CreateEllipseVisual(color, size, size);
            ellipse_2 = await CreateEllipseVisual(color, size, size);
            ellipse_3 = await CreateEllipseVisual(color, size, size);

            container.Children.InsertAtBottom(ellipse_0);
            container.Children.InsertAtBottom(ellipse_1);
            container.Children.InsertAtBottom(ellipse_2);
            container.Children.InsertAtBottom(ellipse_3);

            ElementCompositionPreview.SetElementChildVisual(this, container);

            animations.Add(AnimateScale(ellipse_0));
            animations.Add(AnimateScale(ellipse_1, true));
            animations.Add(AnimateScale(ellipse_2));
            animations.Add(AnimateScale(ellipse_3, true));

            animations.Add(AnimateRotation(ellipse_0, 0));
            animations.Add(AnimateRotation(ellipse_1, 0.25f * (float)Math.PI));
            animations.Add(AnimateRotation(ellipse_2, 0.5f * (float)Math.PI));
            animations.Add(AnimateRotation(ellipse_3, 0.75f * (float)Math.PI));

            IsReady = true;
        }

        /// <summary>
        /// Initializes the Composition elements
        /// </summary>
        private void InitComposition()
        {
            // Compositor
            _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
            // CompositionGenerator
            _generator = CompositionGeneratorFactory.GetCompositionGenerator(_compositor);
            
            // Fade Out Animation
            _fadeOutAnimation = _compositor.CreateScalarKeyFrameAnimation();
            _fadeOutAnimation.InsertKeyFrame(1f, 0);
            _fadeOutAnimation.Duration = TransitionDuration;
            // Fade In Animation
            _fadeInAnimation = _compositor.CreateScalarKeyFrameAnimation();
            _fadeInAnimation.InsertKeyFrame(1f, 1);
            _fadeInAnimation.Duration = TransitionDuration;
            // Color Animation
            _colorAnimation = _compositor.CreateColorKeyFrameAnimation();
            _colorAnimation.Duration = TransitionDuration;
            // Offset Animation
            _offsetAnimation = _compositor.CreateVector3KeyFrameAnimation();
            _offsetAnimation.Target = "Offset";
            _offsetAnimation.Duration = TransitionDuration;
            _offsetAnimation.InsertKeyFrame(1f, Vector3.Zero);
            // Alignment animations
            _alignXAnimation = _compositor.CreateScalarKeyFrameAnimation();
            _alignXAnimation.Duration = AlignmentTransitionDuration;
            _alignYAnimation = _compositor.CreateScalarKeyFrameAnimation();
            _alignYAnimation.Duration = AlignmentTransitionDuration;

            // ZoomIn Animation Group
            _scaleAnimation = _compositor.CreateVector3KeyFrameAnimation();
            _scaleAnimation.Target = "Scale";
            _scaleAnimation.InsertKeyFrame(1f, Vector3.One);
            _scaleAnimation.Duration = TransitionDuration;
            _zoomInAnimationGroup = _compositor.CreateAnimationGroup();
            _zoomInAnimationGroup.Add(_scaleAnimation);
            _zoomInAnimationGroup.Add(_offsetAnimation);

            // Visuals
            _rootContainer = _compositor.CreateContainerVisual();
            _frameLayer = _compositor.CreateLayerVisual();
            _frameBackgroundVisual = _compositor.CreateSpriteVisual();
            _frameContentVisual = _compositor.CreateSpriteVisual();
            _placeholderContentVisual = _compositor.CreateSpriteVisual();
            _placeholderBackgroundVisual = _compositor.CreateSpriteVisual();
            _nextVisualContent = _compositor.CreateSpriteVisual();

            _frameLayer.Children.InsertAtTop(_frameBackgroundVisual);
            _frameLayer.Children.InsertAtTop(_frameContentVisual);
            _frameLayer.Children.InsertAtTop(_placeholderBackgroundVisual);
            _frameLayer.Children.InsertAtTop(_placeholderContentVisual);
            _frameLayer.Children.InsertAtTop(_nextVisualContent);

            // Placeholder content
            _placeholderContentMask = _generator.CreateGeometrySurface(PlaceholderSize, GetPlaceHolderGeometry(),
                PlaceholderColor, PlaceholderBackground);
            _placeholderContentBrush = _compositor.CreateSurfaceBrush(_placeholderContentMask.Surface);
            _placeholderContentVisual.Brush = _placeholderContentBrush;
            // Placeholder background
            _placeholderBackgroundVisual.Brush = _compositor.CreateColorBrush(PlaceholderBackground);

            // By default placeholder visual will not be visible
            HidePlaceholder();

            // Shadow visual
            _shadowVisual = _compositor.CreateSpriteVisual();

            _rootContainer.Children.InsertAtBottom(_shadowVisual);
            _rootContainer.Children.InsertAtTop(_frameLayer);

            _frameBackgroundVisual.Brush = _compositor.CreateColorBrush(FrameBackground);

            // Create the effect to create the opacity mask
            var layerEffect = new CompositeEffect
            {
                // CanvasComposite.DestinationIn - Intersection of source and mask. 
                // Equation: O = MA * S
                // where O - Output pixel, MA - Mask Alpha, S - Source pixel.
                Mode = CanvasComposite.DestinationIn,
                Sources =
                        {
                            new CompositionEffectSourceParameter("source"),
                            new CompositionEffectSourceParameter("mask")
                        }
            };

            var layerEffectFactory = _compositor.CreateEffectFactory(layerEffect);
            _layerEffectBrush = layerEffectFactory.CreateBrush();

            // The mask for the imageFrame
            _frameLayerMask = _generator.CreateMaskSurface(new Size(0, 0), null);
            _layerEffectBrush.SetSourceParameter("mask", _compositor.CreateSurfaceBrush(_frameLayerMask.Surface));
            // Apply the mask effect to the frameLayer
            _frameLayer.Effect = _layerEffectBrush;

            ElementCompositionPreview.SetElementChildVisual(this, _rootContainer);
        }

        /// <summary>
        /// Initialize Composition
        /// </summary>
        private void InitializeComposition()
        {

            // Retrieve an instance of the Compositor from the backing Visual of the Page
            _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

            // Create a root visual from the Compositor
            _root = _compositor.CreateContainerVisual();

            // Set the root ContainerVisual as the XAML Page Visual           
            ElementCompositionPreview.SetElementChildVisual(this, _root);

            // Assign initial values to variables used to store updated offsets for the visuals          
            float posXUpdated = _posX;
            float posYUpdated = _posY;


            //Create a list of image brushes that can be applied to a visual
            string[] imageNames = { "60Banana.png", "60Lemon.png", "60Vanilla.png", "60Mint.png", "60Orange.png", "110Strawberry.png", "60SprinklesRainbow.png" };
            _imageBrushList = new List<CompositionSurfaceBrush>();
            _imageLoader = ImageLoaderFactory.CreateImageLoader(_compositor);
            for (int k = 0; k < imageNames.Length; k++)
            {
                var surface = _imageLoader.LoadImageFromUri(new Uri("ms-appx:///Samples/SDK 14393/ImplicitAnimationTransformer/" + imageNames[k]));
                _imageBrushList.Add(_compositor.CreateSurfaceBrush(surface));
            }

            // Create nxn matrix of visuals where n=row/ColumnCount-1 and passes random image brush to the function
            // that creates a visual
            for (int i = 1; i < _rowCount; i++)
            {
                posXUpdated = i * _distance;
                for (int j = 1; j < _columnCount; j++)
                {
                    CompositionSurfaceBrush brush = _imageBrushList[randomBrush.Next(_imageBrushList.Count)];

                    posYUpdated = j * _distance;
                    _root.Children.InsertAtTop(CreateChildElement(brush, posXUpdated, posYUpdated));
                }
            }

            // Update the default animation state
            UpdateAnimationState(EnableAnimations.IsChecked == true);
        }

        /// <summary>
        /// Initialize all Composition related stuff here (Compositor, Animations etc)
        /// </summary>
        private void InitializeComposition()
        {
            var rootVisual = ElementCompositionPreview.GetElementVisual(this);
            // Compositor
            _compositor = rootVisual.Compositor;
            // Composition Generator
            _generator = CompositionGeneratorFactory.GetCompositionGenerator(_compositor);

            // Final Value Expressions
            var vector3Expr = _compositor.CreateFinalValueExpression<Vector3>();
            var scalarExpr = _compositor.CreateFinalValueExpression<float>();

            // Opacity Animation
            var opacityAnimation = _compositor.CreateKeyFrameAnimation<float>()
                                              .HavingDuration(DefaultOpacityAnimationDuration)
                                              .ForTarget(() => rootVisual.Opacity);
            opacityAnimation.InsertExpressionKeyFrame(1f, scalarExpr);

            // Scale Animation
            var scaleAnimation = _compositor.CreateKeyFrameAnimation<Vector3>()
                                            .HavingDuration(DefaultScaleAnimationDuration)
                                            .ForTarget(() => rootVisual.Scale);
            scaleAnimation.InsertExpressionKeyFrame(1f, vector3Expr);

            // ImplicitAnimation
            _implicitAnimationCollection = _compositor.CreateImplicitAnimationCollection();
            _implicitAnimationCollection["Opacity"] = opacityAnimation.Animation;
            _implicitAnimationCollection["Scale"] = scaleAnimation.Animation;

            // Expand Animations
            _expandLeftInset = _compositor.CreateKeyFrameAnimation<float>()
                                          .HavingDuration(InsetAnimationDuration)
                                          .DelayBy(InsetAnimationDelayDuration);

            _expandLeftInset.InsertKeyFrame(1f, 0);

            _expandRightInset = _compositor.CreateKeyFrameAnimation<float>()
                                           .HavingDuration(InsetAnimationDuration)
                                           .DelayBy(InsetAnimationDelayDuration);

            _expandInsetClip = _compositor.CreateKeyFrameAnimation<float>()
                                          .HavingDuration(InsetClipAnimationDuration);

            _expandInsetClip.InsertKeyFrame(1f, 0);

            // Collapse Animations
            _collapseLeftInset = _compositor.CreateKeyFrameAnimation<float>()
                                            .HavingDuration(InsetAnimationDuration);

            _collapseRightInset = _compositor.CreateKeyFrameAnimation<float>()
                                             .HavingDuration(InsetAnimationDuration);

            _collapseInsetClip = _compositor.CreateKeyFrameAnimation<float>()
                                            .HavingDuration(InsetClipAnimationDuration);

            // Root Container
            _rootContainer = _compositor.CreateContainerVisual();

            // Background Layer
            _bgLayer = _compositor.CreateLayerVisual();
            _bgLayer.Size = _rootContainer.Size;
            _bgLayer.CenterPoint = new Vector3(_bgLayer.Size * 0.5f, 0);

            // Top Layer
            _topLayer = _compositor.CreateLayerVisual();
            _topLayer.Size = _rootContainer.Size;

            _rootContainer.Children.InsertAtBottom(_bgLayer);
            _rootContainer.Children.InsertAtTop(_topLayer);

            // Add the rootContainer to the visual tree
            ElementCompositionPreview.SetElementChildVisual(this, _rootContainer);
        }

        private void CreateCompositionScene(Compositor compositor)
        {
            // Create the property driving the animations
            _animationPropertySet = _compositor.CreatePropertySet();
            _animationPropertySet.InsertScalar("currentZ", selectedLayerIndex);

            // Create the layer effect
            var layerEffectDesc = new GaussianBlurEffect
            {
                Name = "blur",
                BorderMode = EffectBorderMode.Hard,
                BlurAmount = 0,
                Source = new SaturationEffect
                {
                    Name = "saturation",
                    Saturation = 1,
                    Source = new CompositionEffectSourceParameter("source")
                }
            };

            var layerEffectFactory = _compositor.CreateEffectFactory(layerEffectDesc,
                new[] { "blur.BlurAmount", "saturation.Saturation" });

            // Create the host visual
            _rootVisual = compositor.CreateContainerVisual();
            ElementCompositionPreview.SetElementChildVisual(compositionHostPanel, _rootVisual);

            // Create the scene visuals
            for (int layerIndex = 0; layerIndex < layers.Count; ++layerIndex)
            {
                var layer = layers[layerIndex];
                layer.CreateVisuals(compositor);

                _rootVisual.Children.InsertAtBottom(layer.LayerVisual);
                layer.LayerVisual.Effect = layerEffectFactory.CreateBrush();
                SetupLayerAnimations(layer, layerIndex);
            }

            UpdateVisualLayout();
        }