Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Show a List of Frames on a ContentPage using XAML

SHalabiDSHalabiD Member ✭✭

Hi everyone.
I have a CarouselPage that uses the DataTemplate approach. On each ContentPage I have a different number of frames. Is there a way to show different number of frames with DataTemplate in XAML, or should I do it on code?

My CarouselPage code is the following:
(Capitulo is a sub-class of ContentPage)

<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms" 
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:retornotemplate="clr-namespace:RetornoTemplate"
              x:Class="RetornoTemplate.MainPage">

    <CarouselPage.ItemTemplate>
        <DataTemplate>
            <retornotemplate:Capitulo>

                <ScrollView>
                    <StackLayout>


                        <Label Text="{Binding Name}" FontSize="Medium" HorizontalOptions="Center" />
                        <Label Text="{Binding Color}" WidthRequest="200" HeightRequest="200" HorizontalOptions="Center" 
 VerticalOptions="CenterAndExpand"/>

        //Here I would like to put something like a List of frames


                    </StackLayout>
                </ScrollView>

            </retornotemplate:Capitulo>
        </DataTemplate>
    </CarouselPage.ItemTemplate>
</CarouselPage>

And the class with the binding is:

namespace RetornoTemplate
{
    class DataModel
    {
        public string Name { get; set; }
        public String Color { get; set; }
        public static IList<DataModel> All { get; set; }
        public List<Frame> frames;
        static DataModel()
        {

            Frame fr1 = new Frame() { Content = new Label() { Text = "Frame 1" } };

            All = new ObservableCollection<DataModel>(); 

            for(int i= 0; i<5; i++)
            {
                List<Frame> frs = new List<Frame>();

                for(int j=0; j<=i; j++)
                {
                    frs.Add(fr1);
                }

                All.Add(new DataModel { Name = "Red", Color = "Rojo", frames = frs });
            }


        }
    }
}

It's just an example, but what I'm doing is creating lists of different lengths just to try it out. I hope it's easy to understand my goal.

Best Answer

Answers

  • ColeXColeX Member, Xamarin Team Xamurai

    Create a listView inside the stackLayout , and add corresponding binding on it .

              <CarouselPage.ItemTemplate>
            <DataTemplate>
                <retornotemplate:Capitulo>
    
                    <ScrollView>
                        <StackLayout>
    
    
                            <Label Text="{Binding Name}" FontSize="Medium" HorizontalOptions="Center" />
                            <Label Text="{Binding Color}" WidthRequest="200" HeightRequest="200" HorizontalOptions="Center" 
         VerticalOptions="CenterAndExpand"/>
    
                            //Here I would like to put something like a List of frames
    
    
                            <ListView ItemSource ="{Binding All}">
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <Frame >
                                            <Label Text="{Binding xxx}"/>
                                        </Frame>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
    
                            </StackLayout>
                    </ScrollView>
    
                </retornotemplate:Capitulo>
            </DataTemplate>
        </CarouselPage.ItemTemplate>
    
  • SHalabiDSHalabiD Member ✭✭

    Hi @ColeX, thanks for your reply.
    Instead of Listview, I went through with CollectionView as it seemed more suitable for what I am doing.

    Can you help me a little with the code behind the second binding? Where and how should I define the "xxx"?
    I am getting confused since it's like a binding inside another one.

    Thanks again for your help and patience.

    Here is my new code made simple:

    <CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 mc:Ignorable="d"
                 x:Class="RetornoCollection.MainPage">
    
        <CarouselPage.ItemTemplate>
    
            <DataTemplate>
                <ContentPage>
                    <ScrollView>
                        <StackLayout>
    
                            <Label Text="{Binding Name}"/>
    
                            <CollectionView ItemsSource="{Binding Book}"> 
                                <CollectionView.ItemTemplate>
                                    <DataTemplate>
                                        <Frame>
                                            <Label Text="{Binding xxx}"/> 
                                        </Frame>
                                    </DataTemplate>
                                </CollectionView.ItemTemplate>
                            </CollectionView>
    
                        </StackLayout>
                    </ScrollView>
                </ContentPage>
            </DataTemplate>
        </CarouselPage.ItemTemplate>
    

        namespace RetornoCollection
        {
            [DesignTimeVisible(false)]
            public partial class MainPage : CarouselPage
            {
                public MainPage()
                {
                    InitializeComponent();
                    ItemsSource = Chapter.Book;
                }
            }
    

    }

    namespace RetornoCollection
    {
        public class Chapter
        {
            public string Name {get;set;}
            public static IList<Chapter> Book { get; set; }
    
            static Chapter()
            {
                Book = new ObservableCollection<Chapter>();
    
                Book.Add(new Chapter { Name = "Chapter 1" });
                Book.Add(new Chapter { Name = "Chapter 2" });
            }
        }
    }
    
  • SHalabiDSHalabiD Member ✭✭

    Thanks @ColeX, worked perfectly!

Sign In or Register to comment.