使用 WPF 的視覺圖層

你可以在Windows Presentation Foundation（WPF）應用程式中使用Windows 執行階段 Composition API（也稱為 Visual 層）來創造讓Windows使用者煥然一新的現代體驗。

本教學的完整程式碼可在 GitHub 取得：WPF HelloComposition 範例。

先決條件

UWP XAML 主機 API 具備這些先決條件。

我們假設你對使用 WPF 和 UWP 的應用程式開發有一定熟悉。如需詳細資訊，請參閱:
.NET Framework 4.7.2 或更新版本
Windows 10 版本 1803 或更新版本
Windows 10 SDK 17134 或更新版本

如何在 WPF 中使用 Composition API

在這個教學中，你會建立一個簡單的 WPF 應用程式介面，並加入動畫合成元素。 WPF 與 Composition 元件都保持簡單，但顯示的互通程式碼無論元件複雜度如何，都是相同的。完成的應用程式看起來像這樣。

執行中的應用程式 UI

建立 WPF 專案

第一步是建立 WPF 應用程式專案，其中包含應用程式定義及 XAML 介面頁面。

要建立一個名為 HelloComposition 的 Visual C# WPF 應用程式專案：

開啟 Visual Studio，然後選取 [檔案]>[新增]>[專案]。

新專案對話框會打開。
在 Installation 類別中，展開 Visual C# 節點，然後選擇 Windows Desktop。
選擇 WPF 應用程式（.NET 框架） 範本。
輸入名稱 HelloComposition，選擇 Framework .NET Framework 4.7.2，然後點選 OK。

Visual Studio 建立專案後，開啟預設應用程式視窗 MainWindow.xaml 的設計器。

將專案設定為使用 Windows 執行階段 API

要在你的 WPF 應用程式中使用 Windows 執行階段（WinRT）API，你需要設定 Visual Studio 專案以存取 Windows 執行階段。此外，Composition API 廣泛使用向量，因此你需要加入使用向量所需的參考資料。

NuGet 套件可滿足這兩種需求。安裝這些套件的最新版本，來為你的專案加入必要的引用。

Microsoft.Windows。SDK。Contracts（需要預設的套件管理格式設定為 PackageReference。）
系統、數值、向量

Note

我們建議使用 NuGet 套件來設定專案，但你也可以手動新增所需的參考資料。欲了解更多資訊，請參閱提升您的桌面應用程式Windows。下表顯示你需要新增參考的檔案。

檔案	位置
System.Runtime.WindowsRuntime	C：\Windows\Microsoft.NET\Framework\v4.0.30319
Windows.Foundation.UniversalApiContract.winmd	C:\Program Files （x86）\Windows Kits\10\References<sdk 版本>\Windows\Foundation\UniversalApiContract<版本>
Windows.Foundation.FoundationContract.winmd	C：\Program Files （x86）\Windows Kits\10\References<sdk 版本>\Windows.Foundation.FoundationContract<版本>
System.Numerics.Vectors.dll	C：\WINDOWS\Microsoft.Net\assembly\GAC_MSIL\System.Numerics.Vectors\v4.0_4.0.0.0__b03f5f7f11d50a3a
System.Numerics.dll	C：\Program Files （x86）\Reference Assemblies\Microsoft\Framework.NETFramework\v4.7.2

將專案設定為支援每個螢幕的 DPI

你加到應用程式上的視覺圖層內容不會自動縮放到顯示螢幕的 DPI 設定上。你需要為應用程式啟用每個螢幕的 DPI 感知，然後確保你用來建立視覺圖層內容的程式碼，能考慮應用程式執行時的當前 DPI 縮放。在這裡，我們會將專案設定為 DPI 感知。在後面的章節中，我們將展示如何利用 DPI 資訊來縮放視覺圖層內容。

WPF 應用程式預設是系統 DPI 支援，但需要在 app.manifest 檔案中宣告自己是每個螢幕的 DPI 支援。要在應用程式清單檔案中開啟 Windows 層級的每螢幕 DPI 感知：

在 方案總管 中，以滑鼠右鍵按一下 HelloComposition 專案。
在右鍵選單中，選擇新增>項目...。
在 新增項目 對話框中，選擇「Application Manifest File」，然後點 選新增。（你可以保留預設名稱。）

在 app.manifest 檔案中，找到這個 xml 並取消註解：

<application xmlns="urn:schemas-microsoft-com:asm.v3">
    <windowsSettings>
      <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true</dpiAware>
    </windowsSettings>
  </application>

在<windowsSettings> 標籤首部加入這個設定：

      <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">PerMonitor</dpiAwareness>

你還需要在 App.config 檔案中設定 DoNotScaleForDpiChanges 的設定。

