Key Properties
This article will list the key properties provided by the RadCallout control.
Geometry customization
The RadCallout provides 3 properties for customizing the arrow of its geometry - ArrowBasePoint1 , ArrowBasePoint2 and ArrowAnchorPoint.
- ArrowAnchorPoint: A property of type Point that gets or sets the anchor point of the arrow geometry.
- ArrowBasePoint1: A property of type Point that gets or sets the first base point of the arrow geometry.
- ArrowBasePoint2: A property of type Point that gets or sets the second base point of the arrow geometry.
The properties are of type Point and represent relative coordinates (between 0 and 1) where for example X = 0 and Y = 0 means the topleft point of the callout body and X= 1, Y = 1 means the 'bottom-right' point. In the figures you can see the default values of the properties [0.25, 0.5], [0.75, 0.5] and [0.5, 1.25].
Important to note here is that the widht and height of the callout apply only to the body of the geometry but not to the arrow. This way it is very easy to keep a fixed size of the main shape while making the big arrow exceeding the shape size.
Figure 1:
MeasurePathWithInfinity: A boolean property that gets or sets a value indicating whether the path in the control template is measured with infinity or not.
Stretch: A property of type Strech that gets or sets the stretch of the path from the control template.
CornerRadius: A property of type double that gets or sets the corner radius used for the Telerik.Windows.Controls.CalloutType.RoundedRectangle geometry.
TextTrimming: A property of type TextTrimming that gets or sets the text trimming mode of the underlying TextBlock.
TextAlignment: A property of type TextAlignment that gets or sets the text alignment of the underlying TextBlock.
TextWrapping: A property of type TextWrapping that gets or sets the text wrapping mode of the underlying TextBlock.
StrokeThickness: A property of type double that gets or sets the stroke thickness of the underlying path.
GeometryResult: A property of type Geometry that gets the combined (body and arrow) geometry of the callout control.
Geometry: A property of type Geometry that gets or sets the desired (body) geometry of the callout control.
StrokeDashArray: A DoubleCollection property that gets or sets the stroke dash array of the underlying path.
-
CalloutType: A property of type CalloutType that gets or sets the callout type of the callout control. The CalloutType is an enumeration and it allows the following values:
- Rectangle: Rectangle geometry.
- RoundedRectangle: Rounded rectangle geometry.
- Ellipse: Ellipse geometry.
- Cloud: Cloud geometry.
- Kaboom: Kaboom geometry.
-
Custom: Set custom geometry.
Figure 2: RadCallout types
-
ArrowType: A property of type CalloutArrowType that gets or sets gets or sets the arrow type of the callout control. The ArrowType is an enumeration and it allows the following values:
- None: No arrow.
- Triangle: Triangle or line arrow consisted of 3 pivot points.
- Circles: Series of circles.
- Ellipses: Series of ellipses.
Figure 3: RadCallout arrow types
Custom Geometry
If none of the build-in callout types satisfy your needs, the control allows you to set a custom one. For example, using the Geometry property, you can set your own look for the control. In this case, don't forget to set the CalloutType property to Custom to force the engine to use your geometry.
Example 1: Setting Custom Type
<telerik:RadCallout Margin="20" VerticalAlignment="Top" Content="Callout" x:Name="callout"
Width="120" Height="80"
Geometry="M14.248657,39.417725C14.248657,39.417725 14,29.667244 21.3302,24.000578 28.663574,18.333912 39.328003,20.250563 39.328003,20.250563 39.328003,20.250563 43.494385,0.5 63.741943,0.5 82.739746,0.5 87.655762,19.750601 87.655762,19.750601 87.655762,19.750601 100.32007,16.000544 108.31909,24.750582 114.66797,31.695599 112.90283,40.4174 112.90283,40.4174 112.90283,40.4174 123.16272,45.471794 120.81873,58.500729 117.81824,75.179268 98.904663,74.25106 98.904663,74.25106L18.581177,74.25106C18.581177,74.25106 0.5,73.084129 0.5,57.750725 0.5,42.417324 14.248657,39.417725 14.248657,39.417725z"
CalloutType="Custom">
</telerik:RadCallout>
Figure 3: Custom Geometry
