MAUI click Image to take you to a new view with a larger image

Question

MAUI click Image to take you to a new view with a larger image

Jai Holloway 110

I have an image in a control and when you click it I want to navigate to a new view that has a larger image on it.

<?xml version="1.0" encoding="utf-8" ?>
<ContentView  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TourGrosses.Controls.TourProductItem"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui">
    <Grid Padding="10" BackgroundColor="{AppThemeBinding Light={DynamicResource ArtistSummaryItemBackground}, Dark={DynamicResource ArtistSummaryItemBackgroundDark}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <telerik:RadBorder CornerRadius="8" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
            <Label x:Name="ProductLabel" 
                   Grid.Row="0" 
                   Grid.Column="0" 
                   Grid.ColumnSpan="2" 
                   HorizontalTextAlignment="Center" 
                   VerticalTextAlignment="Center" 
                   Style="{AppThemeBinding Light={DynamicResource ArtistSummaryTitle}, Dark={DynamicResource ArtistSummaryTitleDark}}" 
                   FontSize="Medium"
                   FontAutoScalingEnabled="False"/>
        </telerik:RadBorder>
        <Image x:Name="ImageIcon" Grid.Row="1" Grid.RowSpan="4" Grid.Column="0" Source="{Binding ImageSource}" HeightRequest="{OnPlatform iOS=50, Android=50}" />
        <Label Text="Qty Sold" 
               Grid.Row="1" 
               Grid.Column="1" 
               Style="{AppThemeBinding Light={DynamicResource TourProductItemLabel}, Dark={DynamicResource TourProductItemLabelDark}}" 
               FontSize="Medium"
               FontAutoScalingEnabled="False"
               Padding="5"/>
        <Label x:Name="QtySoldLabel" 
               Grid.Row="1" 
               Grid.Column="2" 
               HorizontalTextAlignment="End" 
               Style="{AppThemeBinding Light={DynamicResource TourProductItemValue}, Dark={DynamicResource TourProductItemValueDark}}" 
               FontSize="Medium"
               FontAutoScalingEnabled="False"/>
        <Label Text="Total Sales" 
               Grid.Row="2" 
               Grid.Column="1" 
               Style="{AppThemeBinding Light={DynamicResource TourProductItemLabel}, Dark={DynamicResource TourProductItemLabelDark}}" 
               FontSize="Medium"
               FontAutoScalingEnabled="False"
               Padding="5"/>
        <Label x:Name="TotalSalesLabel" 
               Grid.Row="2" 
               Grid.Column="2" 
               HorizontalTextAlignment="End" 
               Style="{AppThemeBinding Light={DynamicResource TourProductItemValue}, Dark={DynamicResource TourProductItemValueDark}}" 
               FontSize="Medium"
               FontAutoScalingEnabled="False"/>
        <Label Text="% of Gross" 
               Grid.Row="3" 
               Grid.Column="1" 
               Style="{AppThemeBinding Light={DynamicResource TourProductItemLabel}, Dark={DynamicResource TourProductItemLabelDark}}" 
               FontSize="Medium"
               FontAutoScalingEnabled="False"
               Padding="5"/>
        <Label x:Name="PercentGrossLabel" 
               Grid.Row="3" 
               Grid.Column="2" 
               HorizontalTextAlignment="End" 
               Style="{AppThemeBinding Light={DynamicResource TourProductItemValue}, Dark={DynamicResource TourProductItemValueDark}}" 
               FontSize="Medium"
               FontAutoScalingEnabled="False"/>
        <Label Text="Ratio" 
               Grid.Row="4" 
               Grid.Column="1" 
               Style="{AppThemeBinding Light={DynamicResource TourProductItemLabel}, Dark={DynamicResource TourProductItemLabelDark}}" 
               FontSize="Medium"
               FontAutoScalingEnabled="False"
               Padding="5"/>
        <Label x:Name="RatioLabel" 
               Grid.Row="4" 
               Grid.Column="2" 
               HorizontalTextAlignment="End" 
               Style="{AppThemeBinding Light={DynamicResource TourProductItemValue}, Dark={DynamicResource TourProductItemValueDark}}" 
               FontSize="Medium"
               FontAutoScalingEnabled="False"/>
    </Grid>
</ContentView>

Nancy Vo (WICLOUD CORPORATION) 4,765 Reputation points Microsoft External Staff Moderator

2026-05-27T10:51:27.4366667+00:00

Hi @Jai Holloway ,

I will look into this and I will get back to you as soon as possible.
Jai Holloway 110 Reputation points

2026-05-27T10:55:39.1766667+00:00

I can't figure out what the AI answer is saying. It says create an event handler, but use it in content view that hosts the control. But it doesn't bind to the event. Do I need to code a virtual event handler?
Jai Holloway 110 Reputation points

2026-05-27T12:03:14.5366667+00:00

I figured it out, but I can't get the larger images to render. Only the small image renders and it pixelates on the larger screen
Jai Holloway 110 Reputation points

2026-05-27T13:21:01.8533333+00:00