打開 App.Config，並在元素 <configuration> 中加入這個 xml：
```
<runtime>
  <AppContextSwitchOverrides value="Switch.System.Windows.DoNotScaleForDpiChanges=false"/>
</runtime>
```

Note

AppContextSwitchOverrides 只能設定一次。如果您的應用程式已經有一組配置，您必須在 value 屬性中使用分號來分隔這個開關。

（更多資訊請參考Per Monitor DPI 開發者指南及範例 GitHub。）

建立一個由 HwndHost 衍生的類別來承載組合元素

要架設你用視覺圖層創作的內容，你需要建立一個源自 HwndHost 的類別。這裡是你用來配置 Composition API 託管的大部分設定的地方。在這堂課中，你會使用 Platform Invocation Services （PInvoke）和 COM Interop 將 Composition API 帶入你的 WPF 應用程式。欲了解更多關於 PInvoke 與 COM 互通的資訊，請參見「與非管理程式碼的互通」。

小提示

如有需要，請在本教學課程最後檢查完整的程式碼，以確保當您逐步進行教學課程時，所有程式碼皆位於正確的位置。

在你的專案中新增一個來自 HwndHost 的類別檔案。
- 在 方案總管 中，以滑鼠右鍵按一下 HelloComposition 專案。
- 在內容功能表中，選取 [新增]>[類別...]。
- 在 新增物品 對話框中，為類別命名 為 CompositionHost.cs，然後點擊新增。

在 CompositionHost.cs 中，編輯類別定義以衍生自 HwndHost。

// Add
// using System.Windows.Interop;

namespace HelloComposition
{
    class CompositionHost : HwndHost
    {
    }
}

將以下程式碼與構造子加入類別。

// Add
// using Windows.UI.Composition;

IntPtr hwndHost;
int hostHeight, hostWidth;
object dispatcherQueue;
ICompositionTarget compositionTarget;

public Compositor Compositor { get; private set; }

public Visual Child
{
    set
    {
        if (Compositor == null)
        {
            InitComposition(hwndHost);
        }
        compositionTarget.Root = value;
    }
}

internal const int
  WS_CHILD = 0x40000000,
  WS_VISIBLE = 0x10000000,
  LBS_NOTIFY = 0x00000001,
  HOST_ID = 0x00000002,
  LISTBOX_ID = 0x00000001,
  WS_VSCROLL = 0x00200000,
  WS_BORDER = 0x00800000;

public CompositionHost(double height, double width)
{
    hostHeight = (int)height;
    hostWidth = (int)width;
}

覆寫 BuildWindowCore 與 DestroyWindowCore 方法。

Note

在 BuildWindowCore 中，你會呼叫 InitializeCoreDispatcher 和 InitComposition 方法。在後續步驟中會建立上述方法。

// Add
// using System.Runtime.InteropServices;

protected override HandleRef BuildWindowCore(HandleRef hwndParent)
{
    // Create Window
    hwndHost = IntPtr.Zero;
    hwndHost = CreateWindowEx(0, "static", "",
                              WS_CHILD | WS_VISIBLE,
                              0, 0,
                              hostWidth, hostHeight,
                              hwndParent.Handle,
                              (IntPtr)HOST_ID,
                              IntPtr.Zero,
                              0);

    // Create Dispatcher Queue
    dispatcherQueue = InitializeCoreDispatcher();

    // Build Composition tree of content
    InitComposition(hwndHost);

    return new HandleRef(this, hwndHost);
}

protected override void DestroyWindowCore(HandleRef hwnd)
{
    if (compositionTarget.Root != null)
    {
        compositionTarget.Root.Dispose();
    }
    DestroyWindow(hwnd.Handle);
}

CreateWindowEx 和 DestroyWindow 需要 PInvoke 宣告。將這個宣告放在類別程式碼的末尾。

#region PInvoke declarations

[DllImport("user32.dll", EntryPoint = "CreateWindowEx", CharSet = CharSet.Unicode)]
internal static extern IntPtr CreateWindowEx(int dwExStyle,
                                              string lpszClassName,
                                              string lpszWindowName,
                                              int style,
                                              int x, int y,
                                              int width, int height,
                                              IntPtr hwndParent,
                                              IntPtr hMenu,
                                              IntPtr hInst,
                                              [MarshalAs(UnmanagedType.AsAny)] object pvParam);

[DllImport("user32.dll", EntryPoint = "DestroyWindow", CharSet = CharSet.Unicode)]
internal static extern bool DestroyWindow(IntPtr hwnd);

#endregion PInvoke declarations

用 CoreDispatcher 初始化一個執行緒。核心調度器負責處理視窗訊息並派發 WinRT API 的事件。必須在擁有 CoreDispatcher 的執行緒上建立新的 CoreDispatcher 實例。

