CompositionObject 類別

定義

組合 API 的基類,代表視覺化樹狀結構中的節點。

組合物件是組合 API 使用和建置之所有其他功能的視覺化樹狀結構。 API 可讓開發人員定義及建立一或多個 Visual 物件,分別代表 視覺化 樹狀結構中的單一節點。

[WebHostHidden]
public ref class CompositionObject : IClosable
public ref class CompositionObject : IClosable
public ref class CompositionObject : IClosable, IAnimationObject
/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[WebHostHidden]
class CompositionObject : IClosable
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 131072)]
class CompositionObject : IClosable
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 131072)]
class CompositionObject : IClosable, IAnimationObject
[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public class CompositionObject : System.IDisposable
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 131072)]
public class CompositionObject : System.IDisposable
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 131072)]
public class CompositionObject : System.IDisposable, IAnimationObject
Public Class CompositionObject
Implements IDisposable
Public Class CompositionObject
Implements IAnimationObject, IDisposable
繼承
Object Platform::Object IInspectable CompositionObject
衍生
屬性
實作

Windows 需求

裝置系列
Windows 10 (已於 10.0.10240.0 引進)
API contract
Windows.Foundation.UniversalApiContract (已於 v1.0 引進)

範例

此範例示範如何使用組合 API 來建立獨立應用程式,而不需使用 XAML、WWA 或 DirectX。 此範例會初始化新的 Compositor,然後使用兩個 SpriteVisual 物件建立場景圖形。

using System;
using System.Numerics;

using Windows.ApplicationModel.Core;
using Windows.UI;
using Windows.UI.Composition;
using Windows.UI.Core;

namespace HelloCompositionCs
{
    public sealed class HelloComposition : IFrameworkView
    {
        //------------------------------------------------------------------------------
        //
        // HelloComposition.Initialize
        //
        // This method is called during startup to associate the IFrameworkView with the
        // CoreApplicationView.
        //
        //------------------------------------------------------------------------------

        void IFrameworkView.Initialize(CoreApplicationView view)
        {
            _view = view;
        }


        //------------------------------------------------------------------------------
        //
        // HelloComposition.SetWindow
        //
        // This method is called when the CoreApplication has created a new CoreWindow,
        // allowing the application to configure the window and start producing content
        // to display.
        //
        //------------------------------------------------------------------------------

        void IFrameworkView.SetWindow(CoreWindow window)
        {
            _window = window;
            InitNewComposition();
        }


        //------------------------------------------------------------------------------
        //
        // HelloComposition.Load
        //
        // This method is called when a specific page is being loaded in the
        // application.  It is not used for this application.
        //
        //------------------------------------------------------------------------------

        void IFrameworkView.Load(string unused)
        {

        }


        //------------------------------------------------------------------------------
        //
        // HelloComposition.Run
        //
        // This method is called by CoreApplication.Run to actually run the
        // dispatcher's message pump.
        //
        //------------------------------------------------------------------------------

        void IFrameworkView.Run()
        {
            _window.Activate();
            _window.Dispatcher.ProcessEvents(CoreProcessEventsOption.ProcessUntilQuit);
        }


        //------------------------------------------------------------------------------
        //
        // HelloComposition.Uninitialize
        //
        // This method is called during shutdown to disconnect the CoreApplicationView,
        // and CoreWindow from the IFrameworkView.
        //
        //------------------------------------------------------------------------------

        void IFrameworkView.Uninitialize()
        {
            _window = null;
            _view = null;
        }


        //------------------------------------------------------------------------------
        //
        // HelloComposition.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();
            _view.CompositionRootVisual = _root;


            //
            // Create a simple scene.
            //

            var child1 = _compositor.CreateSpriteVisual();
            child1.Offset = new Vector2(50.0f, 50.0f);
            child1.Size = new Vector2(200, 200);
            child1.Brush = _compositor.CreateColorBrush(Color.FromArgb(0xFF, 0x00, 0xCC, 0x00));

            _root.Children.InsertAtTop(child1);

            var child2 = _compositor.CreateSpriteVisual();
            child2.Offset = new Vector2(50.0f, 50.0f);
            child2.Size = new Vector2(200, 200);
            child2.Brush = _compositor.CreateColorBrush(Color.FromArgb(0xFF, 0x00, 0x00, 0xCC));

            child1.Children.InsertAtTop(child2);

        }


        // CoreWindow / CoreApplicationView
        private CoreWindow _window;
        private CoreApplicationView _view;

