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

Button Border Radius & Thickness

6 Answers 407 Views
Button
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 09 Mar 2018, 09:40 PM

Button cannot have both border radius and border thickness?

Rounded corner is gone when thickness is applied.

6 Answers, 1 is accepted

Sort by
0
Cleanwatts
Top achievements
Rank 1
answered on 12 Mar 2018, 07:01 PM

I have also observed this behavior.

The result is not the same in all platforms, it seems to be something renderer related:

  • In UWP the button is rendered as expected;
  • In Android the button is rendered as if the corner radius is 0;
  • In iOS the background is rendered with rounded corners but the border is rendered as a rectangle.
0
Nick
Top achievements
Rank 1
answered on 12 Mar 2018, 08:05 PM
Thanks for confirming. Currently looking for a solution for android platform.
0
Accepted
Yana
Telerik team
answered on 14 Mar 2018, 02:32 PM
Hello,

You would need to set BorderWidth and BorderRadius in order to have border as well as rounded corners. Here is a quick example:

<telerikInput:RadButton x:Name="button"
    Text="Click me!" 
    BorderWidth="2"
    BorderColor="#4488F6"
    BorderRadius="60"
    Clicked="button_Clicked"
    />

Let me know if you experience any additional issues with this.

Regards,
Yana
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Nick
Top achievements
Rank 1
answered on 14 Mar 2018, 02:40 PM
Thanks Yana, that helped.
0
Nick
Top achievements
Rank 1
answered on 14 Mar 2018, 02:44 PM
Do you know how to get rid of spacing between radbutton's text and image?
0
Lance | Manager Technical Support
Telerik team
answered on 14 Mar 2018, 10:18 PM
Hello Nick,

Can you share a screenshot of what you're referring to? The BackgroundImage goes behind the Text. If you're talking about the padding between the edges of the button and the text, then you can modify the Padding amount.

You can think of Padding as an "inner margin", it sets the spacing between the content and the edge of the control

Demo

Here's a quick demo to illustrate the difference between three different Padding settings. If I were to guess at what you're trying to do, I also included one last button that shrinks the Height of the button in conjunction with the Padding so that you don't clip the content when shrinking the button below its min height.



Here is the code:

<StackLayout>
    <StackLayout.Resources>
        <ResourceDictionary>
            <Style x:Key="MyButtonStyle"
                TargetType="telerikInput:RadButton">
                <Setter Property="BorderWidth" Value="2"/>
                <Setter Property="BorderThickness" Value="2"/>
                <Setter Property="BorderColor" Value="#4488F6"/>
                <Setter Property="TextColor" Value="White"/>
                <Setter Property="BackgroundImage" Value="gradient_background_200x112.png"/>
                <Setter Property="HorizontalOptions" Value="Start"/>
            </Style>
        </ResourceDictionary>
    </StackLayout.Resources>
 
    <telerikInput:RadButton Text="Padding is -10"
                 Padding="-10"
                 Style="{StaticResource MyButtonStyle}"/>
         
    <telerikInput:RadButton Text="Padding is 0"
                 Padding="0"
                 Style="{StaticResource MyButtonStyle}"/>
         
    <telerikInput:RadButton Text="Padding is 10"
                 Padding="10"
                 Style="{StaticResource MyButtonStyle}"/>
             
    <telerikInput:RadButton Text="HeightRequest is 15 and Padding is 0,-7.5"
                 HeightRequest="15"
                 Padding="0,-7.5"
                 Style="{StaticResource MyButtonStyle}"/>
 
</StackLayout>

Find my dmeo attached.

Further Assistance

If you're still having trouble, please update the attached dmeo so that it replicates the issue and share it with us so that we can investigate directly. since you can't attached zip to the thread,  you can put the zipped up project on DropBox or simialr online service.

Important: be sure to delete the bin and obj folders from each project before zipping it up, this will significantly reduce the zip size.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Button
Asked by
Nick
Top achievements
Rank 1
Answers by
Cleanwatts
Top achievements
Rank 1
Nick
Top achievements
Rank 1
Yana
Telerik team
Lance | Manager Technical Support
Telerik team
Share this question
or