建立一個名為 InitializeCoreDispatcher 的方法，並新增程式碼來設定調度器佇列。

private object InitializeCoreDispatcher()
{
    DispatcherQueueOptions options = new DispatcherQueueOptions();
    options.apartmentType = DISPATCHERQUEUE_THREAD_APARTMENTTYPE.DQTAT_COM_STA;
    options.threadType = DISPATCHERQUEUE_THREAD_TYPE.DQTYPE_THREAD_CURRENT;
    options.dwSize = Marshal.SizeOf(typeof(DispatcherQueueOptions));

    object queue = null;
    CreateDispatcherQueueController(options, out queue);
    return queue;
}

調度器佇列也需要 PInvoke 宣告。將此宣告放入你在前一步建立的 Pinvoke 宣告 區域中。

//typedef enum DISPATCHERQUEUE_THREAD_APARTMENTTYPE
//{
//    DQTAT_COM_NONE,
//    DQTAT_COM_ASTA,
//    DQTAT_COM_STA
//};
internal enum DISPATCHERQUEUE_THREAD_APARTMENTTYPE
{
    DQTAT_COM_NONE = 0,
    DQTAT_COM_ASTA = 1,
    DQTAT_COM_STA = 2
};

//typedef enum DISPATCHERQUEUE_THREAD_TYPE
//{
//    DQTYPE_THREAD_DEDICATED,
//    DQTYPE_THREAD_CURRENT
//};
internal enum DISPATCHERQUEUE_THREAD_TYPE
{
    DQTYPE_THREAD_DEDICATED = 1,
    DQTYPE_THREAD_CURRENT = 2,
};

//struct DispatcherQueueOptions
//{
//    DWORD dwSize;
//    DISPATCHERQUEUE_THREAD_TYPE threadType;
//    DISPATCHERQUEUE_THREAD_APARTMENTTYPE apartmentType;
//};
[StructLayout(LayoutKind.Sequential)]
internal struct DispatcherQueueOptions
{
    public int dwSize;

    [MarshalAs(UnmanagedType.I4)]
    public DISPATCHERQUEUE_THREAD_TYPE threadType;

    [MarshalAs(UnmanagedType.I4)]
    public DISPATCHERQUEUE_THREAD_APARTMENTTYPE apartmentType;
};

//HRESULT CreateDispatcherQueueController(
//  DispatcherQueueOptions options,
//  ABI::Windows::System::IDispatcherQueueController** dispatcherQueueController
//);
[DllImport("coremessaging.dll", EntryPoint = "CreateDispatcherQueueController", CharSet = CharSet.Unicode)]
internal static extern IntPtr CreateDispatcherQueueController(DispatcherQueueOptions options,
                                        [MarshalAs(UnmanagedType.IUnknown)]
                                        out object dispatcherQueueController);

你現在已經準備好調度器佇列，可以開始初始化和建立 Composition 內容。

初始化合成器。合成器是在Windows.UI.Composition命名空間中創建的工廠，負責生成多種類型的元件，包括視覺效果系統和動畫系統。合成器類別同時管理從工廠產生物件的生命週期。

private void InitComposition(IntPtr hwndHost)
{
    ICompositorDesktopInterop interop;

    compositor = new Compositor();
    object iunknown = compositor as object;
    interop = (ICompositorDesktopInterop)iunknown;
    IntPtr raw;
    interop.CreateDesktopWindowTarget(hwndHost, true, out raw);

    object rawObject = Marshal.GetObjectForIUnknown(raw);
    ICompositionTarget target = (ICompositionTarget)rawObject;

    if (raw == null) { throw new Exception("QI Failed"); }
}

ICompositorDesktopInterop 與 ICompositionTarget 需要 COM 匯入。將此程式碼放在 CompositionHost 類別之後，但位於命名空間宣告內。

#region COM Interop

