RadButton with an image icon

2 posts, 0 answers
  1. Luc Baeten
    Luc Baeten avatar
    5 posts
    Member since:
    Sep 2005

    Posted 16 Jan 2019 Link to this post


    Currently I am using the Telerik for Xamarin Radbutton in my app. The buttons should be presented within a grid with rounded corners, an image and text. When I define the grid rows with dynamic height, the Radbuttons scale accordingly. However the icons within the button do not. Now I have to define the icons with specific width and height so that they fit nicely. Is it possible to let the icon scale?

    Also a lot of attributes don't work like HeightRequest, WidthRequest, Padding...Any idea how I can make this work?

    This is the code I use:

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 Title="{trans:Translate SelectListeningDevice_Title}" ControlTemplate="{StaticResource PageTemplate1}" NavigationPage.BackButtonTitle="">
        <Grid Margin="15,0,15,0">
                <RowDefinition Height="70" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="70" />
            <Label Grid.Row="0" Text="{trans:Translate SelectListeningDevice_Top}"  Style="{StaticResource LabelHeaderStyle}" />
            <Label Grid.Row="1" Text="{trans:Translate SelectListeningDevice_Text}" LineBreakMode="WordWrap"
                   HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Style="{StaticResource LabelDescriptionStyle}" />
            <telerikInput:RadButton Grid.Row="2" Text="{trans:Translate SelectListeningDevice_HeadPhone}" Command="{Binding SelectHeadPhoneCommand}" 
                                    Image="headphone.png" Style="{StaticResource RoundButtonStyle}" />
            <telerikInput:RadButton Grid.Row="3" Text="{trans:Translate SelectListeningDevice_EarBuds}" Command="{Binding SelectEarBudsCommand}" 
                                    Image="earbuds.png" Style="{StaticResource RoundButtonStyle}" />
            <Label Grid.Row="4" Text="{trans:Translate SelectListeningDevice_Explanation}" Style="{StaticResource LabelExplanationStyle}" />

    The button style is:

                <Style x:Key="RoundButtonStyle" TargetType="telerikInput:RadButton">
                    <Setter Property="BackgroundColor" Value="#CCFFFFFF" />
                    <Setter Property="CornerRadius" Value="10" />
                    <Setter Property="HorizontalContentAlignment" Value="Center" />
                    <Setter Property="TextColor" Value="{StaticResource OrangeColor}" />

    Kind regards


  2. Didi
    Didi avatar
    277 posts

    Posted 21 Jan 2019 Link to this post

    Hi Luc,

    Thank you for the provided code.

    We have an issue logged in our feedback portal regarding to the Padding and Image properties of the RadButton. A fix for this issue is provided in the R1 2019 release. In this case you should update to the latest version of Telerik UI for Xamarin - 2019.1.116.1. Please refer to the attached project.

    In order to change the height of the Button you should set Absolute value to the Height of the Grid.Row or you could use StackLayout instead of a Grid.

    I hope I was helpful.

    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