        // Windows.UI.Composition
        private Compositor _compositor;
        private ContainerVisual _root;
    }


    public sealed class HelloCompositionFactory : IFrameworkViewSource
    {
        //------------------------------------------------------------------------------
        //
        // HelloCompositionFactory.CreateView
        //
        // This method is called by CoreApplication to provide a new IFrameworkView for
        // a CoreWindow that is being created.
        //
        //------------------------------------------------------------------------------

        IFrameworkView IFrameworkViewSource.CreateView()
        {
            return new HelloComposition();
        }


        //------------------------------------------------------------------------------
        //
        // main
        //
        //------------------------------------------------------------------------------

        static int Main(string[] args)
        {
            CoreApplication.Run(new HelloCompositionFactory());

            return 0;
        }
    }

} // namespace HelloCompositionCs

此範例示範如何建構和逐步解說視覺效果的簡單樹狀結構,以在不使用 XAML、WWA 或 DirectX 的情況下變更不透明度。 此範例是以先前的範例為基礎,示範如何建立、新增和變更子視覺效果。

在此案例中,會建置視覺效果的視覺化樹狀結構階層。 建立 Compositor 之後,它會用來建立可接著管理的物件。

//  Copyright (c) Microsoft Corporation. All rights reserved.

using System;
using System.Numerics;

using Windows.ApplicationModel.Core;
using Windows.Foundation;
using Windows.UI;
using Windows.UI.Composition;
using Windows.UI.Core;

namespace VisualTreeCs
{
    public sealed class VisualTree : IFrameworkView
    {
        //------------------------------------------------------------------------------
        //
        // VisualTree.Initialize
        //
        // This method is called during startup to associate the IFrameworkView with the
        // CoreApplicationView.
        //
        //------------------------------------------------------------------------------

        void IFrameworkView.Initialize(CoreApplicationView view)
        {
            _view = view;
            _random = new Random();
        }

        //------------------------------------------------------------------------------
        //
        // VisualTree.SetWindow
        //
        // This method is called when the CoreApplication has created a new CoreWindow,
        // allowing the application to configure the window and start producing content
        // to display.
        //
        //------------------------------------------------------------------------------

        void IFrameworkView.SetWindow(CoreWindow window)
        {
            _window = window;
            InitNewComposition();
            _window.PointerPressed += OnPointerPressed;
            _window.PointerMoved += OnPointerMoved;
            _window.PointerReleased += OnPointerReleased;
        }

        //------------------------------------------------------------------------------
        //
        // VisualTree.OnPointerPressed
        //
        // This method is called when the user touches the screen, taps it with a stylus
        // or clicks the mouse.
        //
        //------------------------------------------------------------------------------

        void OnPointerPressed(CoreWindow window, PointerEventArgs args)
        {
            Point position = args.CurrentPoint.Position;

            //
            // Walk our list of visuals to determine who, if anybody, was selected
            //
            foreach (var child in _root.Children)
            {
                //
                // Did we hit this child?
                //
                Vector2 offset = child.Offset;
                Vector2 size = child.Size;

                if ((position.X >= offset.X) &&
                    (position.X < offset.X + size.X) &&
                    (position.Y >= offset.Y) &&
                    (position.Y < offset.Y + size.Y))
                {
                    //
                    // This child was hit. Since the children are stored back to front,
                    // the last one hit is the front-most one so it wins
                    //
                    _currentVisual = child;
                    _offsetBias = new Vector2((float)(offset.X - position.X),
                                              (float)(offset.Y - position.Y));
                }
            }

            //
            // If a visual was hit, bring it to the front of the Z order
            //
            if (_currentVisual != null)
            {
                ContainerVisual parent = _currentVisual.Parent as ContainerVisual;
                parent.Children.Remove(_currentVisual);
                parent.Children.InsertAtTop(_currentVisual);
            }
        }

        //------------------------------------------------------------------------------
        //
        // VisualTree.OnPointerMoved
        //
        // This method is called when the user moves their finger, stylus or mouse with
        // a button pressed over the screen.
        //
        //------------------------------------------------------------------------------

        void OnPointerMoved(CoreWindow window, PointerEventArgs args)
        {
            //
            // If a visual is selected, drag it with the pointer position and
            // make it opaque while we drag it
            //
            if (_currentVisual != null)
            {
                Point position = args.CurrentPoint.Position;
                _currentVisual.Opacity = 1.0f;
                _currentVisual.Offset = new Vector2((float)(position.X + _offsetBias.X),
                                                    (float)(position.Y + _offsetBias.Y));
            }
        }