/*
#undef INTERFACE
#define INTERFACE ICompositorDesktopInterop
    DECLARE_INTERFACE_IID_(ICompositorDesktopInterop, IUnknown, "29E691FA-4567-4DCA-B319-D0F207EB6807")
    {
        IFACEMETHOD(CreateDesktopWindowTarget)(
            _In_ HWND hwndTarget,
            _In_ BOOL isTopmost,
            _COM_Outptr_ IDesktopWindowTarget * *result
            ) PURE;
    };
*/
[ComImport]
[Guid("29E691FA-4567-4DCA-B319-D0F207EB6807")]
[InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
public interface ICompositorDesktopInterop
{
    void CreateDesktopWindowTarget(IntPtr hwndTarget, bool isTopmost, out IntPtr test);
}

//[contract(Windows.Foundation.UniversalApiContract, 2.0)]
//[exclusiveto(Windows.UI.Composition.CompositionTarget)]
//[uuid(A1BEA8BA - D726 - 4663 - 8129 - 6B5E7927FFA6)]
//interface ICompositionTarget : IInspectable
//{
//    [propget] HRESULT Root([out] [retval] Windows.UI.Composition.Visual** value);
//    [propput] HRESULT Root([in] Windows.UI.Composition.Visual* value);
//}

[ComImport]
[Guid("A1BEA8BA-D726-4663-8129-6B5E7927FFA6")]
[InterfaceType(ComInterfaceType.InterfaceIsIInspectable)]
public interface ICompositionTarget
{
    Windows.UI.Composition.Visual Root
    {
        get;
        set;
    }
}

#endregion COM Interop

建立一個 UserControl 來將你的內容加入 WPF 視覺樹

建立承載 Composition 內容所需的基礎設施的最後一步，是將 HwndHost 加入 WPF 視覺樹。

建立使用者控制項

UserControl 是一種方便的方式，可以打包創建和管理 Composition 內容的程式碼，並輕鬆將內容加入你的 XAML。

為你的專案新增一個使用者控制檔案。
- 在 方案總管 中，以滑鼠右鍵按一下 HelloComposition 專案。
- 在右鍵選單中，選擇 「新增>使用者控制......」。
- 在 新增項目 對話框中，將使用者控制項命名為 CompositionHostControl.xaml，然後點 選新增。
CompositionHostControl.xaml 和 CompositionHostControl.xaml.cs 檔案都會被建立並加入你的專案。
在 CompositionHostControl.xaml 中，將 <Grid> </Grid> 標籤替換為這個 Border 元素，它是您的 HwndHost 將要放置的 XAML 容器。
```
<Border Name="CompositionHostElement"/>
```

在使用者控制的程式碼中，你可以建立你在前一步建立的 CompositionHost 類別的實例，並將其作為 CompositionHostElement（你在 XAML 頁面中建立的邊界）的子元素加入。

在CompositionHostControl.xaml.cs中，為你在 Composition 程式碼中使用的物件加入私有變數。把這些加在類定義之後。
```
CompositionHost compositionHost;
Compositor compositor;
Windows.UI.Composition.ContainerVisual containerVisual;
DpiScale currentDpi;
```

新增一個處理程式來處理使用者控制項的 Loaded 事件。這裡是你建立 CompositionHost 實例的地方。

在建構子中，依照這裡Loaded += CompositionHostControl_Loaded;所示連接事件處理程序（）。

public CompositionHostControl()
{
    InitializeComponent();
    Loaded += CompositionHostControl_Loaded;
}

新增名為 CompositionHostControl_Loaded 的事件處理方法。

private void CompositionHostControl_Loaded(object sender, RoutedEventArgs e)
{
    // If the user changes the DPI scale setting for the screen the app is on,
    // the CompositionHostControl is reloaded. Don't redo this set up if it's
    // already been done.
    if (compositionHost is null)
    {
        currentDpi = VisualTreeHelper.GetDpi(this);

        compositionHost =
            new CompositionHost(ControlHostElement.ActualHeight, ControlHostElement.ActualWidth);
        ControlHostElement.Child = compositionHost;
        compositor = compositionHost.Compositor;
        containerVisual = compositor.CreateContainerVisual();
        compositionHost.Child = containerVisual;
    }
}

在這個方法中，你會設定你在 Composition 程式碼中使用的物件。以下是目前情況的快速一覽。

首先，確保設定只完成一次，檢查是否有 CompositionHost 實例存在。

// If the user changes the DPI scale setting for the screen the app is on,
// the CompositionHostControl is reloaded. Don't redo this set up if it's
// already been done.
if (compositionHost is null)
{

}

取得目前的 DPI。這用來正確縮放你的構圖元素。

currentDpi = VisualTreeHelper.GetDpi(this);

建立一個 CompositionHost 實例，並將其指派為邊界的子節點 CompositionHostElement。

compositionHost =
    new CompositionHost(ControlHostElement.ActualHeight, ControlHostElement.ActualWidth);
ControlHostElement.Child = compositionHost;

從 CompositionHost 取得合成器。

compositor = compositionHost.Compositor;

使用 Compositor 建立容器的視覺效果。這是你用來加入文章元素的作文容器。

containerVisual = compositor.CreateContainerVisual();
compositionHost.Child = containerVisual;

新增組合元素

基礎結構已就緒之後，即可產生要顯示的 Compositio 內容。

在這個例子中，你加入了程式碼來建立並動畫一個簡單的方形 SpriteVisual。

新增組合元素。在 CompositionHostControl.xaml.cs，將這些方法加入 CompositionHostControl 類別。

// Add
// using System.Numerics;

public void AddElement(float size, float offsetX, float offsetY)
{
    var visual = compositor.CreateSpriteVisual();
    visual.Size = new Vector2(size, size);
    visual.Scale = new Vector3((float)currentDpi.DpiScaleX, (float)currentDpi.DpiScaleY, 1);
    visual.Brush = compositor.CreateColorBrush(GetRandomColor());
    visual.Offset = new Vector3(offsetX * (float)currentDpi.DpiScaleX, offsetY * (float)currentDpi.DpiScaleY, 0);

    containerVisual.Children.InsertAtTop(visual);

    AnimateSquare(visual, 3);
}

private void AnimateSquare(SpriteVisual visual, int delay)
{
    float offsetX = (float)(visual.Offset.X); // Already adjusted for DPI.

    // Adjust values for DPI scale, then find the Y offset that aligns the bottom of the square
    // with the bottom of the host container. This is the value to animate to.
    var hostHeightAdj = CompositionHostElement.ActualHeight * currentDpi.DpiScaleY;
    var squareSizeAdj = visual.Size.Y * currentDpi.DpiScaleY;
    float bottom = (float)(hostHeightAdj - squareSizeAdj);

    // Create the animation only if it's needed.
    if (visual.Offset.Y != bottom)
    {
        Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
        animation.InsertKeyFrame(1f, new Vector3(offsetX, bottom, 0f));
        animation.Duration = TimeSpan.FromSeconds(2);
        animation.DelayTime = TimeSpan.FromSeconds(delay);
        visual.StartAnimation("Offset", animation);
    }
}

private Windows.UI.Color GetRandomColor()
{
    Random random = new Random();
    byte r = (byte)random.Next(0, 255);
    byte g = (byte)random.Next(0, 255);
    byte b = (byte)random.Next(0, 255);
    return Windows.UI.Color.FromArgb(255, r, g, b);
}

處理 DPI 變更

新增和動畫元素的程式碼會考慮建立元素時的當前 DPI 比例，但你也需要考慮應用程式執行時的 DPI 變化。你可以處理 HwndHost.DpiChanged 事件，接收變更通知，並根據新的 DPI 調整計算。

在 CompositionHostControl_Loaded 方法的最後一行後，加入這段代碼來繫結 DpiChanged 事件處理程序。
```
compositionHost.DpiChanged += CompositionHost_DpiChanged;
```

新增名為 CompositionHostDpiChanged 的事件處理方法。這段程式碼會調整每個元素的縮放和偏移，並重新計算未完成的動畫。

private void CompositionHost_DpiChanged(object sender, DpiChangedEventArgs e)
{
    currentDpi = e.NewDpi;
    Vector3 newScale = new Vector3((float)e.NewDpi.DpiScaleX, (float)e.NewDpi.DpiScaleY, 1);

    foreach (SpriteVisual child in containerVisual.Children)
    {
        child.Scale = newScale;
        var newOffsetX = child.Offset.X * ((float)e.NewDpi.DpiScaleX / (float)e.OldDpi.DpiScaleX);
        var newOffsetY = child.Offset.Y * ((float)e.NewDpi.DpiScaleY / (float)e.OldDpi.DpiScaleY);
        child.Offset = new Vector3(newOffsetX, newOffsetY, 1);

        // Adjust animations for DPI change.
        AnimateSquare(child, 0);
    }
}

把使用者控制項加到你的 XAML 頁面

現在，你可以把使用者控制功能加入你的 XAML 介面。

在 MainWindow.xaml 中，將視窗高度設為 600，寬度設為 840。

新增 XAML 來做介面。在 MainWindow.xaml 中，將這個 XAML 加入根 <Grid> </Grid> 標籤之間。

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="210"/>
    <ColumnDefinition Width="600"/>
    <ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="46"/>
    <RowDefinition/>
</Grid.RowDefinitions>
<Button Content="Add composition element" Click="Button_Click"
        Grid.Row="1" Margin="12,0"
        VerticalAlignment="Top" Height="40"/>
<TextBlock Text="Composition content" FontSize="20"
           Grid.Column="1" Margin="0,12,0,4"
           HorizontalAlignment="Center"/>
<local:CompositionHostControl x:Name="CompositionHostControl1"
                              Grid.Row="1" Grid.Column="1"
                              VerticalAlignment="Top"
                              Width="600" Height="500"
                              BorderBrush="LightGray"
                              BorderThickness="3"/>

操作按鈕點擊以建立新元素。（點擊事件已經在 XAML 中連接好了。）

MainWindow.xaml.cs，加入這個 Button_Click 事件處理方法。此程式碼呼叫 CompositionHost.AddElement ，建立一個大小與偏移量隨機的新元素。

// Add
// using System;

private void Button_Click(object sender, RoutedEventArgs e)
{
    Random random = new Random();
    float size = random.Next(50, 150);
    float offsetX = random.Next(0, (int)(CompositionHostControl1.ActualWidth - size));
    float offsetY = random.Next(0, (int)(CompositionHostControl1.ActualHeight/2 - size));
    CompositionHostControl1.AddElement(size, offsetX, offsetY);
}

你現在可以建立並執行你的 WPF 應用程式。如有需要，請查看本教學課程結尾的完整程式碼，確定所有程式碼的位置皆正確。

當您執行應用程式，並按一下按鈕時，應該會看見新增到 UI 的動畫方塊。

下一步

若想了解基於相同基礎設施的完整範例，請參閱GitHub上的 WPF 視覺圖層整合範例。

其他資源

完整程式碼

這是這個教學的完整程式碼。

MainWindow.xaml

<Window x:Class="HelloComposition.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:HelloComposition"
        mc:Ignorable="d"
        Title="MainWindow" Height="600" Width="840">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="210"/>
            <ColumnDefinition Width="600"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="46"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Button Content="Add composition element" Click="Button_Click"
                Grid.Row="1" Margin="12,0"
                VerticalAlignment="Top" Height="40"/>
        <TextBlock Text="Composition content" FontSize="20"
                   Grid.Column="1" Margin="0,12,0,4"
                   HorizontalAlignment="Center"/>
        <local:CompositionHostControl x:Name="CompositionHostControl1"
                                      Grid.Row="1" Grid.Column="1"
                                      VerticalAlignment="Top"
                                      Width="600" Height="500"
                                      BorderBrush="LightGray" BorderThickness="3"/>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Windows;

namespace HelloComposition
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Random random = new Random();
            float size = random.Next(50, 150);
            float offsetX = random.Next(0, (int)(CompositionHostControl1.ActualWidth - size));
            float offsetY = random.Next(0, (int)(CompositionHostControl1.ActualHeight/2 - size));
            CompositionHostControl1.AddElement(size, offsetX, offsetY);
        }
    }
}

