MVVM命令绑定

待解决问题

给集合里面绑定Command暂时不行

数据交互

https://learn.microsoft.com/zh-cn/dotnet/maui/user-interface/controls/collectionview/selection?view=net-maui-7.0

简单的事件绑定

 <Button  Command="{Binding DeleteCommand}" CommandParameter="{Binding Home[0]}" Text="ss"></Button>

代码参考

1、HomeViewModel.cs

using RG3.MauiAppHostDemo.Interfaces;
using RG3.MauiAppHostDemo.Model;
using RG3.PF.AbstractionsBasis;
using RG3.PF.AbstractionsBasis.Entity;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace RG3.MauiAppHostDemo.ViewModel
{
    public class HomeViewModel : INotifyPropertyChanged
    {

        ILoginServe _loginServe = App.Current.Services.GetService<ILoginServe>();

        readonly IList<HomeModel> source;
        HomeModel _selectedItem;

        public ObservableCollection<HomeModel> Homes { get; private set; }

        public HomeModel SelectedItem
        {
            get
            {
                return _selectedItem;
            }
            set
            {
                if (_selectedItem != value)
                {
                    _selectedItem = value;
                }
            }
        }


        public ICommand FavoriteCommand => new Command<HomeModel>(FavoriteHome);

        public HomeViewModel()
        {
            source = new List<HomeModel>();
            CreateHomeCollection();

            this.SelectedItem = Home.Skip(3).FirstOrDefault();
            OnPropertyChanged("SelectedHome");
        }

        void CreateHomeCollection()
        {
            source.Add(new HomeModel
            {
                ScriptureId = "11",
                ScriptureName = "Baboon",
                VipLevel = 1,
                ImgUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
            });
            Homes = new ObservableCollection<HomeModel>(source);
        }

        public void BindHomeCollection()
        {
            Homes = new ObservableCollection<HomeModel>(LinqUtil.QueryPage<HomeModel>(source.AsQueryable(), new PagIng { PageIndex = 1, PageSize = 6 }));
        }

        void FavoriteHome(HomeModel monkey)
        {
            //monkey.IsFavorite = !monkey.IsFavorite;
        }

        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;

        void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }
}

2、HomePage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:RG3.MauiAppHostDemo.Controls"
             x:Class="RG3.MauiAppHostDemo.HomePage" Shell.NavBarIsVisible="False">
    <!--Shell.NavBarIsVisible="False" 隐藏标题-->

    <!--#region 重新设置 Sheel标题-->
    <!--<Shell.TitleView >
        <Grid >
            <Image
                Source="dotnet_bot.png"
                HorizontalOptions="Start"
                VerticalOptions="Center"  HeightRequest="32"/>
            <Label 
                Text="目录"
                Padding="32,0"
                TextColor="White"
                HorizontalOptions="Start"
                VerticalOptions="Center"
                FontSize="Title" />
        </Grid>
    </Shell.TitleView>-->
    <!--#endregion 重新设置 Sheel标题-->

    <ContentPage.Resources>
        <StyleSheet Source="/Resources/Styles/HomeStyle.css" />
    </ContentPage.Resources>

    <ScrollView>
        <StackLayout >
            <StackLayout>
                <Image x:Name="imgBannerHome"   Source="banner_home.png" HorizontalOptions="Center"  HeightRequest="225"  Aspect="AspectFill"/>
            </StackLayout>
            <HorizontalStackLayout Spacing="30"  Margin="0,-80,40,10" HorizontalOptions="EndAndExpand" RadioButtonGroup.GroupName="colors" RadioButtonGroup.SelectedValue="1">
                <RadioButton Content="全部" Value="1" />
                <RadioButton Content="免费"  Value="2"  />
                <RadioButton Content="VIP"  Value="3"/>
            </HorizontalStackLayout>
            <!--ItemsLayout="VerticalGrid, 2"-->
            <CollectionView x:Name="cvList" ItemsSource="{Binding Homes}">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout  x:Name="cvGridItemsLayout" Orientation="Vertical"
                        Span="2"/>
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <VerticalStackLayout WidthRequest="162" HeightRequest="287">
                            <VerticalStackLayout  >
                                <!--NumberOfTapsRequired="2"-->
                                <!--Source="book_fspsydj.png"-->
                                <!--Source="{Binding ImgUrl}"-->
                                <Image 
                                   Source="book_fspsydj.png"
                                   Aspect="AspectFill"
                                   WidthRequest="162" >
                                    <Image.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped"    
                                                              Buttons="Primary,Secondary" 
                                                              CommandParameter="{Binding}"
                                        ></TapGestureRecognizer>
                                    </Image.GestureRecognizers>
                                </Image>
                            </VerticalStackLayout>

                            <AbsoluteLayout >
                                <Border Stroke="#C49B33" AbsoluteLayout.LayoutBounds="116, -220, 35, 16"
                                    StrokeThickness="2"
                                    StrokeShape="RoundRectangle 35,0,0,35"
                                    HorizontalOptions="Center">
                                    <Label 
                                       StyleClass="vipTip"
                                       HorizontalTextAlignment="Center"
                                       HorizontalOptions="EndAndExpand"
                                       Text="VIP"  />
                                </Border>
                            </AbsoluteLayout>

                            <HorizontalStackLayout WidthRequest="162" >
                                <!--Text="{Binding Name}"-->
                                <Label 
                                   HorizontalOptions="StartAndExpand" 
                                   FontSize="16"
                                   Text="{Binding ScriptureName}"
                                   FontAttributes="Bold"/>
                            </HorizontalStackLayout>

                            <HorizontalStackLayout WidthRequest="162" >
                                <Label
                                       TextColor="#FFBEBEBE"
                                       FontSize="14"
                                       WidthRequest="112"
                                       Text="1800人已拜"
                                       HorizontalOptions="StartAndExpand" />

                                <Label
                                       TextColor="#FFBEBEBE"
                                       FontSize="14"
                                       WidthRequest="50"
                                       Text="17320"
                                       HorizontalTextAlignment="End"
                                       HorizontalOptions="EndAndExpand"/>
                            </HorizontalStackLayout>

                        </VerticalStackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

        </StackLayout>
    </ScrollView>

