Retrieving ItemsSource from a BindableLayout

Question

I have a FlexLayout with a BindableLayout.

<FlexLayout BindableLayout.ItemsSource="{Binding CardItems}" x:Name="SourceLayout" Background="green"
                    Direction="Row" Wrap="Wrap">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <ContentView>
                            <Frame CornerRadius="20" Padding="0" WidthRequest="150" Margin="10"
                            HeightRequest="150"
                            BackgroundColor="{Binding ., 
                            Converter={StaticResource AlternateColorConverter}, 
                            ConverterParameter={x:Reference SourceLayout}}">
                                <StackLayout>
                                    <StackLayout.GestureRecognizers>
                                        <TapGestureRecognizer Command="{Binding Path=BindingContext.CardItemNavCommand, Source={x:Reference SourceLayout}}"
                                                              CommandParameter="{Binding NavTarget}"/>
                                    </StackLayout.GestureRecognizers>
                                    <Label Text="{Binding Text}" TextColor="Black" FontSize="20" VerticalOptions="FillAndExpand"/>
                                    <Label Text="{Binding Text}" TextColor="Black" FontSize="20" VerticalOptions="FillAndExpand"/>
                                </StackLayout>
                            </Frame>
                        </ContentView>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </FlexLayout>

Is it possible to get the index of the current item inside the converter so I can change the color accordingly? I know this can be achieved with a ListView because I can access the items source property but I can't access the resource from the BindableLayout.

Does this answer your question? [How to bind index of item in BindableLayout.ItemsSource](https://stackoverflow.com/questions/55742763/how-to-bind-index-of-item-in-bindablelayout-itemssource) — Cfun, Apr 12 '21 at 10:27
I already looked at that link. I was looking for a simpler solution... — , Apr 12 '21 at 10:33

score 0 · Accepted Answer · answered Apr 12 '21 at 12:00

Is it possible to get the index of the current item inside the converter so I can change the color accordingly

BindableLayout is a static class, so we cannot get it from the layout to get the itemsSource.

For this function ,try to create an 'Identifier' property in the model class and set binding for the backgroundColor. Then get the value in the converter class to obtain the index of the current item from the data collection. Sepcify the background color according to the index.

Check the code:

App.xaml.cs

public partial class App : Application
{
    public static TestPageViewModel viewModel;
    public App()
    {
        InitializeComponent();

        viewModel = new TestPageViewModel();

        MainPage = new NavigationPage(new TestPage());
    }
}

Page.xaml

<StackLayout BindableLayout.ItemsSource="{Binding DataCollection}" ...>
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Grid Padding="0,2,3,0" BackgroundColor="{Binding Identifier, Converter={StaticResource _converter}}">
                ...
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Page.xaml.cs

public partial class TestPage : ContentPage
{
    public TestPage()
    {
        InitializeComponent();

        BindingContext = App.viewModel;
    }
}

Model class

public class TestPageModel
{
    public string Content { get; set; }

    public string Identifier { get; set; }
}

ValueConverter class

public class TestPageValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var index = GetValue(value);
        switch (index)
        {
            case 1:
                return Color.LightBlue;
                break;
            case 2:
                return Color.LightPink;
                break;
            case 3:
                return Color.LightYellow;
                break;

            default:
                break;
        }
        return Color.White;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return -1;
    }

    double GetValue(object value)
    {
        var viewModel = App.viewModel;
        foreach (var item in viewModel.DataCollection)
        {
            if (item.Identifier == (string)value)
            {
                return viewModel.DataCollection.IndexOf(item) + 1;
            }
        }
        return -1;
    }
}

Retrieving ItemsSource from a BindableLayout

1 Answers1