CompositionHostControl.xaml

<UserControl x:Class="HelloComposition.CompositionHostControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:HelloComposition"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
    <Border Name="CompositionHostElement"/>
</UserControl>

CompositionHostControl.xaml.cs

using System;
using System.Numerics;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using Windows.UI.Composition;

namespace HelloComposition
{
    /// <summary>
    /// Interaction logic for CompositionHostControl.xaml
    /// </summary>
    public partial class CompositionHostControl : UserControl
    {
        CompositionHost compositionHost;
        Compositor compositor;
        Windows.UI.Composition.ContainerVisual containerVisual;
        DpiScale currentDpi;

        public CompositionHostControl()
        {
            InitializeComponent();
            Loaded += CompositionHostControl_Loaded;
        }

        private void CompositionHostControl_Loaded(object sender, RoutedEventArgs e)
        {
            // If the user changes the DPI scale setting for the screen the app is on,
            // the CompositionHostControl is reloaded. Don't redo this set up if it's
            // already been done.
            if (compositionHost is null)
            {
                currentDpi = VisualTreeHelper.GetDpi(this);

                compositionHost = new CompositionHost(CompositionHostElement.ActualHeight, CompositionHostElement.ActualWidth);
                CompositionHostElement.Child = compositionHost;
                compositor = compositionHost.Compositor;
                containerVisual = compositor.CreateContainerVisual();
                compositionHost.Child = containerVisual;
            }
        }

