Button Border Radius & Thickness

7 posts, 1 answers
  1. Nick
    Nick avatar
    6 posts
    Member since:
    Jan 2018

    Posted 09 Mar 2018 Link to this post

    Button cannot have both border radius and border thickness?

    Rounded corner is gone when thickness is applied.

  2. VPS
    VPS avatar
    30 posts
    Member since:
    Jan 2015

    Posted 12 Mar 2018 in reply to Nick Link to this post

    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.
  3. Nick
    Nick avatar
    6 posts
    Member since:
    Jan 2018

    Posted 12 Mar 2018 in reply to VPS Link to this post

    Thanks for confirming. Currently looking for a solution for android platform.
  4. Answer
    Yana
    Admin
    Yana avatar
    4864 posts

    Posted 14 Mar 2018 Link to this post

    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
  5. Nick
    Nick avatar
    6 posts
    Member since:
    Jan 2018

    Posted 14 Mar 2018 in reply to Yana Link to this post

    Thanks Yana, that helped.
  6. Nick
    Nick avatar
    6 posts
    Member since:
    Jan 2018

    Posted 14 Mar 2018 Link to this post

    Do you know how to get rid of spacing between radbutton's text and image?
  7. Lance | Technical Support Engineer, Principal
    Admin
    Lance | Technical Support Engineer, Principal avatar
    999 posts

    Posted 14 Mar 2018 Link to this post

    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
Back to Top