Mouseover Image On Buttons In FMX XE2

Question

How to make a mouseover image for button ? I used to make in FMX 2 buttons, and fill it with bitmap. But its owful . I found property IsMouseOver

procedure TForm1.Button1Paint(Sender: TObject; Canvas: TCanvas;
  const ARect: TRectF);
begin
if Button1.IsMouseOver  then
begin
  Button1.Text:='yes';
end
else
begin
  Button1.Text:='nono';
end;
end;

But , i realy dont understand how to use containers, i only want to change fill ( my bitmap) by the method written before. Can someone give a simple code?

Or maybe its easier to make in VCL ?

Answer 1

Put two separate TImage controls on the button (drag them onto the button in the Structure View):

Size them to fit the button, and give each a separate image using the MultiResBitmap property editor.

Create an event handler for one of the TImage components for the OnMouseEnter and OnMouseLeave events, and then assign those handlers to both of the TImage components:

procedure TForm1.Image1MouseEnter(Sender: TObject);
begin
  Image1.Visible := False;
  Image2.Visible := True;
end;

procedure TForm1.Image1MouseLeave(Sender: TObject);
begin
  Image1.Visible := True;
  Image2.Visible := False;
end;