Is there a way to use embedded images from a view model - xaml

Question

I have a view model that gets and sets an Image Source. I don't know if this is correct or not.
public class animalsmodel
{
public int id { get; set; }
public string AnimalNames { get; set; }
public Button Animalselect { get; set; }
public Button Back { get; set; }
public ImageSource AnimalPhoto { get; set; }
}
}
I then use that in my list view. But it feels like I should call it from resource?
private void SearchBar_TextChanged(object sender, TextChangedEventArgs e)
{
alistview.ItemsSource = GetAnimals(e.NewTextValue);
}
IEnumerable<animalsmodel> GetAnimals(string searchText = null)
{
var animals = new List<animalsmodel>
{
new animalsmodel() { id = 1, AnimalNames = "Aardvark", **AnimalPhoto** = ("AppSFari.Images.Aardvark.jpg")},
And then I use it in my XAML file. The name displays and I can see where the image should be but it is blank. And I have set the image in my project to Embedded Resource.
<ListView x:Name="alistview" BackgroundColor ="AliceBlue" HasUnevenRows="True" ItemSelected="alistview_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ImageCell ImageSource="{Binding AnimalPhoto}" Text="{Binding AnimalNames}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Answer 1

Your code is totally incorrect .
About how to use embedded images pls check here.
ProvideValue methods only trigers when we set static string in xaml with the following way
<Image Source="{local:ImageResource WorkingWithImages.beach.jpg}" />
In another word , embedded images can only be hard-corded in xaml but not in code .
Correct way
Place the image into specific platform project , iOS -> image assets/Resources , Android ->Resources .
Do not use embedded image, use local image, you could refer to
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#local-images
https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-listview-customcells/
Update
Change the type of parameters of Aardvark's constructor .
public Aardvark(String AnimalNames, Button Animalselect, Button Back, string PhotoSource)
{
InitializeComponent();
AnimalNameCall.Text = AnimalNames;
addanimal = Animalselect;
terug = Back;
dierfoto.Image = PhotoSource;
}

Answer 2

Thanks for the help so far. So this is what I have done, I use this as my view model for the list view.
class ImageResourceExtention : IMarkupExtension
{
public string PhotoSource { get; set; }
public string AnimalNames { get; set; }
public Button Back { get; set; }
public Button Animalselect { get; set; }
public int id { get; set; }
public object ProvideValue(IServiceProvider serviceProvider)
{
if (PhotoSource == null)
{
return null;
}
var imageSource = ImageSource.FromResource(PhotoSource, typeof(ImageResourceExtention).GetTypeInfo().Assembly);
return imageSource;
}
}
Then my list view will have a id, animal name, and lastly a image. This is how I did it. I don't know if the image part is correct?
public partial class AnimalsPage : ContentPage
{
private void SearchBar_TextChanged(object sender, TextChangedEventArgs e)
{
alistview.ItemsSource = GetAnimals(e.NewTextValue);
}
IEnumerable<ImageResourceExtention> GetAnimals(string searchText = null)
{
var animals = new List<ImageResourceExtention>
{
new ImageResourceExtention() { id = 1, AnimalNames = "Aardvark", PhotoSource = "AppSFari.Images.Aardvark.jpg"},
new ImageResourceExtention() { id = 2, AnimalNames = "Aardwolf", PhotoSource = "AppSFari.Images.Aardwolf.jpg" },
new ImageResourceExtention() { id = 3, AnimalNames = "Baboon" },
new ImageResourceExtention() { id = 4, AnimalNames = "Bat-eared Fox" },
new ImageResourceExtention() { id = 5, AnimalNames = "Black Backed Jackel" },
new ImageResourceExtention() { id = 6, AnimalNames = "Black Rhino" },
new ImageResourceExtention() { id = 7, AnimalNames = "Black Wildebeest" },
new ImageResourceExtention() { id = 8, AnimalNames = "Brown Hyena" },
new ImageResourceExtention() { id = 9, AnimalNames = "Buffalo" },
new ImageResourceExtention() { id = 10, AnimalNames = "Bush Pig" },
new ImageResourceExtention() { id = 11, AnimalNames = "Bushbuck" },
new ImageResourceExtention() { id = 12, AnimalNames = "Cape Grysbok" },
new ImageResourceExtention() { id = 13, AnimalNames = "Caracal" },
new ImageResourceExtention() { id = 14, AnimalNames = "Cheetah" },
new ImageResourceExtention() { id = 15, AnimalNames = "Common Duiker" },
new ImageResourceExtention() { id = 16, AnimalNames = "Eland" },
new ImageResourceExtention() { id = 17, AnimalNames = "Gemsbok/Oryx" },
new ImageResourceExtention() { id = 18, AnimalNames = "Giraffe" },
new ImageResourceExtention() { id = 19, AnimalNames = "Hippo" },
new ImageResourceExtention() { id = 20, AnimalNames = "Impala" },
};
if (String.IsNullOrWhiteSpace(searchText))
return animals;
var lowerAnimals = searchText.ToLower();
return animals.Where(c => c.AnimalNames.ToLower().StartsWith(lowerAnimals));
}
public AnimalsPage()
{
InitializeComponent();
alistview.ItemsSource = GetAnimals();
BindingContext = this;
}
async private void Button_Clicked(object sender, EventArgs e)
{
await myScrollview.ScrollToAsync(1, alistview.Y, true);
}
async private void alistview_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
var animals = e.SelectedItem as ImageResourceExtention;
await Navigation.PushAsync(new Aardvark(animals.AnimalNames, animals.Animalselect, animals.Back));
}
async private void Button_Clicked_1(object sender, EventArgs e)
{
await Navigation.PopAsync();
}
Then in my content page the list and search bar all works but where the image should be it is blank.
x:Class="AppSFari.Kwandwe_Pakage.AnimalsPage"
xmlns:local="clr-namespace:AppSFari.Kwandwe_Pakage"
NavigationPage.HasNavigationBar="False">
<ContentPage.Content>
<ScrollView HeightRequest="3000" x:Name="myScrollview">
<AbsoluteLayout>
<StackLayout>
<SearchBar
TextChanged="SearchBar_TextChanged"
Placeholder="Search Animal"
PlaceholderColor="Gray"
HorizontalTextAlignment="Center"
FontSize="Small"
FontAttributes="Italic"
VerticalOptions="Center" HorizontalOptions="End"/>
<ListView x:Name="alistview" BackgroundColor ="AliceBlue"
HasUnevenRows="True"
ItemSelected="alistview_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding PhotoSource}" Aspect="AspectFit"
HeightRequest="60"
WidthRequest="60"/>
<Label Text="{Binding AnimalNames}" TextColor="Black"
FontFamily="appfontM"
VerticalTextAlignment="Center"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Text="Back to top" Clicked="Button_Clicked"/>
</StackLayout>
<Button Text="Back" BackgroundColor="Transparent" FontSize="8"
AbsoluteLayout.LayoutBounds="0,0,0.2,0.05" AbsoluteLayout.LayoutFlags="All"
Clicked="Button_Clicked_1"/>
</AbsoluteLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
Sorry if I am making silly mistakes I am new to this.