RadButton: CornerRadius ignored

1 Answer 972 Views
Buttons
Heiko
Top achievements
Rank 1
Iron
Veteran
Heiko asked on 10 Jun 2021, 03:37 PM

I created a simple round button by setting Width and Height properties to the same size and CornerRadius to Width/2. Until now this worked perfect in my application.

After updating to R2.2021 (Telerik.UI.for.Wpf.NetCore, 2021.2.511) I noticed that buttons ignore the CornerRadius property when using the Fluent Theme. This was not the behavior in previous releases. 

Steps to reproduce:

  1. Create a WPF Core project (.NET Core 3.1)
  2. Add Telerik.UI.for.Wpf.NetCore (2021.2.511) via NuGet package manager
  3. Modify App.xaml to include all resource dictionaries necessary for Fluent Theme
  4. Create a button:
<telerik:RadButton Content="DOH!"
                   Height="100" Width="100"
                   CornerRadius="50" />

The button is just a square, not round. When changing the theme to e. g. VisualStudio 2019 the button is round again. (see attached pictures)

Regards
Heiko

1 Answer, 1 is accepted

Sort by
0
Psyduck
Top achievements
Rank 5
Bronze
Bronze
Bronze
answered on 11 Jun 2021, 06:24 AM | edited on 11 Jun 2021, 06:29 AM

Hello.

I know that Fluent theme needs to be set separately.

I noticed that the button shape changes when I use "mat:Material Assist.Corner Radius".

xmlns:mat="clr-namespace:Telerik.Windows.Controls.MaterialControls;assembly=Telerik.Windows.Controls"

<telerik:RadButton Content="Button" Width="80" mat:MaterialAssist.CornerRadius ="40"/>

 

Or it can be changed to Template.

<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type telerik:RadButton}">
					<Border CornerRadius="40" Background="{TemplateBinding Background}">
						<ContentPresenter HorizontalAlignment="Center"VerticalAlignment="Center"/>
					</Border>
				</ControlTemplate>
			</Setter.Value>
		</Setter>

 

 

Heiko
Top achievements
Rank 1
Iron
Veteran
commented on 11 Jun 2021, 06:45 AM

Hi, thanks for the answer, and yes: when using "mat:MaterialAssist.CornerRadius" it is working. The fact is, it worked fine in previous versions, but not in the current version, and that is nowhere documented. I consider this as a bug.
Psyduck
Top achievements
Rank 5
Bronze
Bronze
Bronze
commented on 11 Jun 2021, 08:40 AM | edited

In my case, I am using telerik 2021.1.426.45, but it does not work if I use CornerRadius. Only use 'mat:MaterialAssist.CornerRadius'.
It seems that the developer can check whether this is a bug or not.
Dilyan Traykov
Telerik team
commented on 15 Jun 2021, 09:11 AM

Hello, Heiko and Psyduck,
Indeed, alongside a bug fix for the CornerRadius in the RadSplitButton in our R1 2021 release, we decided to unify the way a corner radius is applied to all types of buttons. This does in fact result in now having to set the "mat:MaterialAssist.CornerRadius" property instead.
As per your feedback, we will be sure to mention this in our online documentation. We do apologize for any inconvenience caused by this.
Heiko
Top achievements
Rank 1
Iron
Veteran
commented on 22 Jun 2021, 08:21 AM

Hello, Dilyan! Thanks for your comment. I think your answer is only half correct. I tried several themes and as far as I can see it setting "mat:MaterialAssist.CornerRadius" is only necessary in Fluent Theme. Even with Material Theme it is sufficient to set "CornerRadius".
This is ugly because it limits my development and I can't offer my customers the ability to change themes "on the fly".
Dilyan Traykov
Telerik team
commented on 24 Jun 2021, 01:04 PM

Hello, Heiko! Indeed, the MaterialAssist properties are only respected in the Office2019, VisualStudio2019, Crystal, Fluent and Material themes. You can read more about this in the ThemeHelper article from which the MaterialAssist class inherits. As you've noticed, however, there are some oversights in some controls for some of the properties but we do have open bug reports for most of these cases. Here's one for the CornerRadius which you can follow.
What I can suggest is to create separate styles for the affected controls, extract these styles in separate resource dictionaries (one for each theme you're using) and then merge these dictionaries when changing the applied theme as explained in the Switching Custom Styles with Themes at Runtime. I do hope you would find such an approach applicable.
Tags
Buttons
Asked by
Heiko
Top achievements
Rank 1
Iron
Veteran
Answers by
Psyduck
Top achievements
Rank 5
Bronze
Bronze
Bronze
Share this question
or