Shape Shape Shape Shape Class

Definition

Provides a base class for shape elements, such as Ellipse, Polygon, and Rectangle.

public : class Shape : FrameworkElement, IShape, IShape2public class Shape : FrameworkElement, IShape, IShape2Public Class Shape Inherits FrameworkElement Implements IShape, IShape2// This API is not available in Javascript.
Inheritance
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited properties

Inherited events

Inherited methods

Examples

For example code of how to use Shape derived classes such as Rectangle and Path, see XAML vector-based drawing sample.

Remarks

Shape defines several properties that are shared by all the Shape derived classes. The most commonly used properties are Fill, Stroke, and StrokeThickness. Stroke uses a Brush to draw the outline of the shape, and Fill uses a Brush to draw the interior. For more info on how to use the Shape derived classes in XAML UI, see Draw shapes.

Shape also derives from FrameworkElement and inherits various properties from that class. Those properties include Height and Width. For most other FrameworkElement derived types, setting Height and Width is the primary way to specify that element's dimensions in UI (although you often would leave them as "Auto" to take advantage of adaptive layout). But not all of the Shape classes use Height or Width to specify their dimensions, and instead use specific properties that might define a set of points. In this case a Height or Width is calculated for layout, but you shouldn't attempt to set the Height or Width. See the remarks or descriptions in specific Shape derived classes for more info.

Because the Shape derived classes are UI elements they can be used as content for containers such as controls and panels. They have practical presence in the UI; for example they are hit-testable with input events, they report desired size for layout, and so on. There are other graphics definition classes for XAML that aren't UI elements. These mostly exist in the Windows.UI.Xaml.Media namespace. Examples of such graphics classes are the Geometry types, PathFigure types and PathSegment types.

Shape derived classes

Shape is the parent class for several immediately derived classes that define primitive shapes for use as UI elements:

Constructors

Shape() Shape() Shape() Shape()

Provides base class initialization behavior for Shape derived classes.

protected : Shape()protected Shape()Protected Sub New()// This API is not available in Javascript.

Properties

Fill Fill Fill Fill

Gets or sets the Brush that paints the interior area of the shape.

public : Brush Fill { get; set; }public Brush Fill { get; set; }Public ReadWrite Property Fill As Brush// This API is not available in Javascript.
<shape Fill="{StaticResource resourceName}"/>

Value
Brush Brush Brush Brush

A Brush that paints/fills the shape interior. The default is null, (a null brush) which is evaluated as Transparent for rendering.

See Also

FillProperty FillProperty FillProperty FillProperty

Identifies the Fill dependency property.

public : static DependencyProperty FillProperty { get; }public static DependencyProperty FillProperty { get; }Public Static ReadOnly Property FillProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the Fill dependency property.

GeometryTransform GeometryTransform GeometryTransform GeometryTransform

Gets a value that represents a Transform that is applied to the geometry of a Shape before it is drawn.

public : Transform GeometryTransform { get; }public Transform GeometryTransform { get; }Public ReadOnly Property GeometryTransform As Transform// This API is not available in Javascript.
<object>
  <object.GeometryTransform>
    singleTransform
  </object.GeometryTransform>
</object>
Value
Transform Transform Transform Transform

A Transform that is applied to the geometry of a Shape before it is drawn.

Stretch Stretch Stretch Stretch

Gets or sets a Stretch enumeration value that describes how the shape fills its allocated space.

public : Stretch Stretch { get; set; }public Stretch Stretch { get; set; }Public ReadWrite Property Stretch As Stretch// This API is not available in Javascript.
<object Stretch="stretchvalueName"/>
Value
Stretch Stretch Stretch Stretch

One of the Stretch enumeration values. The default value at run time depends on the type of Shape.

StretchProperty StretchProperty StretchProperty StretchProperty

Identifies the Stretch dependency property.

public : static DependencyProperty StretchProperty { get; }public static DependencyProperty StretchProperty { get; }Public Static ReadOnly Property StretchProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the Stretch dependency property.

Stroke Stroke Stroke Stroke

Gets or sets the Brush that specifies how the Shape outline is painted.

public : Brush Stroke { get; set; }public Brush Stroke { get; set; }Public ReadWrite Property Stroke As Brush// This API is not available in Javascript.
<shape Stroke="{StaticResource resourceName}"/>

Value
Brush Brush Brush Brush

A Brush that specifies how the Shape outline is painted. The default is null.

See Also

