如何在xamarin中将可观察的集合绑定到flexlayout? [英] How can I bind an observable collection to a flexlayout in xamarin?

问题描述

我需要将ObservableCollection视图绑定到FlexLayout(因为我需要自定义外观).当我将项目绑定到CollectionView时，它们不会与我在FlexLayout中直接使用网格时获得的外观相同例如:

I need to bind an ObservableCollection view to a FlexLayout (because I need a custom appearance). When I bind the items to the CollectionView they don't have same look that I get when I use grid directly inside FlexLayout, for example:

这正常工作，但没有任何约束.

This works as expected but with no binding, of course.

<FlexLayout Grid.Row="5"
            Grid.Column="0"
            Margin="10,15,10,5"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="StartAndExpand">
    <Grid Margin="0,0,0,6"
          HeightRequest="20">
        <Frame Padding="2"
               BackgroundColor="#f1f1f1"
               CornerRadius="5">
            <Label Grid.Row="0"
                   Grid.Column="1"
                   FontSize="11"
                   Text="some text"
                   TextColor="DarkGray" />
        </Frame>
    </Grid>
</FlexLayout>

这里所有内容都可以绑定，但是外观就像ListView:

Here everything is binding ok but the appearance is like a ListView:

后面的代码:

xEspecialidades.ItemsSource = StringCollection;

在XAML中:

<FlexLayout Grid.Row="5"
            Grid.Column="0"
            Margin="10,15,10,5"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="StartAndExpand">
    <CollectionView x:Name="xEspecialidades"
                    x:FieldModifier="public static"
                    HorizontalOptions="FillAndExpand"
                    HorizontalScrollBarVisibility="Never"
                    VerticalOptions="StartAndExpand"
                    VerticalScrollBarVisibility="Never">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="0,0,0,6"
                      HeightRequest="20">
                    <Frame Padding="2"
                           BackgroundColor="#f1f1f1"
                           CornerRadius="5">
                        <Label Grid.Row="0"
                               Grid.Column="1"
                               FontSize="11"
                               Text="{Binding .}"
                               TextColor="DarkGray" />
                    </Frame>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</FlexLayout>

我找到了该线程 https://github.com/xamarin/Xamarin.Forms/issues/8234 但无法使其正常工作.Visual Studio一直说FlexItemsLayout找不到.有什么方法可以做我想要的吗?

I've found this thread https://github.com/xamarin/Xamarin.Forms/issues/8234 but could not make it work. Visual Studio keeps saying that FlexItemsLayout is not found. Is there a way to do what I want?

推荐答案

使用下面的代码使其正常工作:

Got it working by using code below:

<FlexLayout x:Name="xEspecialidades"
            BindableLayout.ItemsSource="{Binding especialidades}"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="StartAndExpand">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Grid Margin="0,0,0,6"
                  HeightRequest="20"
                  HorizontalOptions="StartAndExpand">
                <Frame Padding="2"
                       BackgroundColor="#f1f1f1"
                       CornerRadius="5"
                       HorizontalOptions="StartAndExpand">
                    <Label Grid.Row="0"
                           Grid.Column="1"
                           FontSize="11"
                           HorizontalOptions="StartAndExpand"
                           Text="{Binding .}"
                           TextColor="DarkGray" />
                </Frame>
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</FlexLayout>

这篇关于如何在xamarin中将可观察的集合绑定到flexlayout?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！