Material Theme prevents Image from display in a RadButton?

[Rob A.]

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.

 

[Martin Ivanov]

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

[Rob A.]

Excellent, that solved it!

Cheers, Rob.