how to put image in Radbutton

[Chetan]

Hi Telerik Team,

Is it possible to put image in RadButton?

how to make it possible ?

please let me know. if you can come with small code then it will be very helpful for me.


waiting for reply.


Thanks
Chetan

[Zarko]

Hi Chetan,

 Could you please examine the attached project and if you have further questions feel free to ask?

Regards,

Zarko

the Telerik team

[Michael Gaigg]

from the sample above:

            <telerik:RadButton Width="200" Height="50" Margin="5">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Margin="11">Bananas Button</TextBlock>
                    <Image Source="Images/bananas.png" Height="40" ></Image>
                </StackPanel>
            </telerik:RadButton>

[Jittu]

Hi,

 Border Style / Back color for the Rad button just disappears .
         <telerik:RadButton ID="RadButton3" runat="server" Text="Preferences" BorderStyle="Double" BackColor="Black">
    <Icon PrimaryIconUrl="Images/icon_preferences.png"  />
</telerik:RadButton>

Do I need to set any other property to make it work?

[Ryan]

Hey try this, I got if from the Telerik forum, there are two ways to display an image on the control:

    The first and the easiest way is to set the Image.ImageUrl property to the location of the image used. Setting the IsBackgroundImage to true enables the developer to use the image as background, and set text and icons to his/her button.

    The second way to set the image using RadButton'sCssClass property. Basically we set the background-image in the CssClass, and enable the image button functionality by setting Image.EnableImageButton=true.

This approach is preferred when you want to use an image sprite for the button (see sample below). You set the background-image and background-position in the CssClass, and then in the HoveredCssClass and PressedCssClass, only the background-position of the hovered and pressed image.If the user wants she/he can display a different image when the mouse is hovering over the control, or the button is pressed using the HoveredImageUrl and PressedImageUrl properties respectively.
Collapse imageSample for p.2 (RadButton and Image Sprites):
CSS>>>>

<style type="text/css">
    .classImage
    {
        background: url(img/categories.png);
        background-position: 0 0;
        width: 150px;
        height: 94px;
    }
    .classHoveredImage
    {
        background-position: 0 -100px;
    }
    .classPressedImage
    {
        background-position: 0 -200px;
    }
</style>


ASPX>>>>

<telerik:radbutton id="RadButton1" runat="server" text="Image Button" cssclass="classImage"
        hoveredcssclass="classHoveredImage" pressedcssclass="classPressedImage">
    <Image EnableImageButton="true" />
</telerik:radbutton>

[Matt]

None of these work with IE7 or IE8 (2013.2 version). This is insanely frustrating.

[Danail Vasilev]

Hello Matt,

You can try reusing the declaration for the RadButton's image buttons from the following demos:

• Button - Embedded Icons
• Button - Custom Icons
• Button - Image Buttons

All of these demos are using 2013.2.717 version of RadControls and are working properly in all major browsers, including IE7/IE8.

If you are still experiencing any issues with declaring RadButton as an image button, could you please provide a small code snippet that reproduces the unexpected behavior, so that we can make an investigation on our side?

Regards,
Danail Vasilev
Telerik

[Chinmaya]

Hello Danail,

I am trying to put image to RadMenuItem and below is my code

<telerik:RadMenu x:Name="menu" Grid.Column="1"  ClickToOpen="True" Background="Transparent"  Width="17" Height="17" ToolTipService.ToolTip="{Binding Source={StaticResource LocalizedStrings}, Path=Options}" ToolTipService.Placement="Bottom" Padding="0">
                        <telerik:RadMenuItem x:Name="options" IconColumnWidth="0" Width="17" Height="17" Padding="0">
                            <telerik:RadMenuItem.Icon>
                                    <Image Source="Images/setting.png" Stretch="Fill" />
                            </telerik:RadMenuItem.Icon>
                        </telerik:RadMenuItem>
                    </telerik:RadMenu>

in this even though i am setting the image Stretch ="Fill" still I get padding with respect to menu and its menuItem.

is there way to make it possible to take out that padding?

NOTE: the row height=20  where this UI is placed

[Masha]

Hello Chinmaya,

As you set IconColumnWidth to 0, you should put the icons in the Header of RadMenuItems instead of using RadMenuItem Icon property. I suggest that you use HeaderTemplate property of RadMenuItem as follow:

<DataTemplate x:Key="myHeaderTemplate">
    <Image Source="Images/setting.png" Stretch="Fill" />
</DataTemplate>

I've demonstrated the approach in the attached project.

Please let us know if you need any further help.

Regards,
Masha
Telerik