        //------------------------------------------------------------------------------
        //
        // VisualTree.OnPointerReleased
        //
        // This method is called when the user lifts their finger or stylus from the
        // screen, or lifts the mouse button.
        //
        //------------------------------------------------------------------------------

        void OnPointerReleased(CoreWindow window, PointerEventArgs args)
        {
            //
            // If a visual was selected, make it transparent again when it is
            // released
            //
            if (_currentVisual != null)
            {
                _currentVisual.Opacity = 0.8f;
                _currentVisual = null;
            }
        }

        //------------------------------------------------------------------------------
        //
        // VisualTree.Load
        //
        // This method is called when a specific page is being loaded in the
        // application.  It is not used for this application.
        //
        //------------------------------------------------------------------------------

        void IFrameworkView.Load(string unused)
        {

        }

        //------------------------------------------------------------------------------
        //
        // VisualTree.Run
        //
        // This method is called by CoreApplication.Run to actually run the
        // dispatcher's message pump.
        //
        //------------------------------------------------------------------------------

        void IFrameworkView.Run()
        {
            _window.Activate();
            _window.Dispatcher.ProcessEvents(CoreProcessEventsOption.ProcessUntilQuit);
        }

        //------------------------------------------------------------------------------
        //
        // VisualTree.Uninitialize
        //
        // This method is called during shutdown to disconnect the CoreApplicationView,
        // and CoreWindow from the IFrameworkView.
        //
        //------------------------------------------------------------------------------

        void IFrameworkView.Uninitialize()
        {
            _window = null;
            _view = null;
        }

        //------------------------------------------------------------------------------
        //
        // VisualTree.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();
            _view.CompositionRootVisual = _root;

            //
            // Create a few visuals for our window
            //
            for (int index = 0; index < 20; index++)
            {
                _root.Children.InsertAtTop(CreateChildElement());
            }
        }

        //------------------------------------------------------------------------------
        //
        // VisualTree.CreateChildElement
        //
        // Creates a small sub-tree to represent a visible element in our application.
        //
        //------------------------------------------------------------------------------

        Visual CreateChildElement()
        {
            //
            // Each element consists of two visuals, which produce the appearance
            // of a framed rectangle
            //
            var visual = _compositor.CreateSpriteVisual();

            //
            // Position this visual randomly within our window
            //
            visual.Offset = new Vector2((float)(_random.NextDouble() * 400), (float)(_random.NextDouble() * 400));

            //
            // The outer rectangle is always white
            //
            visual.Brush = _compositor.CreateColorBrush( Color.FromArgb(0xFF, 0xFF, 0xFF, 0xFF) );
            visual.Size = new Vector2(100.0f, 100.0f);

            //
            // The inner rectangle is inset from the outer by three pixels all around
            //
            var child = _compositor.CreateSpriteVisual();
            visual.Children.InsertAtTop(child);
            child.Offset = new Vector2(3.0f, 3.0f);
            child.Size = new Vector2(94.0f, 94.0f);

            //
            // Pick a random color for every rectangle
            //
            byte red = (byte)(0xFF * (0.2f + (_random.NextDouble() / 0.8f)));
            byte green = (byte)(0xFF * (0.2f + (_random.NextDouble() / 0.8f)));
            byte blue = (byte)(0xFF * (0.2f + (_random.NextDouble() / 0.8f)));
            child.Brush = _compositor.CreateColorBrush( Color.FromArgb(0xFF, red, green, blue) );

            //
            // Make the subtree root visual partially transparent. This will cause each visual in the subtree
            // to render partially transparent, since a visual's opacity is multiplied with its parent's
            // opacity
            //
            visual.Opacity = 0.8f;

            return visual;
        }

        // CoreWindow / CoreApplicationView
        private CoreWindow _window;
        private CoreApplicationView _view;

        // Windows.UI.Composition
        private Compositor _compositor;
        private ContainerVisual _root;
        private Visual _currentVisual;
        private Vector2 _offsetBias;

        // Helpers
        private Random _random;
    }


    public sealed class VisualTreeFactory : IFrameworkViewSource
    {
        //------------------------------------------------------------------------------
        //
        // VisualTreeFactory.CreateView
        //
        // This method is called by CoreApplication to provide a new IFrameworkView for
        // a CoreWindow that is being created.
        //
        //------------------------------------------------------------------------------

        IFrameworkView IFrameworkViewSource.CreateView()
        {
            return new VisualTree();
        }

        //------------------------------------------------------------------------------
        //
        // main
        //
        //------------------------------------------------------------------------------

        static int Main(string[] args)
        {
            CoreApplication.Run(new VisualTreeFactory());

            return 0;
        }
    }

} // namespace VisualTreeCs

