How can I create a round (as circle) RadButton ?

[Dmitry]

How can I create a round (as circle) RadButton, define its radius, and after all put any image (icon) on it surface? Please give me an example if this is possible ofcource. Thank you very much in advance.

[Dmitry]

And so it can be used in MVVM application!

[Martin]

Hi Yaroslav,

Depending on the theme you would like to use, you might need to retemplate the RadButton. In newer theme it can be achieved via a sufficiently large CornerRadius set to the RadButton, but that does not look perfect in all scenarios (some blurring occurs at times, the content does not get clipped properly etc). I am providing you a retemplated RadButton with Ellipses on the inside. It is for the Office2016 theme, but the principle is the same, so you can change the brushes for the theme you need (regarding the template of the button in it).

Regards,
Martin
Telerik by Progress

[Dmitry]

Thank you, Martin. I'll try later because I'm occupying now in other tasks. I don't close this post yet.

[Martin]

Hi Yaroslav,

I hope the proposed solution would fit your needs. Do not hesitate to contact us further if you are facing any issues.

Regards,
Martin
Telerik by Progress

[Dmitry]

Thank you very much, Martin. I created round RadButton with the style you had given. It works and looks nice. Thanks for your help and support.

[Barry]

How do you get left/right arrows on the buttons ?....I just see round circles.

thanks...

[Dimitar Dinev]

Hello Barry,

In order to set indicators, you can use the style provided to get your button to be an ellipse and within the button to use a RadGlyph. 

<telerik:RadButton Style="{StaticResource RadRoundButtonStyle}" Width="50" Height="50">
      <telerik:RadGlyph Glyph="" Foreground="Black" FontSize="45"/>
</telerik:RadButton>

For more information about RadGlyph, you can check the Glyphs Reference Sheet and RadGlyph articles.

Attached, you can find a sample project demonstrating this approach. Please, review it and let me know if it delivered the desired result.

Regards,
Dimitar Dinev
Progress Telerik

[Heiko]

The mentioned solution is working, but I think it much easier to set Width/Height to equal values then set CornerRadius to half of Width or Height. Just like that:

<telerik:RadButton Width="30" Height="30" CornerRadius="15" Margin="10,0">
    <telerik:RadGlyph Glyph="&#xe11e;" Foreground="Black" FontSize="20"/>
</telerik:RadButton>

 

Regards
Heiko