Shapes

Shapes, such as the rectangle, ellipse, line, and path, are an important foundation for creating drawings and graphic designs. Shapes are normally used on a canvas, but can be used in other containers as well.

Properties that are typically modified on a shape are the Stroke (the outer edge), StrokeThickness, Opacity, and Fill properties. Stroke dash properties and start and end cap properties on the Stroke apply to all shapes.

You can rotate and skew rectangle, ellipse, and path shapes, but not line, polyline, or polygon shapes.

Shapes Controls Property Usage

The following table shows the properties used by each control:
PropertyEllipseLinePathPolygonPolygon PencilPolylinePolyline PencilRectangle
AllowDropXXXXXXXX
ClipToBoundsXXXXXXXX
ColumnXXXXXXXX
ColumnSpanXXXXXXXX
EffectXXXXXXXX
FillXXXXXXXX
FlowDirectionXXXXXXXX
FocusableXXXXXXXX
FocusVisualStyleXXXXXXXX
ForceCursorXXXXXXXX
HeightXXXXXXXX
HorizontalAlignmentXXXXXXXX
IsEnabledXXXXXXXX
IsHitTestVisibleXXXXXXXX
IsManipulationEnabledXXXXXXXX
IsSharedSizeScopeXXXXXXXX
LocalizationXXXXXXXX
MarginXXXXXXXX
MaxHeightXXXXXXXX
MaxWidthXXXXXXXX
MinHeightXXXXXXXX
MinWidthXXXXXXXX
NameXXXXXXXX
OpacityXXXXXXXX
OpacityMaskXXXXXXXX
OverridesDefaultStyleXXXXXXXX
RadiusXXX
RadiusYXX
ReloadableFormXX
Render TransformX
RenderTransformOriginXXXXXXXX
RowXXXXXXXX
RowSpanXXXXXXXX
SnapsToDevicePixelsXXXXXXXX
StretchXXXX
StrokeXXXXXXXX
StrokeDashArrayXXXXXXXX
StrokeDashCapXXXXXXXX
StrokDashOffsetXXXXXXXX
StrokeEndLineCapXXXXXXXX
StrokeLineJoinXXXXXXXX
StrokeMiterLimitXXXXXXXX
StrokeStartLineCapXXXXXXXX
StrokeThicknessXXXXXXXX
StyleXXXXXXX
TagXXXXXXX
ToolTipXXXXXXX
UidXXXXXXX
UseLayoutRoundingXXXXXXX
VerticalAlignmentXXXXXXX
VisibilityXXXXXXX
WidthXXXXXXX
X1XX
X2XX
Y1XX
Y2XX

Shapes Controls Property Descriptions

The following table shows the properties descriptions used by all control:
PropertyDescription
AllowDropSelect this check box to indicate that the control can accept data that is dragged onto it.
ClipToBoundsSelect this check box to clip the content of this control (or content coming from the child elements of this control) to fit into the size of the containing control.
ColumnSpecifies the column within the grid where the control is located.
ColumnSpanSpecifies the total number of columns that child content spans within a grid.
EffectClick the arrow to expand the property, select the effect you want to apply to the control, and then configure the specific values for the effect. Valid values to select are:
  • Blur
    • Kernel Type
    • Radius
  • Drop Shadow
    • Color
    • Direction
    • Opactiy
    • Shadow Depth
FillExpand this field to select the color for the inside of the thumb control or for the interior of the shape.
FlowDirectionSpecifies the direction that text and other user interface (UI) elements flow within any parent control. Selections are:
  • Left to Right
  • Right to Left
FocusableSelect this check box to indicate that the control can receive focus.
FocusVisualStyleSpecifies a property that enables customization of appearance, effects, or other style characteristics that apply to this control when it has focus.
ForceCursorSelect this check box to indicate that the user interface (UI) renders the cursor as declared by the Cursor property.
HeightSpecifies the height of the control, in pixels.
HorizontalAlignmentSpecifies the horizontal alignment characteristics applied to this control. Selections are:
  • Left
  • Center
  • Right
  • Stretch