備註

物件是使用 Compositor 物件建立的。 組合物件只能是容器,也可以保存內容。 API 藉由為存在於階層中的特定工作 提供一組明確的 Visual 物件,讓使用更為便利:

  • Visual – 基底物件,大多數的屬性都在這裡,並且會被其他視覺物件繼承。

  • ContainerVisual – 衍生自 Visual,並且會新增建立子系的能力。

  • SpriteVisual – 衍生自 ContainerVisual,並以影像、效果和交換鏈的形式包含內容。

  • Compositor – 管理應用程式與系統撰寫器進程之間的關聯性。 動畫會更新任何可動畫撰寫物件的屬性 (,例如 Visual) 。 動畫有兩種類型:

  • KeyFrameAnimation:具有兩個或多個主要畫面格的時間型動畫。 這些畫面是標記,可讓開發人員定義動畫值在指定的時間應該是什麼。 動畫也可以藉由指定動畫插補 (如何混合) 主要畫面格之間的值,來微調動畫。 KeyFrameAnimation 有許多子類別,每個子類別都支援不同類型的主要畫面格值。

  • ExpressionAnimation:使用數學運算式來指定動畫值應如何計算每個畫面格的動畫。 運算式可以從組合物件參考屬性。 ExpressionAnimation不是以時間為基礎的,而且會視需要) 處理每個畫面格 (。

基本視覺效果

基本視覺效果 (,例如 SpriteVisual) 描述螢幕上的視覺內容,以及將套用至該內容的轉譯選項。

效果

效果可以附加至視覺化樹狀結構,以便對來源內容造成動態圖元變更,例如影像或視覺效果樹狀結構。

效果可以是簡單的作業,例如還原飽和、更複雜的作業,例如模糊,或非常複雜的 A B 混合作業,例如交叉淡出。

如需建立和使用效果的其他資訊,請參閱 CompositionEffectBrush 的備註一節。

版本歷程記錄

Windows 版本 SDK 版本 已新增值
1607 14393 註解
1607 14393 ImplicitAnimations
1607 14393 StartAnimationGroup
1607 14393 StopAnimationGroup
1709 16299 DispatcherQueue
1803 17134 TryGetAnimationController
1809 17763 PopulatePropertyInfo
1809 17763 StartAnimationGroupWithIAnimationObject
1809 17763 StartAnimationWithIAnimationObject

屬性

Comment

要與 CompositionObject 建立關聯的字串。

Compositor

用來建立這個CompositionObjectCompositor

Dispatcher

CompositionObject的發送器。

DispatcherQueue

取得 CompostionObject 的 DispatcherQueue

ImplicitAnimations

附加至這個物件的隱含動畫集合。

Properties

CompositionObject相關聯的屬性集合。

方法

Close()

關閉 CompositionObject 並釋放系統資源。

ConnectAnimation(String, CompositionAnimation)

連接和動畫。

DisconnectAnimation(String)

中斷動畫的連接。

Dispose()

執行與釋放 (Free)、釋放 (Release) 或重設 Unmanaged 資源相關聯之應用程式定義的工作。

PopulatePropertyInfo(String, AnimationPropertyInfo)

定義可以產生動畫效果的屬性。

StartAnimation(String, CompositionAnimation)

使用物件的指定屬性連接動畫,並啟動動畫。

StartAnimation(String, CompositionAnimation, AnimationController)

使用物件的指定屬性連接動畫,並啟動動畫。

StartAnimationGroup(ICompositionAnimationBase)

啟動動畫群組。

CompositionObject上的 StartAnimationGroup 方法可讓您啟動CompositionAnimationGroup。 群組中的所有動畫都會在 物件上同時啟動。

StartAnimationGroupWithIAnimationObject(IAnimationObject, ICompositionAnimationBase)

在指定的目標上啟動動畫群組。

StartAnimationWithIAnimationObject(IAnimationObject, String, CompositionAnimation)

使用目標物件的指定屬性連接動畫,並啟動動畫。

StopAnimation(String)

中斷與指定屬性的動畫連線,並停止動畫。

StopAnimationGroup(ICompositionAnimationBase)

停止動畫群組。

TryGetAnimationController(String)

傳回在指定屬性上執行的動畫的 AnimationController。

適用於

另請參閱