How Add image as a Burtton ?

2 posts, 0 answers
  1. Dinesh
    Dinesh avatar
    1 posts
    Member since:
    Sep 2014

    Posted 15 Sep 2014 Link to this post

    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
  2. Martin Ivanov
    Martin Ivanov avatar
    2646 posts

    Posted 18 Sep 2014 Link to this post

    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.
Back to Top