RadButton with an image icon

[Luc Baeten]

Hello

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"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="PureToneModule.Views.SelectListeningDevice"
             xmlns:trans="clr-namespace:PureToneModule.Localization"
             xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
             Title="{trans:Translate SelectListeningDevice_Title}" ControlTemplate="{StaticResource PageTemplate1}" NavigationPage.BackButtonTitle="">
    <Grid Margin="15,0,15,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="70" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="70" />
        </Grid.RowDefinitions>
        <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}" />
    </Grid>
</ContentPage>

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}" />
            </Style>

Kind regards

Luc

[Didi]

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.

Regards,
Didi
Progress Telerik