Edit this page

PathButton

With our Q3 2014 official release we introduced the RadPathButton control. It derives from the RadButton. This means it inherits all the features of the standard button. Additionally it adds a Path control to its default template. This allows you to easily add custom geometry to your button. You can instantiate this control in both XAML and code behind (see Example 1 and 2).

Example 1: Defining a button in XAML

<telerik:RadPathButton>
    <telerik:RadPathButton.PathGeometry>
        <EllipseGeometry RadiusX="10" RadiusY="10"></EllipseGeometry>
    </telerik:RadPathButton.PathGeometry>
</telerik:RadPathButton>

Example 2: Defining a button in code

RadPathButton pathButton = new RadPathButton() { PathGeometry = new EllipseGeometry() { RadiusX = 10, RadiusY = 10 } };
Dim pathButton As New RadPathButton() With { _
    .PathGeometry = New EllipseGeometry() With { _
        .RadiusX = 10, _
        .RadiusY = 10 _
    } _
}

Note that in XAML you can directly use string format Path Markup Syntax

Example 3: Setting the path geometry in XAML

<telerik:RadPathButton PathGeometry="M3,7L9,7L9,4L13,8L9,12L9,9L3,9z" />

To achieve the same results through code you can use our GeometryParser

Example 3: Setting the path geometry in code

RadPathButton pathButton = new RadPathButton() { PathGeometry = GeometryParser.GetGeometry("M3,7L9,7L9,4L13,8L9,12L9,9L3,9z") };
Dim pathButton As New RadPathButton() With { _
    .PathGeometry = GeometryParser.GetGeometry("M3,7L9,7L9,4L13,8L9,12L9,9L3,9z") _
}

Customizing the RadPathButton

The RadPathButton exposes the ContentPlacement property. It is of type Dock and gets or sets this position of the content relative to the Path element. This property accepts Left, Top, Right and Bottom values. The default is Bottom.

Example 4: Setting the content position in XAML

<telerik:RadPathButton Content="Path Button" ContentPlacement="Right" />

Example 5: Setting the content position in code

RadPathButton pathButton = new RadPathButton() { Content = "Path button", ContentPlacement = Dock.Right };
Dim pathButton As New RadPathButton() With { _
    .Content = "Path button", _
    .ContentPlacement = Dock.Right _
}

In addition to all customizing options that are inherited from the RadButton the PathButton has a PathStyle property. This property gets or sets the style of the Path element in the template.

Also the RadPathButton exposes the ContentMargin property. It is of type Thickness and determines the margin around its content. This allows users to adjust size of the Path that the button hosts. For adjusting the position of the Path itself users can use the RadPathButton.Padding property.