Version

Configuring the Orientation and Direction (XamBulletGraph)

Purpose

This topic explains how to configure the XamBulletGraph™ control with vertical scale and/or inverted scale direction.

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This topic provides conceptual information about the XamBulletGraph control including its main features, minimum requirements, and user functionality.

This topic explains how to add the XamBulletGraph control to a WPF application.

Introduction

Scale Orientation and Direction Configuration Summary

The XamBulletGraph control supports vertical and horizontal orientations of the scale. By default, the scale orientation is horizontal. In vertical orientation, the scale values increase in upward direction and the numbering labels are positioned on its left.

BulletGraph Configuring the Orientation and Direction 1.png

It is defined by the Orientation property of the control.

The scale direction is the direction in which the performance bar extends and the values of the scale increase. It can be standard (left-to-right or at horizontal orientation and bottom-to-top at vertical orientation) or inverted (right-to-left or at horizontal orientation and top-to-bottom or at vertical orientation).

Inverted direction at horizontal orientation Inverted direction at vertical orientation
BulletGraph Configuring the Orientation and Direction 2.png
BulletGraph Configuring the Orientation and Direction 3.png

Scale direction is defined by the IsScaleInverted property of the control. The default orientation is standard.

Scale Orientation and Direction Configuration Summary Chart

The following table explains briefly the configurable aspects of the XamBulletGraph ’s control orientation and scale inversion and maps them to properties that configure them.

Configurable aspect Details Properties

Scale Orientation

Horizontal or vertical orientation of the bullet graph scale inside the control.

Scale Direction

Direction of the bullet graph, standard or inverted.

Configuring the Scale Orientation

Overview

The orientation (horizontal or vertical) of the bullet graph is specified by the Orientation property of the control.

Property Settings

The following table maps the desired configuration to its respective property settings.

In order to: Use this property: And set it to:

Specify horizontal orientation

LinearScaleOrientation.Horizontal

Specify vertical orientation

Orientation

LinearScaleOrientation.Vertical

Example

The screenshot below demonstrates how the XamBulletGraph looks as a result of the following settings:

Property Value

“Vertical”

BulletGraph Configuring the Orientation and Direction 1.png

Following is the code that implements this example.

In XAML:

<ig:XamBulletGraph
    Orientation="Vertical" />

In C#:

bulletGraph.Orientation = LinearScaleOrientation.Vertical;

In Visual Basic:

bulletGraph.Orientation = LinearScaleOrientation.Vertical

Configuring the Scale Direction (Scale Inversion)

Overview

With horizontal orientation, the standard (default) direction of the scale is left-to-right, which means that the scale begins at the left edge of the Graph area and ends at its right edge (the ScaleStartExtent indicates an outset from the left edge of the Graph area and the ScaleEndExtent – the distance from the left edge of the Graph area to the end of the scale):

BulletGraph Configuring the Orientation and Direction 5.png

When the direction is inverted, the scale begins at the right edge of the Graph area and ends at its left edge (the ScaleStartExtent indicates an outset from the right edge of the Graph area and the ScaleEndExtent – the distance from the right edge of the Graph area to the end of the scale):

BulletGraph Configuring the Orientation and Direction 6.png

With vertical orientation, the standard (default) direction of the scale is bottom-to-top, which means that the scale begins at the bottom of the Graph area and ends at its top (the ScaleStartExtent indicates an outset from the bottom edge of the Graph area and the ScaleEndExtent – the distance from the bottom edge of the Graph area to the end of the scale):

BulletGraph Configuring the Orientation and Direction 7.png

When the direction is inverted, the scale begins at the top edge of the Graph area and ends at its bottom edge (the ScaleStartExtent indicates an outset from the top edge of the Graph area and the ScaleEndExtent – the distance from the top edge of the Graph area to the end of the scale):

BulletGraph Configuring the Orientation and Direction 8.png

Property settings

The following table maps the desired configuration to its respective property settings.

In order to: Use this property: And set it to:

Configure standard direction

“false”

Configure inverted direction

IsScaleInverted

“true”

Example – inverted direction at horizontal orientation

The screenshot below demonstrates how the XamBulletGraph looks as a result of the following settings:

Property Value

“true”

“Horizontal”

BulletGraph Configuring the Orientation and Direction 2.png

Following is the code that implements this example.

In XAML:

<ig:XamBulletGraph
    IsScaleInverted="True" />

In C#:

bulletGraph.IsScaleInverted = true;

In Visual Basic:

bulletGraph.IsScaleInverted = true

Example – inverted direction at vertical orientation

The screenshot below demonstrates how the XamBulletGraph looks as a result of the following settings:

Property Value

“true”

“Vertical”

BulletGraph Configuring the Orientation and Direction 3.png

Following is the code that implements this example.

In XAML:

<ig:XamBulletGraph
    Orientation="Vertical"
    IsScaleInverted="True" />

In C#:

bulletGraph.Orientation = LinearScaleOrientation.Vertical;
bulletGraph.IsScaleInverted = true;

In Visual Basic:

bulletGraph.Orientation = LinearScaleOrientation.Vertical
bulletGraph.IsScaleInverted = true

Related Content

Topics

Topic Purpose

This is a group of topics covering in detail the visual elements the XamBulletGraph control (like the scale elements, performance bar, comparative marker and ranges, etc.) and explaining, with code examples, how to configure them.