-1

I'm trying to change an image using events like Click, MouseEnter and MouseLeave. In first place I tried to do it with Buttons in order to have "Click" event too, but I don't know how to remove that lightblue background that appears by default when I put the mouse over the button with a png background.

After this, I tried to use , setting the resource image.png in its Source.

The main problem is that I don't know what to do in code-behind to change between Image Resources in order to change the Source of the control.

I want to know too if I can use a "Click Event" with an control

Update1:

Ok, I tried it by using Binding For now I think its solved, but I have another problem. I don't know exactly how to remove that "border". I tried to put the borderbrush property of the buttons to 0, but it seems to be another property or another control.

UI

Thanks.

jark
  • 1
  • 1

1 Answers1

0

You can put an image as the content of a button, and add an Click event to that Button. This way, an event gets called when you press the button.

        <Button Margin="0,10" Name="mainButton" Click="mainButton_Click">
            <Button.Content>
                <Image Source="C:/reference-to-image" Height="30"/>
            </Button.Content>
        </Button>

In the background you can than change the Picture.

This question shows how to do that in the background.

WPF Image UriSource and Data Binding using http:\\ URL

PS. If you want to change the behavior of controls on certain events things like pressing the left mouse button on it, you have to overwrite the event triggers using 

<Style TargetType="TextBlock">
                <Style.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <EventTrigger.Actions>
                          ...

Hope this helps.

UPDATE

You can set the BorderThickness to 0 and than set the Value of the Padding Property to 0. The Button Control has a predefined padding value, which makes it look like it has a border. Padding is the space inside the control and the content e.g the space between the button and the picture

<StackPanel Orientation="Horizontal">
        <Button Click="Button_Click"  Padding="0" BorderThickness="0">
            <Image Source="link-to-pic" Height="100"/>
        </Button>
        <Button Click="Button_Click"   Padding="0"  BorderThickness="0">
            <Image Source="link-to-pic" Height="100"/>
        </Button>
</StackPanel>
NickTheDev
  • 209
  • 4
  • 10