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

How Add image as a Burtton ?

1 Answer 68 Views
Buttons, RadioButton, CheckBox, etc
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Dinesh asked on 15 Sep 2014, 08:13 AM
Hi i am developing WPF application using MVVM and i am try to add image as a button (like windows 8 start page button) Is there a way to have a radButton only display as an image? I have an image that i would like to use as a button alone, but I can't seem to get the radButton borders to go away and the radButton background color to become transparent.  Help me

1 Answer, 1 is accepted

Sort by
Martin Ivanov
Telerik team
answered on 18 Sep 2014, 06:39 AM
Hello Dinesh,

In order to achieve your requirement you can try couple approaches. The first one is to entirely re-template RadButton (to remove the visual states that animates the borders and backgrounds) and place an Image element in its Content. Here is an example for this:

    <ControlTemplate x:Key="customButtonTemplate" TargetType="{x:Type telerik:RadButton}">
        <Grid SnapsToDevicePixels="True">
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <!-- This is the default disabled visual state-->
                    <VisualState x:Name="Disabled">
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledVisual">
                                <DiscreteObjectKeyFrame KeyTime="0">
                            <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content"/>
                    <VisualState x:Name="MouseOver" />
                    <VisualState x:Name="Pressed">
                            <!-- This is just a sample animation to demonstrate a custom visual state -->
                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00" Storyboard.TargetName="Content">
                                <SplineThicknessKeyFrame KeyTime="0" Value="15, 15, 0, 0" />
            <Border x:Name="DisabledVisual" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="#FFE0E0E0" CornerRadius="{TemplateBinding CornerRadius}" Visibility="Collapsed"/>
            <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" TextElement.Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    <telerik:RadButton Template="{StaticResource customButtonTemplate}">
            <Image Source="1.png" />
Note that this is just an example. You can use to as a base for your requirement.

The other approach is to use a native Image element instead and subscribe for its MouseLeftButtonDown event to imitate click.

Please let me know if you need any further assistance.

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
Buttons, RadioButton, CheckBox, etc
Asked by
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Share this question