Forum Xamarin.Forms

Change image according item value in listview

claudionirqsclaudionirqs USMember ✭✭
edited May 2020 in Xamarin.Forms

Hi friends, I searched more than a week on the internet but I didn't find anything helpful.

I've a listview in my app with a lot of informations. I would like to change the image if some condition is true do you know?

My listview.ItemSource is a query from the database and I would like to change the image according its category type. If category type is 1 the image should be image1.png, if category type is 2 the image should be image2.png and so on.

In C# webform I would do it on databing event handler, but I didn'f find anything related in listview on xamarin. Is there someone that can help to reach out this goal?

That's my XAML

<ListView x:Name="lvProducts" HasUnevenRows="True" BackgroundColor="White">
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>

                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />

                                <Image Aspect="AspectFill" HeightRequest="60" Grid.RowSpan="3" Source="{Binding imgCategory}" Margin="10"/>

                                <!--Linha um, o stacklayout mantem tudo na mesma linha-->
                                <StackLayout Grid.Row="0" Grid.Column="1" Orientation="Horizontal">
                                    <Label Text="{Binding numProduct}" FontAttributes="Bold" TextColor="#ff0000" HorizontalTextAlignment="Start"></Label>
                                    <Label Text=": " FontAttributes="Bold" TextColor="#ff0000" HorizontalTextAlignment="Start"></Label>
                                    <Label Text="{Binding nomeProduct}" FontAttributes="Bold" TextColor="#ff0000" HorizontalTextAlignment="Start"></Label>

                                <!--Linha dois, o stacklayout mantem tudo na mesma linha-->
                                <StackLayout Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
                                    <Label Text="{Binding numCategory}" FontSize="12" TextColor="#5e5e5e" ></Label>
                                    <Label Text=" - " FontSize="12" TextColor="#5e5e5e"></Label>
                                    <Label Text="{Binding nomeCategory}" FontSize="12" TextColor="#5e5e5e" ></Label>

                                <!--Linha dois, o stacklayout mantem tudo na mesma linha-->
                                <StackLayout Grid.Row="2" Grid.Column="1"  Orientation="Horizontal">
                                    <Label Text="{Binding categoryType}" FontSize="10" FontAttributes="Italic"></Label>


That's my Code Behind:

private void fillListViewProduct ()
            SQLiteConnection dataBase = new SQLiteConnection(_databasePath);

            List<Products> selectItems = dataBase.Query<Products>("SELECT numProduct, nomeProduct, numCategory, nomeCategory, categoryType FROM tabproducts");
            lvProducts.ItemsSource = selectItems;


Any help will be appreciated.

Kind regards,

Claudionir Queiroz

PS.: Sorry for my bad English, I hope you can understand it.

Best Answer


  • AzizAziz Member ✭✭✭
    edited May 2020
    You are binding imgCategory, but this is not set in your ViewModel.

    Define a property in your Products class named e.g. imgCategory that returns the image based on the category.. something like:

    public string imgCategory
    switch (this.categuryType){
    case type1: return “ image1.png”; break;
    case type2: return “ image2.png”; break;

    It would help if you post your model and viewModel
  • claudionirqsclaudionirqs USMember ✭✭

    I defined it in my view model just as a string see it below:

    using SQLite;
    namespace dataplanmob.Models
            public class Product
                [PrimaryKey, Column("idProduct")]
                public int idProduct{ get; set; }
                public string numProduct { get; set; }
                public string nomeProduct { get; set; }
                public string numCategory { get; set; }
                public string nomeCategory { get; set; }
                public int categoryType { get; set; }

    Can you help me to adapt my code to you example? I tried to use just a case when in my select, but it didn't work.

    I'm really new in mobile development.

    Thanks so much

  • claudionirqsclaudionirqs USMember ✭✭

    You are the man. It worked like a charm. Thanks so very much.

Sign In or Register to comment.