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

Material Theme prevents Image from display in a RadButton?

2 Answers 10 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
Rob A. asked on 01 Dec 2020, 06:52 AM

When I select the Material Theme any image with a RadButton doesn't display.

<telerik:RadButton x:Name="bnApplyTreeScapeSet" Width="28" Height="28" HorizontalAlignment="Left" VerticalAlignment="Center" telerik:RadToolTipService.ToolTipContentTemplate="{x:Null}" telerik:RadToolTipService.InitialShowDelay="100" telerik:RadToolTipService.BetweenShowDelay="0">
    <Image Source="../Resources/save_32.png" Stretch="Uniform" />
    <telerik:RadToolTipService.ToolTipContent>
        <telerik:RadToolTipContentView>
            <TextBlock Text="Apply TreeScape set to Flight Simulator" />
        </telerik:RadToolTipContentView>
    </telerik:RadToolTipService.ToolTipContent>
</telerik:RadButton>

 

My save_32.png doesn't display, non of my Images in any RadButton display.  I've test ALL the other Themes and they work as expected, images display.  This issue is ONLY with Material theme ... which is a shame be cause it's a nice theme.

Thoughts?

Cheers, Rob.

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Martin Ivanov
Telerik team
answered on 03 Dec 2020, 12:53 PM

Hello Rob,

This happens because with the 28x28 pixels, the button becomes too small according to the default design of the Material theme and the button content shrinks too much. The RadButton control in the Material theme has a Padding of "16 10 16 9" which is applied also as the Margin of the ContentPresenter hosting the button's Content. This makes the content too small for the available space of 28 pixels coming from the Height and Width properties of the button.

To resolve this, set the Padding property to 0.

<telerik:RadButton Padding="0" />

Or use bigger Width and Height. This should be at least (16*2) + image width for the Width and 10 + 9 + image height for the Height.

Regards,
Martin Ivanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 03 Dec 2020, 08:10 PM

Excellent, that solved it!

Cheers, Rob.

Tags
General Discussions
Asked by
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Martin Ivanov
Telerik team
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or