Click here to Skip to main content
15,849,907 members
Please Sign up or sign in to vote.
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
Updated 10-Jul-23 5:16am

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[^]
 
Share this answer
 
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!
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" />
 
Share this answer
 
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.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900