Pertanyaan Cara menampilkan item dari berbagai jenis dalam Tabel dalam Bentuk Xamarin


Hasil yang diinginkan :

enter image description here

Saya memiliki daftar objek yang berisi Judul setiap bagian dalam menu dan dalam daftar ini saya memiliki daftar gambar dan informasi lainnya

Saya telah mencoba cara menampilkannya dengan benar

my xaml:

<ContentPage.Content>
    <TableView Intent="Form">
        <TableRoot>
            <TableSection Title="Getting Started">
                <ViewCell>
                    <Grid VerticalOptions="FillAndExpand" Padding = "20, 0" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />

                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" ></RowDefinition>
                            <RowDefinition Height="Auto" ></RowDefinition>
                        </Grid.RowDefinitions>
                        <StackLayout Grid.Row="0" x:Name="Titre" Orientation="Horizontal">

                        </StackLayout>
                        <ScrollView Grid.Row="1">
                            <StackLayout
                                Padding="0"
                                x:Name="Image">
                            </StackLayout>
                        </ScrollView>
                    </Grid>
                </ViewCell>
            </TableSection>

        </TableRoot>
    </TableView>

</ContentPage.Content>

Metode C #:

 private void PopulateProductsLists(List<PlanDefinition> listArticles)
        {


            for (var i = 0; i < listArticles.Count; i++)
                {
                    //Display Title 
                 Titre.Children.Add((new Label { Text = listArticles[i].Name, Style = Device.Styles.TitleStyle, FontAttributes = FontAttributes.Bold, TextColor = Color.White }));

                //Display Images from  listArticles[i].ArticlesAvailable
                for (int j= 0; j < listArticles[i].ArticlesAvailable.Count; j++)
                    {

                        listArticles[i].ArticlesAvailable[j].ImageProduit = "https://fit-plans.com/" + listArticles[i].ArticlesAvailable[j].UrlSmallImage;

                        Image image = new Image();
                        image.Source = ImageSource.FromUri(new Uri(listArticles[i].ArticlesAvailable[j].ImageProduit));


                        Image.Children.Add(image);


                }

Apa yang saya sedang keliru?


4
2018-06-15 06:23


asal


Jawaban:


Pertama-tama di sini adalah kesalahan saya:

1- Tidak menggunakan tampilan yang dapat digulir 

2- Menggunakan tata letak tumpukan yang berbeda 

Obat untuk masalah saya:

<!----Scrollable view MUST be used otherwide data simply won't appear  --->
    <ScrollView
                Grid.Column="0"
                Grid.Row="1">
                <Grid 
                    RowSpacing="3"   
                    x:Name="MyGrid"
                    ClassId="myGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />       
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <StackLayout VerticalOptions="FillAndExpand"
                                 HorizontalOptions="FillAndExpand"
                        x:Name="ProduitsLayout">
                       <!----Products will be displayed here --->
                    </StackLayout>
                </Grid>
            </ScrollView>

Dan dalam kode di belakang:

     private void PopulateProductsLists(List<PlanDefinition> listArticles)
            {
                int labelIndex = 0;
                int count = 0;
                for (var i = 0; i < listArticles.Count; i++)
                {
                   //Calling a view to display data
                    item = new PlanOrderTemplate();             

                    var lastHeight = "100";
                    var y = 0;
                    int column = 1;
                    var productTapGestureRecognizer = new TapGestureRecognizer();

                //Add label in the stack layout
                    ProduitsLayout.Children.Add((new Label
                    {
                        Text = listArticles[i].Name,
                        Style = Device.Styles.TitleStyle,
                        FontAttributes = FontAttributes.Bold,
                        TextColor = Color.Black
                    }));


                    for (int j = 0; j < listArticles[i].ArticlesAvailable.Count; j++)
                    {

                        productTapGestureRecognizer.Tapped += OnProductTapped;

                        item = new PlanOrderTemplate();

                        listArticles[i].ArticlesAvailable[j].ThumbnailHeight = lastHeight;
                       //Applying binding to the view in order to display data
                            item.BindingContext = listArticles[i].ArticlesAvailable[j];
                            item.GestureRecognizers.Add(productTapGestureRecognizer);

        //This is mandatory you need to call the add the view page to the stack layout
                            ProduitsLayout.Children.Add(item);
    }
    }
}

Sekarang untuk halaman tampilan yang saya bicarakan: ProduitsLayout.xaml

Konfigurasikan gambar yang ingin saya muat dengan stepper

<StackLayout Orientation="Vertical"

        Spacing="1">

        <ffimageloading:CachedImage 
            FadeAnimationEnabled="true" 
            Source="{Binding ImageProduit}" 
            HeightRequest="{Binding ThumbnailHeight}" 
            Aspect="AspectFill"/>

        <Label x:Name="lbldisp"  Text="1" VerticalOptions="Center" HorizontalOptions="Center"></Label>
        <Stepper Minimum="0" Maximum="10" Increment="1" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" ValueChanged="OnValueChanged" />



</StackLayout>

1
2018-06-18 06:59