ImageButton Example in MAUI

 In this example we are going to see ImageButton Example in MAUI. 

1) Add new page and Update code as below.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiApp1.ImageButtonEXP1"

             Title="ImageButtonEXP1">

    <VerticalStackLayout>

        <ImageButton x:Name="ImgButton" Source="logo.png" Clicked="ImgButton_Clicked"></ImageButton>

    </VerticalStackLayout>

</ContentPage>

2) Go to .CS pageand update as below.

namespace MauiApp1;

public partial class ImageButtonEXP1 : ContentPage

{

public ImageButtonEXP1()

{

InitializeComponent();

}

private void ImgButton_Clicked(object sender, EventArgs e)

{

DisplayAlert("Alert", "Clicked on Image Button","Ok");

}

}

Output:

Code in Github: https://github.com/adi501/MAUI

Reusable Image Button component example in react js

• Create Components folder under src folder
• Create  common folder under Components folder
• Create ImageButton folder under common folder
• Add index.js file under ImageButton folder and add below Code

import React from "react";

import "./style.css";

const ImageButton = ({ id, source, altText, className, clickHandler }) => {

  return (

    <>

      <span onClick={clickHandler} role="button">

        <img id={id} src={source} alt={altText} className={className} />

      </span>

    </>

  );

};

export default ImageButton;

• Add style.css file and add below Code

.img {

  border: 1px solid #ddd;

  border-radius: 4px;

  padding: 5px;

  width: 150px;

}

• Go to Components Folder and Add ImageButtonEXP.js file and add below Code

import React from "react";

import ImageButton from "./common/ImageButton/index";

export default function ImageButtonEXP() {

  const clickHandler = e => {

    alert("Clicked on Image Button");

  };

  return (

    <>

      <ImageButton

        id={"img1"}

        altText={"my inage"}

        className={"img"}

        clickHandler={clickHandler}

        source={"http://allinoneweb.net/Including/Images/home/logo.png"}

      />

    </>

  );

}

• Open App.js file and update code as below

import React from 'react';

import ImageButtonEXP from './Components/ImageButtonEXP'

function App() {

  return (

    <div>

      <ImageButtonEXP/>

    </div>

  );

}

export default App;

Output: