C# MAUI images are not showing in imagebutton

Question

1.00/5 (2 votes)

See more:

hi,
I have image placed in resources/images folder.

Trying to put image in some imagebuttons but images are not being shown on screen. any help is much appreciated.

What I have tried:

XAML

    <ScrollView>
        <StackLayout
                               HorizontalOptions="Center"
                       VerticalOptions="Start" >
            <ImageButton
                    Source="images\infinix2.jpg"
                x:Name="PriceLists"
                SemanticProperties.Hint="Price Lists"
                Clicked="OnPriceListsClicked"
                HorizontalOptions="Center" />
            <ActivityIndicator x:Name="InfinixActivity" IsRunning="True" IsVisible="False"/>
            <ImageButton
                    Source="images\infinix2.jpg"
                x:Name="Infinix"
                SemanticProperties.Hint="Infinix"
                Clicked="OnInfinixClicked"
                HorizontalOptions="Center" 
                    VerticalOptions="CenterAndExpand" />

            <ActivityIndicator x:Name="SamsungActivity" IsRunning="True" IsVisible="False"/>
            <ImageButton
                    Source="images\infinix2.jpg"
                x:Name="Samsung"
                SemanticProperties.Hint="Samsung"
                Clicked="OnSamsungClicked"
                HorizontalOptions="Center" 
                    VerticalOptions="CenterAndExpand" />

            <ActivityIndicator x:Name="VivoActivity" IsRunning="True" IsVisible="False"/>
            <ImageButton
                    Source="images\infinix2.jpg"
                x:Name="Vivo"
                SemanticProperties.Hint="Vivo"
                Clicked="OnVivoClicked"
                HorizontalOptions="Center" 
                    VerticalOptions="CenterAndExpand" />

            <ActivityIndicator x:Name="OppoActivity" IsRunning="True" IsVisible="False"/>
            <ImageButton
                    Source="images\infinix2.jpg"
                x:Name="Oppo"
                SemanticProperties.Hint="Oppo"
                Clicked="OnOppoClicked"
VerticalOptions="CenterAndExpand" 
                HorizontalOptions="Center" />

            <ActivityIndicator x:Name="TecnoActivity" IsRunning="True" IsVisible="False"/>
            <ImageButton
                    Source="images\infinix2.jpg"
                x:Name="Tecno"
                SemanticProperties.Hint="Tecno"
                Clicked="OnTecnoClicked"
                HorizontalOptions="Center" 
                    VerticalOptions="CenterAndExpand" />

            <ActivityIndicator x:Name="RealmeActivity" IsRunning="True" IsVisible="False"/>
            <ImageButton
                    Source="images\infinix2.jpg"
                x:Name="Realme"
                SemanticProperties.Hint="Realme"
                Clicked="OnRealmeClicked"
                HorizontalOptions="Center" 
                    VerticalOptions="CenterAndExpand" />

            <ActivityIndicator x:Name="XiaomiActivity" IsRunning="True" IsVisible="False"/>
            <ImageButton
                    Source="images\infinix2.jpg"
                x:Name="Xiaomi"
                SemanticProperties.Hint="Xiaomi"
                Clicked="OnXiaomiClicked"
VerticalOptions="CenterAndExpand" 
                HorizontalOptions="Center" />
        </StackLayout>
    </ScrollView>

Posted 10-Jul-23 2:34am

suhail malik 2023

Updated 10-Jul-23 4:16am

Add a Solution

2 solutions

Solution 1

If the images folder is outside the root folder, you need to tell your code as well -
You first need to set your images Build Action to Embedded resource and set value for 'MyImageSource' in your view model constructor.

In your project -

XAML

<MauiImage Include="Resources\Images\*" />

The file in your image folder will be -

Quote:
Resources/Images/infinix2.jpg

Define the image source -

XAML

[ObservableProperty]
ImageSource image;

Now use the image -

XAML

Image = "infinix2.png";

As a summary, your code will look like -

public partial  class MyViewModel:ObservableObject 
    {
        [ObservableProperty]
        ImageSource myImageSource;
    
        public MyViewModel()
        {
            MyImageSource = ImageSource.FromResource("YourAppName.Resources.Images.infinix2.png", typeof(MyViewModel).GetTypeInfo().Assembly); 
        }
       
        }
    }

You can now bind the image-

XAML

<Image   Source="{Binding MyImageSource }" Aspect="AspectFill" WidthRequest="50"   HeightRequest="50" />

Read up more on image path - Default image directory on Windows [^]

Above solution found on SO - Setting image source in view model in .NET MAUI app [^]

Posted 10-Jul-23 3:50am

Andre Oosthuizen

Comments

suhail malik 2023 10-Jul-23 11:50am

I am testing on android sir.

Graeme_Grant 10-Jul-23 16:35pm

16 question in one month for the same project. This guy is a help-vampire!

Andre Oosthuizen 11-Jul-23 4:24am

Yep!

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dave Kreskowiak · Accepted Answer · 2023-07-10T04:16:00

Solution 2

Or you could just get rid of the "images\" part of the filepaths in your Source attributes.

XAML

<ImageButton
    Source="infinix2.jpg"
    x:Name="PriceLists"
    SemanticProperties.Hint="Price Lists"
    Clicked="OnPriceListsClicked"
    HorizontalOptions="Center" />

Posted 10-Jul-23 4:16am

Dave Kreskowiak

Comments

suhail malik 2023 10-Jul-23 11:11am

and where should i put image? in AppIcon folder or in resources folder

Dave Kreskowiak 10-Jul-23 11:42am

You said you already put the image files in the Resources\Images folder. That's where they would need to be. All you do then is specify the filename in the Source attributes.

suhail malik 2023 10-Jul-23 12:00pm

now image is under resources folder and unfortunately it is giving same result

Dave Kreskowiak 10-Jul-23 12:23pm

They should be under Resources\Images, like you said they were in your original question.

suhail malik 2023 11-Jul-23 12:18pm

nothing was wrong, i totally messed up with my project, had to create new one, thanks for help.

Graeme_Grant 10-Jul-23 16:36pm

This is the 16th question on the same project. Coding via others doing his work.

Dave Kreskowiak 10-Jul-23 16:52pm

Doesn't seem to know how to listen either.

Graeme_Grant 10-Jul-23 17:03pm

Yep...