How Add image as a Burtton ?

[Dinesh]

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

[Martin Ivanov]

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:

<Window.Resources>
    <ControlTemplate x:Key="customButtonTemplate" TargetType="{x:Type telerik:RadButton}">
        <Grid SnapsToDevicePixels="True">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <!-- This is the default disabled visual state-->
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledVisual">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="MouseOver" />
                    <VisualState x:Name="Pressed">
                        <Storyboard>
                            <!-- 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" />
                            </ThicknessAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <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}"/>
        </Grid>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <telerik:RadButton Template="{StaticResource customButtonTemplate}">
        <telerik:RadButton.Content>
            <Image Source="1.png" />
        </telerik:RadButton.Content>
    </telerik:RadButton>
</Grid>

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.

Regards,
Martin
Telerik