.NET Maui Carousel查看新手问题

Question

嗨，如果这个问题有点新手，我很抱歉。但我花了大约 10 个小时试图了解如何做我想做的事。

我已经用 CurrentItem、CurrentPosition 等尝试了很多东西。但似乎没有任何效果。

我基本上希望 ViewModel 中的 TotalPrice 属性更新为当前聚焦的 carouselView Item 的相应值。

这是我的代码。我真的希望有人能帮助我:-)

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="CarouselVIewDemo.MVVM.Views.StartPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="StartPage">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <CarouselView
            x:Name="CarouselTest"
            Grid.Row="0"
            Margin="4"
            CurrentItemChangedCommand="{Binding CarouselViewItemChanged}"
            HorizontalOptions="Center"
            IndicatorView="indicatorView"
            ItemsSource="{Binding CarouselViewItems}"
            VerticalOptions="Center">

            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Grid RowDefinitions="*,*">
                        <Frame
                            Grid.Row="0"
                            BackgroundColor="Beige"
                            BorderColor="DarkOrange"
                            CornerRadius="50"
                            HasShadow="True"
                            HeightRequest="110"
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            WidthRequest="140">
                            <Label
                                FontAttributes="Bold"
                                FontSize="Large"
                                HorizontalOptions="Center"
                                Text="{Binding ProductName}"
                                VerticalOptions="Center" />
                        </Frame>
                        <Label
                            x:Name="{Binding ProductPrice}"
                            Grid.Row="1"
                            Padding="0"
                            FontAttributes="Bold"
                            FontSize="Large"
                            HorizontalOptions="Center"
                            Text="{Binding ProductPrice, StringFormat='{0:kr #,##0.00}'}"
                            VerticalOptions="Center" />
                    </Grid>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>

        <IndicatorView
            x:Name="indicatorView"
            Grid.Row="1"
            Grid.ColumnSpan="2"
            Margin="2"
            HorizontalOptions="Center"
            IndicatorColor="Black"
            IndicatorSize="8"
            IsVisible="True"
            SelectedIndicatorColor="DarkOrange"
            VerticalOptions="Center" />

        <Label
            Grid.Row="2"
            FontSize="Large"
            HorizontalOptions="Center"
            Text="{Binding TotalPrice}" />

    </Grid>
</ContentPage>

<!--
    NOT USED ATM
    Position="{Binding ProductPrice}"
-->
<!--  CurrentItem="{Binding}"  -->

视图模型

using CarouselVIewDemo.MVVM.Models;
using PropertyChanged;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace CarouselVIewDemo.MVVM.ViewModels
{
    [AddINotifyPropertyChangedInterface]
    public class StartPageViewModel
    {
        public ObservableCollection<Product> CarouselViewItems { get; set; } = new();

        public decimal TotalPrice { get; set; } = new();

        public ICommand CarouselViewItemChanged =>
            new Command(() =>
            {               

                // This will always show the value of index 1 -
                // Instead I want it to show the price of the Product that -
                // Is currently selected in the XAML CarouselView.
                TotalPrice = CarouselViewItems[1].ProductPrice;                                          

            });

        public StartPageViewModel()
        {                       
            CarouselViewItems = new ObservableCollection<Product>
            {
                new Product
                {
                    ProductId = 1,
                    ProductName = "KaffeBønner",
                    ProductPrice = 35m
                },
                new Product
                {
                    ProductId = 2,
                    ProductName = "LakridsKonfekt",
                    ProductPrice = 55m
                },
                new Product
                {
                    ProductId = 3,
                    ProductName = "Shampoo",
                    ProductPrice = 25m
                },
            };            
        }
    }
}

Answer 1

这始终显示索引 1 的值，因为您正在执行 CarouselViewItems[1].ProductPrice;

绑定到 CarouselView 的 CurrentItem 属性，默认情况下使用 ObservableProperty 可以是 ProductCurrentItem = CarouselViewItems[0] ，然后使用 ProductCurrentItem 来获取 CarouselViewItemChanged 中的 TotalPrice

无需为此创建新变量，只需绑定到标签视图中的 ProductCurrentItem.TotalPrice

旁注：框架已弃用，请使用边框代替。