StrokeDashArray StrokeDashArray StrokeDashArray StrokeDashArray

Gets or sets a collection of Double values that indicates the pattern of dashes and gaps that is used to outline shapes.

public : DoubleCollection StrokeDashArray { get; set; }public DoubleCollection StrokeDashArray { get; set; }Public ReadWrite Property StrokeDashArray As DoubleCollection// This API is not available in Javascript.
<object StrokeDashArray="strokeDashString"/>
Value
DoubleCollection DoubleCollection DoubleCollection DoubleCollection

A collection of Double values that specifies the pattern of dashes and gaps.

StrokeDashArrayProperty StrokeDashArrayProperty StrokeDashArrayProperty StrokeDashArrayProperty

Identifies the StrokeDashArray dependency property.

public : static DependencyProperty StrokeDashArrayProperty { get; }public static DependencyProperty StrokeDashArrayProperty { get; }Public Static ReadOnly Property StrokeDashArrayProperty As DependencyProperty// This API is not available in Javascript.

StrokeDashCap StrokeDashCap StrokeDashCap StrokeDashCap

Gets or sets a PenLineCap enumeration value that specifies how the ends of a dash are drawn.

public : PenLineCap StrokeDashCap { get; set; }public PenLineCap StrokeDashCap { get; set; }Public ReadWrite Property StrokeDashCap As PenLineCap// This API is not available in Javascript.
<shape StrokeDashCap="penLineCapMemberName"/>
Value
PenLineCap PenLineCap PenLineCap PenLineCap

One of the enumeration values for PenLineCap. The default is Flat.

StrokeDashCapProperty StrokeDashCapProperty StrokeDashCapProperty StrokeDashCapProperty

Identifies the StrokeDashCap dependency property.

public : static DependencyProperty StrokeDashCapProperty { get; }public static DependencyProperty StrokeDashCapProperty { get; }Public Static ReadOnly Property StrokeDashCapProperty As DependencyProperty// This API is not available in Javascript.

StrokeDashOffset StrokeDashOffset StrokeDashOffset StrokeDashOffset

Gets or sets a value that specifies the distance within the dash pattern where a dash begins.

public : double StrokeDashOffset { get; set; }public double StrokeDashOffset { get; set; }Public ReadWrite Property StrokeDashOffset As double// This API is not available in Javascript.
<object StrokeDashOffset="double"/>
Value
double double double double

A value that represents the distance within the dash pattern where a dash begins. The default value is 0.

StrokeDashOffsetProperty StrokeDashOffsetProperty StrokeDashOffsetProperty StrokeDashOffsetProperty

Identifies the StrokeDashOffset dependency property.

public : static DependencyProperty StrokeDashOffsetProperty { get; }public static DependencyProperty StrokeDashOffsetProperty { get; }Public Static ReadOnly Property StrokeDashOffsetProperty As DependencyProperty// This API is not available in Javascript.

StrokeEndLineCap StrokeEndLineCap StrokeEndLineCap StrokeEndLineCap

Gets or sets a PenLineCap enumeration value that describes the Shape at the end of a line.

public : PenLineCap StrokeEndLineCap { get; set; }public PenLineCap StrokeEndLineCap { get; set; }Public ReadWrite Property StrokeEndLineCap As PenLineCap// This API is not available in Javascript.
<shape StrokeEndLineCap="penLineCapMemberName"/>
Value
PenLineCap PenLineCap PenLineCap PenLineCap

One of the enumeration values for PenLineCap. The default is Flat.

StrokeEndLineCapProperty StrokeEndLineCapProperty StrokeEndLineCapProperty StrokeEndLineCapProperty

Identifies the StrokeEndLineCap dependency property.

public : static DependencyProperty StrokeEndLineCapProperty { get; }public static DependencyProperty StrokeEndLineCapProperty { get; }Public Static ReadOnly Property StrokeEndLineCapProperty As DependencyProperty// This API is not available in Javascript.

StrokeLineJoin StrokeLineJoin StrokeLineJoin StrokeLineJoin

Gets or sets a PenLineJoin enumeration value that specifies the type of join that is used at the vertices of a Shape.

public : PenLineJoin StrokeLineJoin { get; set; }public PenLineJoin StrokeLineJoin { get; set; }Public ReadWrite Property StrokeLineJoin As PenLineJoin// This API is not available in Javascript.
<shape StrokeLineJoin="penLineJoinMemberName"/>
Value
PenLineJoin PenLineJoin PenLineJoin PenLineJoin

