Visual Visual Visual Class

Definition

The base object in visual tree.

public class Visual : CompositionObject, IVisual, IVisual2public class Visual : CompositionObject, IVisual, IVisual2Public Class Visual Inherits CompositionObject Implements IVisual, IVisual2
Inheritance
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited methods

Inherited properties

Remarks

Visual objects compose and render serialized drawing content and form the basis of a retained mode visual system. The Visual class supports basic position and clipping and can have 2D and 3D transformations applied to them. Addition functionality like solid colors, images, and content with effects is provided through subclasses like SpriteVisual, and by setting the Brush property of the visual to CompositionBrush subclasses such as CompositionColorBrush, CompositionEffectBrush, and CompositionSurfaceBrush.

Visual objects are thread-agile and not bound to the UI thread.

The following properties of Visual are animatable by associating them with a KeyFrameAnimation or ExpressionAnimation using CompositionObject::StartAnimation:

Visual supports two forms of rotation, by axis-angle, and by orientation. Axis-angle rotation uses the RotationAngle, RotationAxis, and CenterPoint properties to specify the rotation in degrees, which axis to rotate around, and the center point of the visual to rotate around.

Rotation by orientation uses the Orientation property to specify a quaternion describing an orientation and rotation in 3D space.

Properties

AnchorPoint AnchorPoint AnchorPoint

The point on the visual to be positioned at the visual's offset. Value is normalized with respect to the size of the visual. Animatable.

public Vector2 AnchorPoint { get; set; }public Vector2 AnchorPoint { get; set; }Public ReadWrite Property AnchorPoint As Vector2
Value
Vector2 Vector2 Vector2

The point on the visual to be positioned at the visual's offset. Value is normalized with respect to the size of the visual.

Attributes
Additional features and requirements
Device family
Windows 10 (introduced v10.0.10586.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v2)

Remarks

Examples


using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Composition;
using Windows.UI.Xaml.Hosting;
using System.Numerics;

namespace AnchorPointSample
{
    /// <summary>
    /// Using AnchorPoint to Center a Rectangle
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.Loaded += MainPage_Loaded;
        }

        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            // Get the backing visual for the "CenteredElement" XAML Element
            Visual root = ElementCompositionPreview.GetElementVisual(CenteredElement);
            Compositor compositor = root.Compositor;

            // Create a solid color visual
            SpriteVisual mainVisual = compositor.CreateSpriteVisual();
            mainVisual.Size = new Vector2(200, 200);
            mainVisual.Brush = compositor.CreateColorBrush(Windows.UI.Colors.Blue);

            // Set the anchor point to center the rectangle
            mainVisual.AnchorPoint = new Vector2(0.5f, 0.5f);

            // Insert the rectangle as a child of the XAML element
            ElementCompositionPreview.SetElementChildVisual(CenteredElement, mainVisual);
        }
    }
}

BackfaceVisibility BackfaceVisibility BackfaceVisibility

Specifies whether the back face of the visual should be visible during a 3D transform.

public CompositionBackfaceVisibility BackfaceVisibility { get; set; }public CompositionBackfaceVisibility BackfaceVisibility { get; set; }Public ReadWrite Property BackfaceVisibility As CompositionBackfaceVisibility
Value
CompositionBackfaceVisibility CompositionBackfaceVisibility CompositionBackfaceVisibility

Whether the back face of the visual should be visible during a 3D transform.

Attributes
Additional features and requirements
Device family
Windows 10 (introduced v10.0.10586.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v2)

BorderMode BorderMode BorderMode

Specifies how to compose the edges of bitmaps and clips associated with a visual, or with all visuals in the subtree rooted at this visual. Setting BorderMode at a parent Visual will affect all children visuals in the subtree and can be selectively turned off at each child visual.

public CompositionBorderMode BorderMode { get; set; }public CompositionBorderMode BorderMode { get; set; }Public ReadWrite Property BorderMode As CompositionBorderMode
Value
CompositionBorderMode CompositionBorderMode CompositionBorderMode

How to compose the edges of bitmaps and clips associated with a visual, or with all visuals in the subtree rooted at this visual.

Attributes
Additional features and requirements
Device family
Windows 10 (introduced v10.0.10586.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v2)

CenterPoint CenterPoint CenterPoint

The point about which rotation or scaling occurs. Animatable

public Vector3 CenterPoint { get; set; }public Vector3 CenterPoint { get; set; }Public ReadWrite Property CenterPoint As Vector3
Value
Vector3 Vector3 Vector3

The point about which rotation or scaling occurs.

Attributes

Remarks

CenterPoint is relative to the offset specified in the AnchorPoint property.

This property is animatable and can be associated with a KeyFrameAnimation or ExpressionAnimation using CompositionObject::StartAnimation.

Clip Clip Clip

Specifies the clipping region for the visual. When a visual is rendered, only the portion of the visual that falls inside the clipping region is displayed, while any content that extends outside the clipping region is clipped (that is, not displayed).

public CompositionClip Clip { get; set; }public CompositionClip Clip { get; set; }Public ReadWrite Property Clip As CompositionClip
Value
CompositionClip CompositionClip CompositionClip

Specifies the clipping region for the visual.

Attributes

CompositeMode CompositeMode CompositeMode

Specifies how a visual's bitmap is blended with the screen.

public CompositionCompositeMode CompositeMode { get; set; }public CompositionCompositeMode CompositeMode { get; set; }Public ReadWrite Property CompositeMode As CompositionCompositeMode
Value
CompositionCompositeMode CompositionCompositeMode CompositionCompositeMode

How a visual's bitmap is blended with the screen.

Attributes
Additional features and requirements
Device family
Windows 10 (introduced v10.0.10586.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v2)

IsVisible IsVisible IsVisible

Indicates whether the visual and its entire subtree of child visuals is visible.

public bool IsVisible { get; set; }public bool IsVisible { get; set; }Public ReadWrite Property IsVisible As bool
Value
bool bool bool

Indicates whether the visual and its entire subtree of child visuals is visible.

Attributes
Additional features and requirements
Device family
Windows 10 (introduced v10.0.10586.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v2)

Offset Offset Offset

The offset of the visual relative to its parent or for a root visual the offset relative to the upper-left corner of the windows that hosts the visual. Animatable.

public Vector3 Offset { get; set; }public Vector3 Offset { get; set; }Public ReadWrite Property Offset As Vector3
Value
Vector3 Vector3 Vector3

Offset of the visual relative to its parent.

Attributes

Remarks

This property is animatable and can be associated with a KeyFrameAnimation or ExpressionAnimation using CompositionObject::StartAnimation.

Opacity Opacity Opacity

The opacity of the visual. Animatable.

The opacity property determines the transparency, if any, of the Visual and is a value from 0 to 1. 0 is fully transparent and 1 is full opaque. A Visual with an Opacity property of 0 is still present in the tree. Like other properties on the Visual, Opacity can be animated using the Windows,UI.Composition animation system.

public float Opacity { get; set; }public float Opacity { get; set; }Public ReadWrite Property Opacity As float
Value
float float float

The opacity of the visual.

Attributes

Remarks

This property is animatable and can be associated with a KeyFrameAnimation or ExpressionAnimation using CompositionObject::StartAnimation.

Orientation Orientation Orientation

A quaternion describing an orientation and rotation in 3D space that will be applied to the visual. Animatable.

public Quaternion Orientation { get; set; }public Quaternion Orientation { get; set; }Public ReadWrite Property Orientation As Quaternion
Value
Quaternion Quaternion Quaternion

A quaternion describing an orientation and rotation in 3D space that will be applied to the visual.

Attributes

Parent Parent Parent

The parent of the visual.

public ContainerVisual Parent { get; }public ContainerVisual Parent { get; }Public ReadOnly Property Parent As ContainerVisual
Value
ContainerVisual ContainerVisual ContainerVisual

The parent of the visual.

Attributes

ParentForTransform ParentForTransform ParentForTransform

Visual specifying the coordinate system in which this visual is composed.

public Visual ParentForTransform { get; set; }public Visual ParentForTransform { get; set; }Public ReadWrite Property ParentForTransform As Visual
Value
Visual Visual Visual

Visual specifying the coordinate system in which this visual is composed.

Attributes
Additional features and requirements
Device family
Windows 10 (introduced v10.0.10586.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v2)

Remarks

ParentForTransform allows you to change the coordinate system in which a visual is composed. You can specify another visual that acts as a visual's "transform parent". That is, the visual in question will inherit accumulated transforms as though it were the child of that other visual. Note that this includes the effects of all properties that relate to transform, such as Visual.RotationAngle, or Visual.AnchorPoint, on the specified "transform parent" visual and all of its "transform ancestors".

RelativeOffsetAdjustment RelativeOffsetAdjustment RelativeOffsetAdjustment

Specifies the offset of the visual with respect to the size of its parent visual.

public Vector3 RelativeOffsetAdjustment { get; set; }public Vector3 RelativeOffsetAdjustment { get; set; }Public ReadWrite Property RelativeOffsetAdjustment As Vector3
Value
Vector3 Vector3 Vector3

The offset of the visual with respect to the size of its parent visual.

Attributes
Additional features and requirements
Device family
Windows 10 (introduced v10.0.10586.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v2)

Remarks