        protected override void OnDpiChanged(DpiScale oldDpi, DpiScale newDpi)
        {
            base.OnDpiChanged(oldDpi, newDpi);
            currentDpi = newDpi;
            Vector3 newScale = new Vector3((float)newDpi.DpiScaleX, (float)newDpi.DpiScaleY, 1);

            foreach (SpriteVisual child in containerVisual.Children)
            {
                child.Scale = newScale;
                var newOffsetX = child.Offset.X * ((float)newDpi.DpiScaleX / (float)oldDpi.DpiScaleX);
                var newOffsetY = child.Offset.Y * ((float)newDpi.DpiScaleY / (float)oldDpi.DpiScaleY);
                child.Offset = new Vector3(newOffsetX, newOffsetY, 1);

                // Adjust animations for DPI change.
                AnimateSquare(child, 0);
            }
        }

        public void AddElement(float size, float offsetX, float offsetY)
        {
            var visual = compositor.CreateSpriteVisual();
            visual.Size = new Vector2(size, size);
            visual.Scale = new Vector3((float)currentDpi.DpiScaleX, (float)currentDpi.DpiScaleY, 1);
            visual.Brush = compositor.CreateColorBrush(GetRandomColor());
            visual.Offset = new Vector3(offsetX * (float)currentDpi.DpiScaleX, offsetY * (float)currentDpi.DpiScaleY, 0);

            containerVisual.Children.InsertAtTop(visual);

            AnimateSquare(visual, 3);
        }