Right, I figured it all out. The trick is to add the imagebutton, like the AI said, but the onclick handler needs to be public and redirect to a new form. The new form needs an Image with a Bindable Source property and it works. Don't forget to set both image sources.

Answer accepted by question author

AI answer

Use a control that supports click/tap and navigation, or attach a behavior to the Image.

Two common approaches in .NET MAUI:

Replace Image with ImageButton and handle Clicked:

<ImageButton x:Name="ImageIcon"
             Grid.Row="1"
             Grid.RowSpan="4"
             Grid.Column="0"
             Source="{Binding ImageSource}"
             HeightRequest="50"
             Clicked="OnImageIconClicked" />

Code-behind of the page that hosts this ContentView:

void OnImageIconClicked(object sender, EventArgs e)
{
    // Navigate to a page that shows the larger image
    // assuming NavigationPage is used and ImageSource is bound
    var vm = BindingContext; // or ((ImageButton)sender).BindingContext
    Navigation.PushAsync(new LargeImagePage(vm));
}

LargeImagePage would contain an Image with a larger HeightRequest/Aspect and its Source bound to the same image property.

ImageButton is designed exactly for “image that behaves like a button” and exposes Clicked and Command for navigation.

Keep Image and use a behavior that reacts to touch

If using .NET MAUI Community Toolkit, attach ImageTouchBehavior to change the image on press/hover and handle navigation via command:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

<Image x:Name="ImageIcon"
       Grid.Row="1"
       Grid.RowSpan="4"
       Grid.Column="0"
       Source="{Binding ImageSource}"
       HeightRequest="50">
    <Image.Behaviors>
        <toolkit:ImageTouchBehavior
            Command="{Binding ShowLargeImageCommand}" />
    </Image.Behaviors>
</Image>

In the viewmodel:

public ICommand ShowLargeImageCommand => new Command(async () =>
{
    await Shell.Current.GoToAsync("largeimagepage");
});

Then define a Shell route for the large-image page and bind its Image.Source to the appropriate property.

Both approaches give a tappable image that navigates to a new view with a larger image; ImageButton is the simplest when only a click is needed.

References:

AI-generated content may be incorrect. Read our transparency notes for more information.

1 additional answer

Your answer

Nancy Vo (WICLOUD CORPORATION) 4,765 Reputation points Microsoft External Staff Moderator

2026-05-27T10:51:27.4366667+00:00

Hi @Jai Holloway ,

I will look into this and I will get back to you as soon as possible.
Jai Holloway 110 Reputation points

2026-05-27T10:55:39.1766667+00:00

I can't figure out what the AI answer is saying. It says create an event handler, but use it in content view that hosts the control. But it doesn't bind to the event. Do I need to code a virtual event handler?
Jai Holloway 110 Reputation points

2026-05-27T12:03:14.5366667+00:00

I figured it out, but I can't get the larger images to render. Only the small image renders and it pixelates on the larger screen
Jai Holloway 110 Reputation points

2026-05-27T13:21:01.8533333+00:00

Right, I figured it all out. The trick is to add the imagebutton, like the AI said, but the onclick handler needs to be public and redirect to a new form. The new form needs an Image with a Bindable Source property and it works. Don't forget to set both image sources.

Answer 1

Hello @Jai Holloway ,

Thanks for your question.

To navigate to a new view with a larger image, I recommend using ImageButton since it supports click events directly.

Using ImageButton instead of Image

<ImageButton x:Name="ImageIcon"
             Grid.Row="1" Grid.RowSpan="4" Grid.Column="0"
             Source="{Binding ImageSource}"
             HeightRequest="{OnPlatform iOS=50, Android=50}"
             Clicked="OnImageClicked" />

Handle the click in code-behind

public async void OnImageClicked(object sender, EventArgs e)
{
    var imageSource = ((ImageButton)sender).Source;

    await Navigation.PushAsync(new LargeImagePage(imageSource));
}

Create the new full-size page

Right-click your Views folder → Add New Item → ContentPage and name it LargeImagePage

LargeImagePage.xaml

<?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="TourGrosses.Views.LargeImagePage"
             BackgroundColor="Black">

    <Image x:Name="LargeImage"
           Aspect="AspectFit"
           VerticalOptions="Center"
           HorizontalOptions="Center">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnTappedGoBack"/>
        </Image.GestureRecognizers>
    </Image>

</ContentPage>

LargeImagePage.xaml.cs

public partial class LargeImagePage : ContentPage
{
    public LargeImagePage(ImageSource imageSource)
    {
        InitializeComponent();
        LargeImage.Source = imageSource;
    }

    private async void OnTappedGoBack(object sender, TappedEventArgs e)
    {
        await Navigation.PopAsync();
    }
}

For more information, you can refer to these documents:

I hope this information is useful to you. If so, please consider following the guidance to provide feedback.

Nancy Vo (WICLOUD CORPORATION) 4,765 Reputation points Microsoft External Staff Moderator

2026-06-01T06:05:52.59+00:00

Hi @Jai Holloway ,

Please don’t hesitate to contact me if you’re still interested or have any questions.

Share via

MAUI click Image to take you to a new view with a larger image

1 additional answer

Your answer