Xamarin MVVM 从可绑定的 FlexLayout 中选择项目，类似于在 ListView 上选择项目

Question

xamarin 新手。如何从可绑定的 flexlayout 中选择项目，类似于从列表视图中选择项目？谢谢大家。

ListView 运行良好，但我一直在尝试从 Listview 转换为 FlexLayout。

这是来自列表视图的逻辑代码。不知道从哪里开始 flexlayout

      async void TypeListSelected(object objector, SelectedItemChangedEventArgs eventor)
  {
        object type = eventor.SelectedItem;

        if (type == null)
        return;

        await Navigation.PushAsync(new EntryPage(new EntryViewModel(type)));

        TypesListView.SelectedItem = null;

   }

这是带有新的 flex 布局和点击手势的 xaml 页面

       <FlexLayout x:Name="FlexTypes"
                        Wrap="Wrap"
                        Direction="Row"
                        HorizontalOptions="FillAndExpand"
                        JustifyContent="SpaceEvenly"
                        BindableLayout.ItemsSource="{Binding TypesCollection}">

                <BindableLayout.ItemTemplate>
                    <DataTemplate>

                        <StackLayout Padding="0, 0, 0, 25">

                             <Frame x:Name="FrameTypes" HasShadow="False"
                                    WidthRequest="125"
                                    BorderColor="#C0C0C0">
                                 <Frame.GestureRecognizers>

                                     <TapGestureRecognizer Tapped="TypeListSelected"></TapGestureRecognizer>

                                 </Frame.GestureRecognizers>

                                 <StackLayout x:Name="LayoutTypesList">

                                    <Label>
                                        <Label.FormattedText>
                                            <FormattedString>
                                                <Span FontSize="Subtitle" Text="{Binding Title}"
                                                        FontAttributes="Bold"></Span>
                                            </FormattedString>
                                        </Label.FormattedText>
                                    </Label>
                                        <Label FontSize="Small" Text="{Binding Version}"
                                                        TextColor="#LELELE"></Label>

                                    <Label Text="{Binding Description}" FontSize="Body"
                                            VerticalOptions="CenterAndExpand"></Label>

                                    <Label FontSize="Caption"             
                    VerticalOptions="CenterAndExpand" 
                    TextColor="#COCOCO">
                                        <Label.FormattedText>
                                            <FormattedString>
                                                <Span Text="{Binding fDepartment}"></Span>
                                                <Span Text="{Binding pType}"></Span>
                                            </FormattedString>
                                        </Label.FormattedText>
                                    </Label>

                                </StackLayout>

                            </Frame>
                        </StackLayout>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </FlexLayout>

这是我的视图模型

            public ObservableCollection<TypeModel> TypesCollection { get; set; }

            public Command LoadTypesCommand { get; set; }

            public TypesViewModel()
            {

                Title = "Browse Types";

                TypesCollection = new ObservableCollection<TypeModel>();

                LoadTypesCommand = new Command(async () => await ExecuteLoadTypesCommand());

            }

            async Task ExecuteLoadTypesCommand()
            {
                if (IsBusy)
                    return;

                IsBusy = true;

                try
                {
                    TypesCollection.Clear();

                    var api = await DataSource.GetTypesApi(true);

                    foreach (var i in api)
                    {
                        TypesCollection.Add(i);
                    }

                }
                catch (Exception ex)
                {
                    Debug.WriteLine(ex);
                }
                finally
                {
                    IsBusy = false;
                }
            }

Answer 1

我制作了一个示例供您参考。

Xaml：

 <FlexLayout
        x:Name="FlexTypes"
        BindableLayout.ItemsSource="{Binding TypesCollection}"
        Direction="Row"
        HorizontalOptions="FillAndExpand"
        JustifyContent="SpaceEvenly"
        Wrap="Wrap">

        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <StackLayout Padding="0,0,0,25">

                    <Frame
                        x:Name="FrameTypes"
                        BorderColor="#C0C0C0"
                        HasShadow="False"
                        WidthRequest="125">
                        <Frame.GestureRecognizers>

                            <TapGestureRecognizer CommandParameter="{Binding id}" Tapped="TypeListSelected" />

                        </Frame.GestureRecognizers>

                        <StackLayout x:Name="LayoutTypesList">

                            <Label>
                                <Label.FormattedText>
                                    <FormattedString>
                                        <Span
                                            FontAttributes="Bold"
                                            FontSize="Subtitle"
                                            Text="{Binding Title}" />
                                    </FormattedString>
                                </Label.FormattedText>
                            </Label>
                            <Label
                                FontSize="Small"
                                Text="{Binding Version}"
                                TextColor="#LELELE" />

                            <Label
                                FontSize="Body"
                                Text="{Binding Description}"
                                VerticalOptions="CenterAndExpand" />

                            <Label
                                FontSize="Caption"
                                TextColor="#COCOCO"
                                VerticalOptions="CenterAndExpand">
                                <Label.FormattedText>
                                    <FormattedString>
                                        <Span Text="{Binding fDepartment}" />
                                        <Span Text="{Binding pType}" />
                                    </FormattedString>
                                </Label.FormattedText>
                            </Label>

                        </StackLayout>

                    </Frame>
                </StackLayout>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </FlexLayout>

page.xaml.cs

public partial class Page1 : ContentPage
{
    public ObservableCollection<TypeModel> TypesCollection { get; set; }
    public Page1()
    {
        InitializeComponent();
        TypesCollection = new ObservableCollection<TypeModel>()
        {
            new TypeModel(){  id=1, Title="ATitle", Version="A-01", Description="A-01-Description", fDepartment="a-f", pType="a-p"},
            new TypeModel(){ id=2, Title="BTitle", Version="B-01", Description="B-02-Description", fDepartment="b-f", pType="b-p"},

        };

        this.BindingContext = this;

    }

    private void TypeListSelected(object sender, EventArgs e)
    {
        TypeModel SelectedItem = TypesCollection.FirstOrDefault(itm => itm.id == Convert.ToInt32(((TappedEventArgs)e).Parameter.ToString()));
        if (SelectedItem != null)
        {
            //do something you want 
            DisplayAlert("Data", "Title : " + SelectedItem.Title + " , Version : " + SelectedItem.Version, "OK");
        }

        //object type = e.SelectedItem;

        //if (type == null)
        //    return;

        //await Navigation.PushAsync(new EntryPage(new EntryViewModel(type)));

        //TypesListView.SelectedItem = null;

    }
}
public class TypeModel
{
    public int id { get; set; }
    public string Title { get; set; }
    public string Version { get; set; }

    public string Description { get; set; }
    public string fDepartment { get; set; }

    public string pType { get; set; }
}