This is a migrated thread and some comments may be shown as answers.

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

8 Answers 586 Views
Buttons
This is a migrated thread and some comments may be shown as answers.
Dmitry
Top achievements
Rank 1
Dmitry asked on 19 Oct 2016, 11:12 AM
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.

8 Answers, 1 is accepted

Sort by
0
Dmitry
Top achievements
Rank 1
answered on 19 Oct 2016, 11:33 AM
And so it can be used in MVVM application!
0
Accepted
Martin
Telerik team
answered on 21 Oct 2016, 08:10 AM
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
Do you need help with upgrading your WPF project? Try the Telerik API Analyzer and share your thoughts!
0
Dmitry
Top achievements
Rank 1
answered on 27 Oct 2016, 10:02 AM
Thank you, Martin. I'll try later because I'm occupying now in other tasks. I don't close this post yet.
0
Martin
Telerik team
answered on 28 Oct 2016, 01:20 PM
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
Do you need help with upgrading your WPF project? Try the Telerik API Analyzer and share your thoughts!
0
Dmitry
Top achievements
Rank 1
answered on 01 Nov 2016, 11:13 AM
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.
0
Barry
Top achievements
Rank 1
answered on 04 Sep 2019, 09:13 PM

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

thanks...

0
Dimitar Dinev
Telerik team
answered on 05 Sep 2019, 11:26 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Heiko
Top achievements
Rank 1
Iron
Veteran
answered on 08 Mar 2020, 11:25 AM

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

Tags
Buttons
Asked by
Dmitry
Top achievements
Rank 1
Answers by
Dmitry
Top achievements
Rank 1
Martin
Telerik team
Barry
Top achievements
Rank 1
Dimitar Dinev
Telerik team
Heiko
Top achievements
Rank 1
Iron
Veteran
Share this question
or