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">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.View>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <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>
                                </StackLayout>

                                <!--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>
                                </StackLayout>

                                <!--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>
                                </StackLayout>

                            </Grid>
                        </ViewCell.View>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

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.

Tagged:

Best Answer

Answers

  • 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
    {
    get
    {
    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
    {
        [Table("tabproducts")]
        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.