</ContentPage>

1、HomePage.xaml.cs

using Microsoft.Maui.Media;
using RG3.MauiAppHostDemo.Model;
using RG3.MauiAppHostDemo.ParamsModels;
using RG3.MauiAppHostDemo.ViewModel;

namespace RG3.MauiAppHostDemo
{
    [QueryProperty(nameof(LoginParamModel), "LoginUserVM")]
    public partial class HomePage : ContentPage
    {
        #region 接收页面传递过来的参数 
        /// <summary>
        /// 路由导航：
        /// https://learn.microsoft.com/zh-cn/dotnet/maui/fundamentals/shell/navigation?view=net-maui-7.0
        /// </summary>
        LoginParamModel _loginUserVM;
        /// <summary>
        /// 对应 nameof(LoginUserViewModel)
        /// </summary>
        public LoginParamModel LoginUserVM
        {
            get => _loginUserVM;
            set
            {
                _loginUserVM = value;
                OnPropertyChanged();
            }
        }
        #endregion 接收页面传递过来的参数


        public HomePage()
        {
            InitializeComponent();


            #region 控制现实个数
            SetCvItemSpan();
            #endregion 控制现实个数

            BindingContext = new HomeViewModel();
        }


        /// <summary>
        /// 页面按钮点击事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="args"></param>
        void OnTapGestureRecognizerTapped(object sender, TappedEventArgs args)
        {
            var bindingContext = ((Microsoft.Maui.Controls.BindableObject)sender).BindingContext;
            var bindingObject = bindingContext as HomeModel;
            var baseParamModel = new BaseParamModel
            {
                Name = bindingObject.ScriptureName,
                Id = bindingObject.ScriptureId
            };
            var navigationParameter = new Dictionary<string, object>
            {
                { "BasePM", baseParamModel }
            };
            Shell.Current.GoToAsync("ScriptureDetailPage", navigationParameter);
        }


        // 根据宽度计算位置
        protected override void OnSizeAllocated(double pageWidth, double pageHeight)
        {
            base.OnSizeAllocated(pageWidth, pageHeight);
            #region 控制现实个数
            SetCvItemSpan(pageWidth);
            #endregion 控制现实个数
        }

        #region 控制现实个数
        /// <summary>
        /// 控制现实个数
        /// </summary>
        /// <param name="cwidth"></param>
        private void SetCvItemSpan(double cwidth = 0)
        {
            cwidth = cwidth == 0 ? DeviceDisplay.Current.MainDisplayInfo.Width : cwidth;
            if (cwidth <= 414)
            {
                this.cvGridItemsLayout.Span = 2;
            }
            else if (cwidth <= 1024)
            {
                this.cvGridItemsLayout.Span = 4;
            }
            else
            {
                this.cvGridItemsLayout.Span = 6;
            }
        }
        #endregion 控制现实个数
    }
}