除了 DirectX 游戏开发，我们一般很少单独使用 UI Composition ，因此，与 XAML 互动并集成是一定功效。这样能够把两者的优势混合使用，让UI构造能够更灵活。
说到与 XAML 的集成，则我们必需先认识一位伴计，他非常重要，位于 Windows.UI.Xaml.Hosting 定名空间下，名叫 ElementCompositionPreview ，有了它，我们才可以在 XAML 元素与 Composition UI 元素之间游走。来看看它都果然了哪些成员。
public sealed class ElementCompositionPreview : IElementCompositionPreview { public static void SetImplicitShowAnimation(UIElement element, ICompositionAnimationBase animation); public static void SetImplicitHideAnimation(UIElement element, ICompositionAnimationBase animation); public static void SetIsTranslationEnabled(UIElement element, bool value); public static CompositionPropertySet GetPointerPositionPropertySet(UIElement targetElement); public static Visual GetElementVisual(UIElement element); public static Visual GetElementChildVisual(UIElement element); public static void SetElementChildVisual(UIElement element, Visual visual); public static CompositionPropertySet GetScrollViewerManipulationPropertySet(ScrollViewer scrollViewer); }
这个类果然的要领都是静态的，无需实例挪用。我们不要急于弄懂每个要领的感化，这样会把本身带入死胡同。此处，我们先重点掌握以下几个要领的用法。
1、GetElementVisual：要使 XAML 元素与 Composition API 交互，这个要领出格要紧，通过挪用它，我们可以得到 XAML 元素中的 Composition UI 树的暗示元素，并且能获取到关联的 Compositor 东西，有了关联的 Compositor实例，我们才华创建各类 UI 元素。
2、SetElementChildVisual：当我们使用 Composition API 创建完自界说的 UI 元素后，要挪用这个要领把它插入到 XAML 东西的可视化树中。注意，UI 元素总是被插入到可视化树的最后一个位置，因此，，我们本身组装的元素总是会盖住本来的 XAML 元素的。这个你得注意。
3、GetElementChildVisual：只有你挪用过 SetElementChildVisual 要领把自界说 Visual 元素插手过可视化树，才华挪用这个要领，这个要领就是返回你上一次插入的元素。如果你没有插入过自界说的可视化元素，则该要领会返回 null。注意，不要把这个要领跟 GetElementVisual 要领混淆，两者差别。GetElementVisual 要领是获得与方针 XAML 东西关联的可视化东西，而 GetElementChildVisual 要领是获取你上一次插入到可视化树的自界说元素。
下面给大伙看一个例子。
在页面上，我放了一个 Border 东西。
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Border Name="bd" Background="Black"/> </Grid>
趁便把它的配景设置为黑色，便利后面看影戏。
切换到代码文件，此刻我们自界说组装一下UI，然后插入到 Border 元素的子树中。
public MainPage() { this.InitializeComponent(); CompositMyVisual(); } void CompositMyVisual() { Visual visualForbd = ElementCompositionPreview.GetElementVisual(bd); // 组建UI Compositor compos = visualForbd.Compositor; // 根元素 ContainerVisual rootvs = compos.CreateContainerVisual(); // 第一个可视化元素 SpriteVisual v1 = compos.CreateSpriteVisual(); v1.Brush = compos.CreateColorBrush(Colors.Green); v1.Size = new Vector2(450f, 300f); //巨细 v1.Offset = new Vector3(30f, 20f, -1f); //位移 rootvs.Children.InsertAtTop(v1); // 第二个可视化元素 SpriteVisual v2 = compos.CreateSpriteVisual(); v2.Brush = compos.CreateColorBrush(Colors.SkyBlue); v2.Size = new Vector2(400f, 400f); v2.Offset = new Vector3(180f, 125f, 0f); rootvs.Children.InsertAtTop(v2); // 这一句很重要 ElementCompositionPreview.SetElementChildVisual(bd, rootvs); }
记得，在组装完UI元素后，要挪用 ElementCompositionPreview.SetElementChildVisual要领，把自界说的元素插入到可视化树中。