A value of the PenLineJoin enumeration that specifies the join appearance. The default value is Miter.

StrokeLineJoinProperty StrokeLineJoinProperty StrokeLineJoinProperty StrokeLineJoinProperty

Identifies the StrokeLineJoin dependency property.

public : static DependencyProperty StrokeLineJoinProperty { get; }public static DependencyProperty StrokeLineJoinProperty { get; }Public Static ReadOnly Property StrokeLineJoinProperty As DependencyProperty// This API is not available in Javascript.

StrokeMiterLimit StrokeMiterLimit StrokeMiterLimit StrokeMiterLimit

Gets or sets a limit on the ratio of the miter length to half the StrokeThickness of a Shape element.

public : double StrokeMiterLimit { get; set; }public double StrokeMiterLimit { get; set; }Public ReadWrite Property StrokeMiterLimit As double// This API is not available in Javascript.
<object StrokeMiterLimit="double"/>
Value
double double double double

The limit on the ratio of the miter length to the StrokeThickness of a Shape element. This value is always a positive number that is greater than or equal to 1.

StrokeMiterLimitProperty StrokeMiterLimitProperty StrokeMiterLimitProperty StrokeMiterLimitProperty

Identifies the StrokeMiterLimit dependency property.

public : static DependencyProperty StrokeMiterLimitProperty { get; }public static DependencyProperty StrokeMiterLimitProperty { get; }Public Static ReadOnly Property StrokeMiterLimitProperty As DependencyProperty// This API is not available in Javascript.

StrokeProperty StrokeProperty StrokeProperty StrokeProperty

Identifies the Stroke dependency property.

public : static DependencyProperty StrokeProperty { get; }public static DependencyProperty StrokeProperty { get; }Public Static ReadOnly Property StrokeProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the Stroke dependency property.

StrokeStartLineCap StrokeStartLineCap StrokeStartLineCap StrokeStartLineCap

Gets or sets a PenLineCap enumeration value that describes the Shape at the start of a Stroke.

public : PenLineCap StrokeStartLineCap { get; set; }public PenLineCap StrokeStartLineCap { get; set; }Public ReadWrite Property StrokeStartLineCap As PenLineCap// This API is not available in Javascript.
<shape StrokeStartLineCap="penLineCapMemberName"/>
Value
PenLineCap PenLineCap PenLineCap PenLineCap

A value of the PenLineCap enumeration that specifies the shape at the start of a Stroke. The default is Flat.

StrokeStartLineCapProperty StrokeStartLineCapProperty StrokeStartLineCapProperty StrokeStartLineCapProperty

Identifies the StrokeStartLineCap dependency property.

public : static DependencyProperty StrokeStartLineCapProperty { get; }public static DependencyProperty StrokeStartLineCapProperty { get; }Public Static ReadOnly Property StrokeStartLineCapProperty As DependencyProperty// This API is not available in Javascript.

StrokeThickness StrokeThickness StrokeThickness StrokeThickness

Gets or sets the width of the Shape stroke outline.

public : double StrokeThickness { get; set; }public double StrokeThickness { get; set; }Public ReadWrite Property StrokeThickness As double// This API is not available in Javascript.
<object StrokeThickness="double"/>
Value
double double double double

The width of the Shape outline, in pixels. The default value is 0.

StrokeThicknessProperty StrokeThicknessProperty StrokeThicknessProperty StrokeThicknessProperty

Identifies the StrokeThickness dependency property.

public : static DependencyProperty StrokeThicknessProperty { get; }public static DependencyProperty StrokeThicknessProperty { get; }Public Static ReadOnly Property StrokeThicknessProperty As DependencyProperty// This API is not available in Javascript.

Methods

GetAlphaMask() GetAlphaMask() GetAlphaMask() GetAlphaMask()

Returns a mask that represents the alpha channel of a XAML shape as a CompositionBrush.

public : CompositionBrush GetAlphaMask()public CompositionBrush GetAlphaMask()Public Function GetAlphaMask() As CompositionBrush// This API is not available in Javascript.
Returns

A mask that represents the alpha channel of a XAML shape.

Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

Remarks

This method gets an alpha mask from a XAML shape as a CompositionBrush that you can use as an input to composition shadows and effects. The alpha mask CompositionBrush has the same alignment and stretch property values that the source XAML shape applies to its rendered content so that you can use those values to correctly position shadows or effects relative to the XAML element.

See Also