Xamarin forms layout - repeat the frame based on the item's attribute

Question

I have a Xamarin forms application and in my form i have a code that displays a colour text and color like shown below:

<StackLayout HorizontalOptions="EndAndExpand">
    <Frame
        Padding="0"
        BorderColor="#EBEBEB"
        CornerRadius="20"
        HasShadow="False"
        HorizontalOptions="FillAndExpand">
        <StackLayout
            HorizontalOptions="FillAndExpand"
            Orientation="Horizontal"
            VerticalOptions="CenterAndExpand">
            <Label
                Margin="20,15,35,15"
                FontSize="14"
                HorizontalOptions="StartAndExpand"
                Text="Color"
                TextColor="Black"
                VerticalTextAlignment="Center">
                <Label.FontFamily>
                    <OnPlatform x:TypeArguments="x:String">
                        <On Platform="Android" Value="SFPro.ttf#Bold" />
                    </OnPlatform>
                </Label.FontFamily>
            </Label>

            <Frame 
                Margin="35,15,20,15"
                Padding="0"
                BackgroundColor="#33427D"
                CornerRadius="8"
                HasShadow="False"
                HeightRequest="22"
                WidthRequest="22" />

        </StackLayout>
    </Frame>
</StackLayout>

This generates a view like this:

However now I need to connect it to the binding on the item.AvailableColors to which this control is bound to generate the view that looks as below:

public string[] AvailableColors
{
    get
    {
        string[] result = { "red", "blue", "green", "black" };
        return result;
    }
}

How can I change my code to generate the changes to the view?

Answer 1

As @Jason said , you could use BindableLayout

in 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="App6.MainPage">

    <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
        <StackLayout HorizontalOptions="EndAndExpand">
            <Frame
        Padding="0"
        BorderColor="#EBEBEB"
        CornerRadius="20"
      
        HasShadow="False"
        HorizontalOptions="FillAndExpand">
                <StackLayout
            HorizontalOptions="FillAndExpand"
            Orientation="Horizontal"
            VerticalOptions="CenterAndExpand">
                    <Label
                Margin="20,15,10,15"
                FontSize="14"
                HorizontalOptions="StartAndExpand"
                Text="Color"
                TextColor="Black"
                VerticalTextAlignment="Center">
                        
                    </Label>

                    <ScrollView Orientation="Horizontal" BackgroundColor="LightBlue">

                        <StackLayout Orientation="Horizontal"  BindableLayout.ItemsSource="{Binding ColorList}">

                            <BindableLayout.ItemTemplate>
                                <DataTemplate>

                                    <Frame 
                                         Margin="35,15,20,15"
                                         Padding="0"
                                         BackgroundColor="{Binding .}"
                                         CornerRadius="8"
                                          HasShadow="False"
                                          HeightRequest="22"
                                         WidthRequest="22" />

                                </DataTemplate>
                            </BindableLayout.ItemTemplate>


                        </StackLayout>

                    </ScrollView>

                </StackLayout>
            </Frame>
        </StackLayout>
    </StackLayout>

</ContentPage>

in Code behind (ViewModel)

public class ViewModel
{
    public ObservableCollection<Color> ColorList { get; set; }

    public string[] AvailableColors
    {
        get
        {
            string[] result = { "red", "blue", "green", "black" };
            return result;
        }
    }
    public ViewModel()
    {
        ColorList = new ObservableCollection<Color>() { };

        ColorTypeConverter converter = new ColorTypeConverter();

        foreach (var color in AvailableColors)
        {

            Color newColor = (Color)(converter.ConvertFromInvariantString(color));
            ColorList.Add(newColor);
        }
       
    }
}

public MainPage()
{
  InitializeComponent();
  BindingContext = new ViewModel();
}