Elemento visual de composición
Los objetos visuales de composición componen la estructura de árbol visual en la que se usan y se basan todas las demás características de la API de composición. La API permite a los desarrolladores definir y crear uno o varios objetos visuales que representan un único nodo en un árbol visual.
Objetos visuales
Hay varios tipos de objetos visuales que componen la estructura del árbol visual más una clase de pincel base con varias subclases que afectan al contenido de un objeto visual:
- Visual : objeto base, la mayoría de las propiedades están aquí y heredan los demás objetos Visuales.
- ContainerVisual : se deriva de Visual y agrega la capacidad de crear elementos secundarios.
- SpriteVisual: deriva de ContainerVisual. Tiene la capacidad de asociar un pincel para que el objeto visual pueda representar píxeles como imágenes, efectos o un color sólido.
- LayerVisual: se deriva de ContainerVisual. Los elementos secundarios del objeto visual se aplanan en una sola capa.
(Introducido en Windows 10, versión 1607, SDK 14393). - ShapeVisual: se deriva de ContainerVisual. Nodo de árbol visual que es la raíz de compositionShape.
(Introducido en Windows 10, versión 1803, SDK 17134). - RedirectVisual: deriva de ContainerVisual. El objeto visual obtiene su contenido de otro objeto visual.
(Introducido en Windows 10, versión 1809, SDK 17763). - SceneVisual: se deriva de ContainerVisual. Objeto visual contenedor para los nodos de una escena 3D.
(Introducido en Windows 10, versión 1903, SDK 18362).
Puede aplicar contenido y efectos a SpriteVisuals mediante CompositionBrush y sus subclases, incluidos CompositionColorBrush, CompositionSurfaceBrush y CompositionEffectBrush. Para obtener más información sobre los pinceles, consulte CompositionBrush Overview(Introducción a CompositionBrush).
El ejemplo CompositionVisual
Aquí veremos código de ejemplo que muestra los tres tipos visuales diferentes enumerados anteriormente. Aunque este ejemplo no cubre conceptos como Animaciones o efectos más complejos, contiene los bloques de creación que usan todos esos sistemas. (El código de ejemplo completo aparece al final de este artículo).
En la muestra hay una serie de cuadrados de color sólidos en los que se puede hacer clic y arrastrar sobre la pantalla. Cuando se hace clic en un cuadrado, llegará al frente, girará 45 grados y se volverá opaco cuando se arrastre.
Esto muestra una serie de conceptos básicos para trabajar con la API, entre los que se incluyen:
- Creación de un compositor
- Crear un SpriteVisual con compositionColorBrush
- Recorte del objeto visual
- Rotación del objeto visual
- Establecer opacidad
- Cambiar la posición del objeto visual en la colección.
Creación de un compositor
Crear un compositor y almacenarlo en una variable para su uso como generador es una tarea sencilla. En el fragmento de código siguiente se muestra cómo crear un nuevo compositor:
_compositor = new Compositor();
Crear un SpriteVisual y ColorBrush
El uso del compositor es fácil crear objetos siempre que los necesite, como spriteVisual y compositionColorBrush:
var visual = _compositor.CreateSpriteVisual();
visual.Brush = _compositor.CreateColorBrush(Color.FromArgb(0xFF, 0xFF, 0xFF, 0xFF));
Aunque esta es solo unas pocas líneas de código, muestra un concepto eficaz: los objetos SpriteVisual son el corazón del sistema de efectos. SpriteVisual permite una gran flexibilidad e interacción en la creación de colores, imágenes y efectos. SpriteVisual es un único tipo visual que puede rellenar un rectángulo 2D con un pincel, en este caso, un color sólido.
Recorte de un objeto visual
El compositor también se puede usar para crear clips en un objeto Visual. A continuación se muestra un ejemplo del ejemplo de uso de InsetClip para recortar cada lado del objeto visual:
var clip = _compositor.CreateInsetClip();
clip.LeftInset = 1.0f;
clip.RightInset = 1.0f;
clip.TopInset = 1.0f;
clip.BottomInset = 1.0f;
_currentVisual.Clip = clip;
Al igual que otros objetos de la API, InsetClip puede tener animaciones aplicadas a sus propiedades.
Rotación de un clip
Un objeto Visual se puede transformar con una rotación. Tenga en cuenta que RotationAngle admite radianes y grados. El valor predeterminado es radianes, pero es fácil especificar grados como se muestra en el fragmento de código siguiente:
child.RotationAngleInDegrees = 45.0f;
La rotación es solo un ejemplo de un conjunto de componentes de transformación proporcionados por la API para facilitar estas tareas. Otros incluyen Offset, Scale, Orientation, RotationAxis y 4x4 TransformMatrix.
Establecer opacidad
Establecer la opacidad de un objeto visual es una operación sencilla mediante un valor float. Por ejemplo, en el ejemplo todos los cuadrados comienzan en la opacidad .8:
visual.Opacity = 0.8f;
Al igual que la rotación, la propiedad Opacity se puede animar.
Cambio de la posición del objeto visual en la colección
Composition API permite cambiar la posición de un objeto visual de una clase VisualCollection de varias maneras. Se puede colocar encima de otro objeto visual con InsertAbove, situado debajo con InsertBelow, movido a la parte superior con InsertAtTop o la parte inferior con InsertAtBottom.
En el ejemplo, se ordena un objeto Visual en el que se ha realizado clic en la parte superior:
parent.Children.InsertAtTop(_currentVisual);
Ejemplo completo
En el ejemplo completo, todos los conceptos anteriores se usan juntos para construir y recorrer un árbol simple de objetos Visuales para cambiar la opacidad sin usar XAML, WWA o DirectX. En este ejemplo se muestra cómo se crean y agregan objetos Visuales secundarios y cómo se cambian las propiedades.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Numerics;
using System.Text;
using System.Threading.Tasks;
using Windows.ApplicationModel.Core;
using Windows.Foundation;
using Windows.UI;
using Windows.UI.Composition;
using Windows.UI.Core;
namespace compositionvisual
{
class VisualProperties : IFrameworkView
{
//------------------------------------------------------------------------------
//
// VisualProperties.Initialize
//
// This method is called during startup to associate the IFrameworkView with the
// CoreApplicationView.
//
//------------------------------------------------------------------------------
void IFrameworkView.Initialize(CoreApplicationView view)
{
_view = view;
_random = new Random();
}
//------------------------------------------------------------------------------
//
// VisualProperties.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;
}
//------------------------------------------------------------------------------
//
// VisualProperties.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?
//
Vector3 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 as ContainerVisual;
_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);
}
}
//------------------------------------------------------------------------------
//
// VisualProperties.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)
{
//
// Set up the properties of the visual the first time it is
// dragged. This will last for the duration of the drag
//
if (!_dragging)
{
_currentVisual.Opacity = 1.0f;
//
// Transform the first child of the current visual so that
// the image is rotated
//
foreach (var child in _currentVisual.Children)
{
child.RotationAngleInDegrees = 45.0f;
child.CenterPoint = new Vector3(_currentVisual.Size.X / 2, _currentVisual.Size.Y / 2, 0);
break;
}
//
// Clip the visual to its original layout rect by using an inset
// clip with a one-pixel margin all around
//
var clip = _compositor.CreateInsetClip();
clip.LeftInset = 1.0f;
clip.RightInset = 1.0f;
clip.TopInset = 1.0f;
clip.BottomInset = 1.0f;
_currentVisual.Clip = clip;
_dragging = true;
}
Point position = args.CurrentPoint.Position;
_currentVisual.Offset = new Vector3((float)(position.X + _offsetBias.X),
(float)(position.Y + _offsetBias.Y),
0.0f);
}
}
//------------------------------------------------------------------------------
//
// VisualProperties.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 and restore the transform and clip
//
if (_currentVisual != null)
{
if (_dragging)
{
//
// Remove the transform from the first child
//
foreach (var child in _currentVisual.Children)
{
child.RotationAngle = 0.0f;
child.CenterPoint = new Vector3(0.0f, 0.0f, 0.0f);
break;
}
_currentVisual.Opacity = 0.8f;
_currentVisual.Clip = null;
_dragging = false;
}
_currentVisual = null;
}
}
//------------------------------------------------------------------------------
//
// VisualProperties.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)
{
}
//------------------------------------------------------------------------------
//
// VisualProperties.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);
}
//------------------------------------------------------------------------------
//
// VisualProperties.Uninitialize
//
// This method is called during shutdown to disconnect the CoreApplicationView,
// and CoreWindow from the IFrameworkView.
//
//------------------------------------------------------------------------------
void IFrameworkView.Uninitialize()
{
_window = null;
_view = null;
}
//------------------------------------------------------------------------------
//
// 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();
_compositionTarget = _compositor.CreateTargetForCurrentView();
_compositionTarget.Root = _root;
//
// Create a few visuals for our window
//
for (int index = 0; index < 20; index++)
{
_root.Children.InsertAtTop(CreateChildElement());
}
}
//------------------------------------------------------------------------------
//
// VisualProperties.CreateChildElement
//
// Creates a small sub-tree to represent a visible element in our application.
//
//------------------------------------------------------------------------------
Visual CreateChildElement()
{
//
// Each element consists of three visuals, which produce the appearance
// of a framed rectangle
//
var element = _compositor.CreateContainerVisual();
element.Size = new Vector2(100.0f, 100.0f);
//
// Position this visual randomly within our window
//
element.Offset = new Vector3((float)(_random.NextDouble() * 400), (float)(_random.NextDouble() * 400), 0.0f);
//
// The outer rectangle is always white
//
//Note to preview API users - SpriteVisual and Color Brush replace SolidColorVisual
//for example instead of doing
//var visual = _compositor.CreateSolidColorVisual() and
//visual.Color = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xFF);
//we now use the below
var visual = _compositor.CreateSpriteVisual();
element.Children.InsertAtTop(visual);
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 Vector3(3.0f, 3.0f, 0.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
//
element.Opacity = 0.8f;
return element;
}
// CoreWindow / CoreApplicationView
private CoreWindow _window;
private CoreApplicationView _view;
// Windows.UI.Composition
private Compositor _compositor;
private CompositionTarget _compositionTarget;
private ContainerVisual _root;
private ContainerVisual _currentVisual;
private Vector2 _offsetBias;
private bool _dragging;
// Helpers
private Random _random;
}
public sealed class VisualPropertiesFactory : IFrameworkViewSource
{
//------------------------------------------------------------------------------
//
// VisualPropertiesFactory.CreateView
//
// This method is called by CoreApplication to provide a new IFrameworkView for
// a CoreWindow that is being created.
//
//------------------------------------------------------------------------------
IFrameworkView IFrameworkViewSource.CreateView()
{
return new VisualProperties();
}
//------------------------------------------------------------------------------
//
// main
//
//------------------------------------------------------------------------------
static int Main(string[] args)
{
CoreApplication.Run(new VisualPropertiesFactory());
return 0;
}
}
}