        private void AnimateSquare(SpriteVisual visual, int delay)
        {
            float offsetX = (float)(visual.Offset.X); // Already adjusted for DPI.

            // Adjust values for DPI scale, then find the Y offset that aligns the bottom of the square
            // with the bottom of the host container. This is the value to animate to.
            var hostHeightAdj = CompositionHostElement.ActualHeight * currentDpi.DpiScaleY;
            var squareSizeAdj = visual.Size.Y * currentDpi.DpiScaleY;
            float bottom = (float)(hostHeightAdj - squareSizeAdj);

            // Create the animation only if it's needed.
            if (visual.Offset.Y != bottom)
            {
                Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
                animation.InsertKeyFrame(1f, new Vector3(offsetX, bottom, 0f));
                animation.Duration = TimeSpan.FromSeconds(2);
                animation.DelayTime = TimeSpan.FromSeconds(delay);
                visual.StartAnimation("Offset", animation);
            }
        }

        private Windows.UI.Color GetRandomColor()
        {
            Random random = new Random();
            byte r = (byte)random.Next(0, 255);
            byte g = (byte)random.Next(0, 255);
            byte b = (byte)random.Next(0, 255);
            return Windows.UI.Color.FromArgb(255, r, g, b);
        }
    }
}

CompositionHost.cs

using System;
using System.Runtime.InteropServices;
using System.Windows.Interop;
using Windows.UI.Composition;

namespace HelloComposition
{
    class CompositionHost : HwndHost
    {
        IntPtr hwndHost;
        int hostHeight, hostWidth;
        object dispatcherQueue;
        ICompositionTarget compositionTarget;

        public Compositor Compositor { get; private set; }

        public Visual Child
        {
            set
            {
                if (Compositor == null)
                {
                    InitComposition(hwndHost);
                }
                compositionTarget.Root = value;
            }
        }

        internal const int
          WS_CHILD = 0x40000000,
          WS_VISIBLE = 0x10000000,
          LBS_NOTIFY = 0x00000001,
          HOST_ID = 0x00000002,
          LISTBOX_ID = 0x00000001,
          WS_VSCROLL = 0x00200000,
          WS_BORDER = 0x00800000;

        public CompositionHost(double height, double width)
        {
            hostHeight = (int)height;
            hostWidth = (int)width;
        }

        protected override HandleRef BuildWindowCore(HandleRef hwndParent)
        {
            // Create Window
            hwndHost = IntPtr.Zero;
            hwndHost = CreateWindowEx(0, "static", "",
                                      WS_CHILD | WS_VISIBLE,
                                      0, 0,
                                      hostWidth, hostHeight,
                                      hwndParent.Handle,
                                      (IntPtr)HOST_ID,
                                      IntPtr.Zero,
                                      0);

            // Create Dispatcher Queue
            dispatcherQueue = InitializeCoreDispatcher();

            // Build Composition Tree of content
            InitComposition(hwndHost);

            return new HandleRef(this, hwndHost);
        }

        protected override void DestroyWindowCore(HandleRef hwnd)
        {
            if (compositionTarget.Root != null)
            {
                compositionTarget.Root.Dispose();
            }
            DestroyWindow(hwnd.Handle);
        }

        private object InitializeCoreDispatcher()
        {
            DispatcherQueueOptions options = new DispatcherQueueOptions();
            options.apartmentType = DISPATCHERQUEUE_THREAD_APARTMENTTYPE.DQTAT_COM_STA;
            options.threadType = DISPATCHERQUEUE_THREAD_TYPE.DQTYPE_THREAD_CURRENT;
            options.dwSize = Marshal.SizeOf(typeof(DispatcherQueueOptions));

            object queue = null;
            CreateDispatcherQueueController(options, out queue);
            return queue;
        }

        private void InitComposition(IntPtr hwndHost)
        {
            ICompositorDesktopInterop interop;

            Compositor = new Compositor();
            object iunknown = Compositor as object;
            interop = (ICompositorDesktopInterop)iunknown;
            IntPtr raw;
            interop.CreateDesktopWindowTarget(hwndHost, true, out raw);

            object rawObject = Marshal.GetObjectForIUnknown(raw);
            compositionTarget = (ICompositionTarget)rawObject;

            if (raw == null) { throw new Exception("QI Failed"); }
        }