Value is normalized with respect to the size of the visual�s parent. For example, a value of (0.0, 0.5, 0.0) means that the vertical position of the visual is at the midpoint between the top and bottom of its parent visual�s bounds. This property is a Vector3 for consistency with the Offset property, however the Z component of the RelativeOffsetAdjustment property currently has no effect.

RelativeSizeAdjustment RelativeSizeAdjustment RelativeSizeAdjustment

The size of the visual with respect to the size of its parent visual.

public Vector2 RelativeSizeAdjustment { get; set; }public Vector2 RelativeSizeAdjustment { get; set; }Public ReadWrite Property RelativeSizeAdjustment As Vector2
Value
Vector2 Vector2 Vector2

The size of the visual with respect to the size of its parent visual.

Attributes
Additional features and requirements
Device family
Windows 10 (introduced v10.0.10586.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v2)

Remarks

Value is normalized with respect to the size of the visual's parent. For example, a value of (1.0, 0.5) indicates that the visual should be the full width of its parent but only half the height.

RotationAngle RotationAngle RotationAngle

The rotation angle in radians of the visual. Animatable.

To use degrees instead of radians use RotationAngleInDegrees. This property is animatable and can be associated with a KeyFrameAnimation or ExpressionAnimation using CompositionObject::StartAnimation.

Visual supports two forms of rotation, by axis-angle, and by orientation.

public float RotationAngle { get; set; }public float RotationAngle { get; set; }Public ReadWrite Property RotationAngle As float
Value
float float float

The rotation angle in radians of the visual.

Attributes

RotationAngleInDegrees RotationAngleInDegrees RotationAngleInDegrees

The rotation angle of the visual in degrees.

public float RotationAngleInDegrees { get; set; }public float RotationAngleInDegrees { get; set; }Public ReadWrite Property RotationAngleInDegrees As float
Value
float float float

The rotation angle of the visual in degrees.

Attributes
Additional features and requirements
Device family
Windows 10 (introduced v10.0.10586.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v2)

RotationAxis RotationAxis RotationAxis

The axis to rotate the visual around. Animatable.

This property is animatable and can be associated with a KeyFrameAnimation or ExpressionAnimation using CompositionObject::StartAnimation.

Visual supports two forms of rotation, by axis-angle, and by orientation.

public Vector3 RotationAxis { get; set; }public Vector3 RotationAxis { get; set; }Public ReadWrite Property RotationAxis As Vector3
Value
Vector3 Vector3 Vector3

The axis to rotate the visual around. For example, a value of Vector3(1,0,0) indicates rotation along the x-axis.

Attributes

Scale Scale Scale

The scale to apply to the visual.

public Vector3 Scale { get; set; }public Vector3 Scale { get; set; }Public ReadWrite Property Scale As Vector3
Value
Vector3 Vector3 Vector3

The scale to apply to the visual. A value of Vector3 (1.0,1.0,1.0) is equivalent to 100%.

Attributes

Remarks

The CenterPoint property affects the center point of the scale transform.

Size Size Size

The width and height of the visual. Animatable.

public Vector2 Size { get; set; }public Vector2 Size { get; set; }Public ReadWrite Property Size As Vector2
Value
Vector2 Vector2 Vector2

The width and height of the visual.

Attributes

Remarks

This property is animatable and can be associated with a KeyFrameAnimation or ExpressionAnimation using CompositionObject::StartAnimation.

Examples


// Create a simple scene.
Compositor compositor = new Compositor();
SpriteVisual child = compositor.CreateSpriteVisual();
child.Offset = new Vector3(50.0f, 50.0f, 0.0f);
child.Size = new Vector2(200, 200);
child.Brush = compositor.CreateColorBrush(Color.FromArgb(0xFF, 0x00, 0xCC, 0x00));

// Create a simple scene.          
_compositor = ref new Compositor();
auto child = _compositor->CreateSpriteVisual();
child->Offset = Vector3(50.0f, 50.0f, 0.0f);
child->Size = Vector2(200, 200);
child->Brush = _compositor->CreateColorBrush(ColorHelper::FromArgb(0xFF, 0x00, 0xCC, 0x00));

TransformMatrix TransformMatrix TransformMatrix

The transformation matrix to apply to the visual. Animatable.

public Matrix4x4 TransformMatrix { get; set; }public Matrix4x4 TransformMatrix { get; set; }Public ReadWrite Property TransformMatrix As Matrix4x4
Value
Matrix4x4 Matrix4x4 Matrix4x4

The transformation matrix to apply to the visual.

Attributes

Remarks

This property is animatable and can be associated with a KeyFrameAnimation or ExpressionAnimation using CompositionObject::StartAnimation.

See Also