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 _
    } _
}

Figure 1: The created path button

The created button

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") _
}

Figure 2: RadPathButton with PathGeometry

RadPathButton with PathGeometry

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 _
}

Figure 3: RadPathButton with ContentPlacement set to Right

RadPathButton with ContentPlacement set to 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.

Example 5: Setting the content position in XAML

<telerik:RadPathButton.PathStyle>
        <Style TargetType="Path">
            <Setter Property="Fill" Value="Red" />
            <Setter Property="Stretch" Value="Fill" />
        </Style>
    </telerik:RadPathButton.PathStyle>

Figure 4: RadPathButton with custom PathStyle

RadPathButton with custom PathStyle

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.

RadPathButton and RadGlyph

The RadPathButton can also be used with RadGlyphs.

Set RadGlyph as PathGeometry

<telerik:RadPathButton Width="50" Height="50" Padding="10"
                        PathGeometry="{telerik:RadGlyph Glyph={StaticResource GlyphGlobe}}" />

Figure 5: RadPathButton with RadGlyph

RadPathButton with RadGlyph

See Also

In this article
Not finding the help you need? Improve this article