如何绑定到CarouselView（Xamarin.Forms）（MVVM）内部的ViewModel元素？

Posted 2023-01-24

我试图使用我一直使用的方式将图像的手势命令绑定到我的ViewModel：Command="Binding MyViewModelProperty，这通常可以工作，但是在这种情况下不行，我相信这是因为该命令位于所属图像的内部到carouselView，因此它将在CarouselView.ItemsSource中而不是在ViewModel中查找属性。无论如何，有没有指定绑定需要在ViewModel中发生？我尝试使用“ path”属性，但是它似乎无法正常工作，或者至少我没有正确实现它。

这是轮播代码：

//The Binding of this button works fine since the binding context of the page is set to the ViewModel
                <Button
                    BackgroundColor="Transparent"
                    VerticalOptions="FillAndExpand"
                    HorizontalOptions="FillAndExpand"

                    Grid.Column="0"
                    Grid.Row="0"

                    Command="Binding button">

                <CarouselView
                    x:Name="carousel" 

                    Grid.Column="0"
                    Grid.ColumnSpan="3"
                    Grid.Row="1"

                    BackgroundColor="Transparent"
                    Opacity="0"

                    ItemsSource="Binding MovieList, Mode=OneWay"
                    Scrolled="Carousel_Scrolled">
                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <custom:PancakeView
                                    CornerRadius = "30"
                                    HasShadow="True"
                                    BackgroundGradientStartColor="Binding StartColor"
                                    BackgroundGradientEndColor="Binding EndColor"
                                    BackgroundGradientAngle="22"

                                    Margin="Binding Margin"
                                    WidthRequest="295"
                                    VerticalOptions="FillAndExpand"
                                    HorizontalOptions="Center">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="16.67*"/>
                                            <RowDefinition Height="20.22*"/>
                                            <RowDefinition Height="48.51*"/>
                                            <RowDefinition Height="14.6*"/>
                                        </Grid.RowDefinitions>
                                        <Image
                                            Source="Binding TheImage"
                                            Grid.Row="0"
                                            Grid.RowSpan="4"
                                            HeightRequest="1000"
                                            Aspect="AspectFill">

                                            <Image.GestureRecognizers>
                                                <ClickGestureRecognizer Command="Binding GoToDetails"/>
                                            </Image.GestureRecognizers>
                                        </Image>
                                    </Grid>
                                </custom:PancakeView>
                            </Grid>
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>

仅此，如果您需要更多信息，我将在收到您的请求后立即提供，谢谢您的时间，祝您有愉快的一天。

编辑：这是我在ViewModel中所做的

public class HomeViewModel : FreshBasePageModel
    
        public ICommand GoToDetails  get; set; 

        public HomeViewModel()
        
            GoToDetails = new Command(async () =>
            
                await CoreMethods.PushPageModel<ElementViewModel>();
            );
        
    

编辑：我也尝试过这个：

<ClickGestureRecognizer Command="Binding Path = FirstApp.ViewModels.HomeViewModel.GoToDetails"/>

但是它似乎不起作用。

编辑：这是我的ViewModel与xaml代码相关的一些代码：

    public class HomeViewModel : FreshBasePageModel
    
// navigationService and dataBaseService are irrelevant for this matter
        public InavigationService navigationService;
        private IApiDataBaseService dataBaseService;
        public ICommand GoToDetails  get; set; 

        private ObservableCollection<MovieModel> movieList;
        public ObservableCollection<MovieModel> MovieList
        
            get
            
                return movieList;
            
            set
            
                movieList = value;
            
        

        public HomeViewModel(InavigationService inavigation, IApiDataBaseService _dataBaseService)
        
            navigationService = inavigation;
            dataBaseService = _dataBaseService;

            GoToDetails = new Command(async () =>
            
                await CoreMethods.PushPageModel<ElementViewModel>();
            );
        

答案

如上所述，应将命令放置在模型类MovieModel中。

public class MovieModel

    public Color StartColor  get; set; 
    public Color EndColor  get; set; 


    public Thickness Margin  get; set; 

    public ImageSource TheImage  get; set; 

    public ICommand GoToDetails  get; set; 

    public MovieModel()
    
        GoToDetails = new Command(async () =>
        
            await CoreMethods.PushPageModel<ElementViewModel>();
        );