CODEWITHSUNDEEP
wpfbuttoncontrols
eYe
eYe

Reputation: 1733

WPF image button control

Long time is now that I have been searching for a quality WPF image button control. I need the button to consist of an image only and let me set image options for hovering and pressing. All current solutions on SO and the rest of the web include CustomTemplate based solutions that are not very friendly (i.e. TriState Button).

Maybe there is a set of controls like Modern UI or MahApps that someone could point me to that have this kind of button?

Upvotes: 0

Views: 4394

Answers (3)

almulo
almulo

Reputation: 4978

Here you have: https://imagebuttonwpf.codeplex.com/releases/view/70356

You'll have to download de code, compile it, and then use the generated DLL in your project.

Check the code, it's pretty easy to make, and following CJK instructions for the actual control you could've done it yourself in no time!

Upvotes: 1

CJK
CJK

Reputation: 1000

EDIT: This control can be reused throughout a project as many times as you need it acts exactly as any other control would and is used the same way as any other control library. There is no Border effect and you can add whatever hover effect you want. This is how it works.

Add a folder named CustomControls to your solution.

Create a custom control(WPF) named ImageButton in that folder. The custom control code goes in there.

Now a folder named Themes should have been created in your project with a resourcedictionary named generic.xaml inside it. Open it and use the resourcedictionary code.

Now add this to your window tag

xmlns:b="clr-namespace:MyProject.CustomControls"

Now you can use the control in that window as many times as you'd like just like a regular button by using the tag structure at the end of the answer.

Here is one that I made you can set the Image source, height and width all from your main window and all standard button events are there.

Here is the custom control

namespace MyProject.CustomControls
{
public class ImageButton : Button
{
     public static DependencyProperty SourceProperty =
        DependencyProperty.Register(
            "Source",
            typeof(Uri),
            typeof(ImageButton));

    static ImageButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
    }

    public Uri Source
    {
        get { return (Uri)GetValue(SourceProperty); }
        set { SetValue(SourceProperty, value); }
    }
}

}

Here is the style in the resourcedictionary, you can add mouseover event and a button.pressed event in the triggers section or remove the triggers and set them on your window.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:b="clr-namespace:MyProject.CustomControls">

<Style x:Key="{x:Type b:ImageButton}" TargetType="{x:Type b:ImageButton}">
    <Setter Property="Height" Value="{Binding Path=Height, RelativeSource={RelativeSource TemplatedParent}}"/>
    <Setter Property="Width" Value="{Binding Path=Width, RelativeSource={RelativeSource TemplatedParent}}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type b:ImageButton}">
                <Grid x:Name="LayoutGrid">
                    <Image x:Name="_Image" HorizontalAlignment="Center" VerticalAlignment="Center" Width="{TemplateBinding Width}"
                           Source="{Binding Path=Source, RelativeSource={RelativeSource TemplatedParent}}" Height="{TemplateBinding Height}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="" TargetName="" Value=""/>
                    </Trigger>
                    <Trigger Property="Button.IsPressed" Value="True">
                        <Setter Property="" TargetName="" Value=""/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

To use it in your project add the namespace to the window and then the tag will be like this

<b:ImageButton Source="Image.png" Height="50" Width="50" Click="do_Something"/>

Upvotes: 3

Dinesh balan
Dinesh balan

Reputation: 495

You can try this one

    <Button Background="Transparent" BorderThickness="0">
            <Image Source="Azure Automation.jpg"/>
    </Button>

Upvotes: -1

Related Questions