Xaml Assign extra Class after Listview is Set

Question

A Quick Description: The Project i'm busy with is using a wrapper for the Woo-commerce API Called Woo-Commerece.Net I can get everything loaded fine except for Image's From my side I believe its a oversight and im missing a way to do this.

Heres the Model:https://github.com/XiaoFaye/WooCommerce.NET/blob/master/WooCommerce/v3/Product.cs#L503

When the list is generated I end up with the Product Class being iterated. However the Images are stored in a different model and I have no idea how I can call Another class for the Xaml after my listview has already been set.

I just need 1 Image to Passthrew I know Product model has a List called Images But I have no idea how youd pass a list into a image source binding

My Xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Ecombeta.Views.Products"
             Title="Productsold"
             BackgroundColor="#c4c3c0">

    <ContentPage.Content>
        <StackLayout>

            <ListView x:Name="productsListView"
                      HasUnevenRows="True"                       
                  VerticalOptions="FillAndExpand"
                      SeparatorVisibility="None">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <Frame HasShadow="True" Margin="8">
                                    <StackLayout>
                                        <Label x:Name="something" Text="{Binding name}" FontSize="Large"/>
                                        <Image Source="{Binding     }"/>
                                        <Label Text="{Binding date_created, StringFormat='{0:dd/MM/yyyy}'}" FontSize="Small" FontAttributes="Italic"/>
                                        <Label Text="{Binding price }"/>
                                        <Label Text="{x:Binding enable_html_description  }" FontSize="Medium"/>
                                        <Label Text="{x:Binding sku}" FontSize="Medium"/>
                                        <Button BindingContext="{Binding id}" Clicked="ProductClicked"></Button>
                                    </StackLayout>
                                </Frame>

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

        </StackLayout>
    </ContentPage.Content>
</ContentPage>

The Back end

 public Products()
        {
            InitializeComponent();



            InitAsync();



        }
        private async void Back_Clicked(object sender, EventArgs e)
        {
            await Navigation.PopAsync();
        }



        private async Task InitAsync()
        {



            RestAPI rest = new RestAPI("http://example.co.za/wp-json/wc/v3/", "CK_XXXXXX", "cs_xXXXXX");
                WCObject wc = new WCObject(rest);
            var products = await wc.Product.GetAll();
            var p = await wc.Product.GetAll(new Dictionary<string, string>() {
                    {"tag", Suppliers.tagid },
                    { "per_page", "80" } }); ;

            List<ProductImage> z = new List<string> { p.images };
            productsListView.ItemsSource = p;

        }

        async void ProductClicked(object sender, EventArgs args)
        {





            var btn = (Button)sender;

           var a = btn.BindingContext;

            Orders.singleID = Convert.ToInt32(a);




           await Navigation.PushAsync(new Orders());

I would create a ProductVM class that contains both the Product and ProductImage — Jason
Have you tried to put the Images data and ProductClass in a common Model? — Jessie Zhang -MSFT
@JessieZhang-MSFT Soz for the long delay, I'm not sure what you mean? Could you point me to a document about Common models? I cant find anything. Is there other way's to Create loops threw Collections? Besides the DataTemplate(In the Xaml Atleast) — Azurry

Azurry Azurry · Accepted Answer · 2019-12-05T11:51:10

I Found no way to do this the exact thing I wanted at the time.

The issue in Short was that Product had a Image[] as an example and I needed to access

Product Image[].src So In the Binding I just ended up Saying

Image[W.e Index the image You want is].src

Just in case if you wanted to check What that index is Dynamically You can try something like this

so If you have the List Initialized

E.g


  var p = await wc.Product.GetAll(new Dictionary<string, string>() {
                    {"tag", Suppliers.tagid },
                    { "per_page", "80" } }); ;



  foreach (var item in p)
            {
                foreach (var z in item.images)
                {
                    if (item.images != null)
                    {
                        var YourBinding = z.src;
                    }
                }
            }

//There is more then likely a better way to go about it but its how I ended up sorting the problem for one of the Pull Methods of mine

Xaml Assign extra Class after Listview is Set

1 Answers