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

RadButton with an image icon

1 Answer 129 Views
This is a migrated thread and some comments may be shown as answers.
Luc Baeten
Top achievements
Rank 1
Luc Baeten asked on 16 Jan 2019, 10:43 AM


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=""
             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


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 21 Jan 2019, 08:53 AM
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
Asked by
Luc Baeten
Top achievements
Rank 1
Answers by
Telerik team
Share this question