IsEnabledSelect this check box to indicate that this control is enabled in the user interface (UI).
IsHitTestVisibleSelect this check box to indicate that the control can possibly be returned as a hit test result from some portion of its rendered content.
IsManipulationEnabledSelect this check box to indicate that the manipulation events for the control are enabled.
IsSharedSizeScopeSelect this check box to indicate that controls are sharing size information.
LocalizationClick the ellipsis button to open the Localization Configuration dialog box where you can configure the property to localize, the language to use for localization, and the text to localize.
MarginSpecifies the outer margin of a control.
MaxHeightSpecifies the maximum height of a control.
MaxWidthSpecifies the maximum width of a control.
MinHeightSpecifies the minimum height of a control.
MinWidthSpecifies the minimum width of a control.
NameSpecifies the identifying name of the control. The name provides a reference so that code behind, such as event handler code, can refer to a markup element during processing by a XAML processor.
OpacitySpecifies the opacity factor applied to the entire control. Valid values are 0 through 1, with up to 15 decimal places.
OpacityMaskExpand this field to select a color for the opacity mask, which is applied to any alpha-channel masking for the rendered content of this control.
OverridesDefaultStyleSelect this check box to indicate that this control incorporates style properties from theme styles.
RadiusXSpecifies the x-axis radius of the ellipse that is used to round the corners of the rectangle.
RadiusYSpecifies the y-axis radius of the ellipse that is used to round the corners of the rectangle.
ReloadableFormSelect this check box to enable viewing of this form in a completed or acquired state in the Task List. This property works in conjunction with workflow Tracking Configuration, which must be enabled to view completed forms.
Note: If you enable this setting, you must configure your form to handle viewing in a completed or acquired (reloaded) state by using the IsReloaded expression variable. For example, if the form is in a reloaded state, you can disable certain user interface elements and show read-only data.
Render TransformSpecifies the transform information that affects the rendering position of an object.
RenderTransformOriginSpecifies the center point of any possible render transform, relative to the bounds of the element.
  • X is the horizontal origin factor, given as a value between 0 and 1.
  • Y is the vertical origin factor, given as a value between 0 and 1.
RowRowBackground
RowSpanSpecifies the total number of rows that child content spans within a grid.
SnapsToDevicePixelsSelect this check box to indicate that rendering for this control uses device-specific pixel settings.
StretchSpecifies how an Image stretches to fill the destination rectangle. Selections are:
  • Fill
  • None (dones not apply to Scale Box)
  • Uniform (does not apply to Scale Box)
  • UniformFill (does not apply to Scale Box)
StrokeExpand this field to select the color for the shape's outline.
StrokeDashArrayClick the ellipsis button to open the StrokeDashArray Property Editor dialog box to indicate the pattern of dashes and gaps that is used to outline shapes.
StrokeDashCapSpecifies how the ends of a dash are drawn. Selections are:
  • Flat
  • Round
  • Square
  • Triangle
StrokeDashOffsetSpecifies the distance within the dash pattern where a dash begins
StrokeEndLineCapSpecifies the shape at the end of a line. Selections are:
  • Flat
  • Round
  • Square
  • Triangle
StrokeLineJoinSpecifies the type of join that is used at the vertices of a shape. Selection are:
  • Bevel
  • Miter
  • Round
StrokeMiterLimitSpecifies a limit on the ratio of the miter length to half the StrokeThickness of a shape.
StrokeStartLineCapSpecifies the shape at the start of a line. Selections are:
  • Flat
  • Round
  • Square
  • Triangle
StrokeThicknessSpecifies the width of the control's outline.
StyleSpecifies the style used by this control when it is rendered.
TagSpecifies an arbitrary object value that can be used to store custom information about this control.
ToolTipSpecifies the tool-tip that displays for this control in the user interface (UI).
UidSpecifies the unique identifier (for localization) for this control.
UseLayoutRoundingSpecifies a value that determines whether rendering for the object and its visual subtree should use rounding behavior that aligns rendering to whole pixels.
VerticalAlignmentSpecifies the vertical alignment characteristics applied to this control. Selections are:
  • Bottom
  • Center
  • Top
  • Stretch
VisiblilitySpecifies the visibility of this control. Selections are:
  • Collapsed
  • Hidden
  • Visible
WidthSpecifies the width of the control, in pixels.
X1Specifies the position of the line's starting point on the X axis.
X2Specifies the position of the line's ending point on the X axis.
Y1Specifies the position of the line's starting point on the Y axis.
Y2Specifies the position of the line's ending point on the Y axis.