        #region PInvoke declarations

        //typedef enum DISPATCHERQUEUE_THREAD_APARTMENTTYPE
        //{
        //    DQTAT_COM_NONE,
        //    DQTAT_COM_ASTA,
        //    DQTAT_COM_STA
        //};
        internal enum DISPATCHERQUEUE_THREAD_APARTMENTTYPE
        {
            DQTAT_COM_NONE = 0,
            DQTAT_COM_ASTA = 1,
            DQTAT_COM_STA = 2
        };

        //typedef enum DISPATCHERQUEUE_THREAD_TYPE
        //{
        //    DQTYPE_THREAD_DEDICATED,
        //    DQTYPE_THREAD_CURRENT
        //};
        internal enum DISPATCHERQUEUE_THREAD_TYPE
        {
            DQTYPE_THREAD_DEDICATED = 1,
            DQTYPE_THREAD_CURRENT = 2,
        };

        //struct DispatcherQueueOptions
        //{
        //    DWORD dwSize;
        //    DISPATCHERQUEUE_THREAD_TYPE threadType;
        //    DISPATCHERQUEUE_THREAD_APARTMENTTYPE apartmentType;
        //};
        [StructLayout(LayoutKind.Sequential)]
        internal struct DispatcherQueueOptions
        {
            public int dwSize;

            [MarshalAs(UnmanagedType.I4)]
            public DISPATCHERQUEUE_THREAD_TYPE threadType;

            [MarshalAs(UnmanagedType.I4)]
            public DISPATCHERQUEUE_THREAD_APARTMENTTYPE apartmentType;
        };

        //HRESULT CreateDispatcherQueueController(
        //  DispatcherQueueOptions options,
        //  ABI::Windows::System::IDispatcherQueueController** dispatcherQueueController
        //);
        [DllImport("coremessaging.dll", EntryPoint = "CreateDispatcherQueueController", CharSet = CharSet.Unicode)]
        internal static extern IntPtr CreateDispatcherQueueController(DispatcherQueueOptions options,
                                                [MarshalAs(UnmanagedType.IUnknown)]
                                               out object dispatcherQueueController);


        [DllImport("user32.dll", EntryPoint = "CreateWindowEx", CharSet = CharSet.Unicode)]
        internal static extern IntPtr CreateWindowEx(int dwExStyle,
                                                      string lpszClassName,
                                                      string lpszWindowName,
                                                      int style,
                                                      int x, int y,
                                                      int width, int height,
                                                      IntPtr hwndParent,
                                                      IntPtr hMenu,
                                                      IntPtr hInst,
                                                      [MarshalAs(UnmanagedType.AsAny)] object pvParam);

        [DllImport("user32.dll", EntryPoint = "DestroyWindow", CharSet = CharSet.Unicode)]
        internal static extern bool DestroyWindow(IntPtr hwnd);


        #endregion PInvoke declarations

    }
    #region COM Interop

    /*
    #undef INTERFACE
    #define INTERFACE ICompositorDesktopInterop
        DECLARE_INTERFACE_IID_(ICompositorDesktopInterop, IUnknown, "29E691FA-4567-4DCA-B319-D0F207EB6807")
        {
            IFACEMETHOD(CreateDesktopWindowTarget)(
                _In_ HWND hwndTarget,
                _In_ BOOL isTopmost,
                _COM_Outptr_ IDesktopWindowTarget * *result
                ) PURE;
        };
    */
    [ComImport]
    [Guid("29E691FA-4567-4DCA-B319-D0F207EB6807")]
    [InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
    public interface ICompositorDesktopInterop
    {
        void CreateDesktopWindowTarget(IntPtr hwndTarget, bool isTopmost, out IntPtr test);
    }

    //[contract(Windows.Foundation.UniversalApiContract, 2.0)]
    //[exclusiveto(Windows.UI.Composition.CompositionTarget)]
    //[uuid(A1BEA8BA - D726 - 4663 - 8129 - 6B5E7927FFA6)]
    //interface ICompositionTarget : IInspectable
    //{
    //    [propget] HRESULT Root([out] [retval] Windows.UI.Composition.Visual** value);
    //    [propput] HRESULT Root([in] Windows.UI.Composition.Visual* value);
    //}

    [ComImport]
    [Guid("A1BEA8BA-D726-4663-8129-6B5E7927FFA6")]
    [InterfaceType(ComInterfaceType.InterfaceIsIInspectable)]
    public interface ICompositionTarget
    {
        Windows.UI.Composition.Visual Root
        {
            get;
            set;
        }
    }

    #endregion COM Interop
}

意見反應

此頁面對您有幫助嗎？

Last updated on 2026-05-02