c# - 当我转到上一页时，所选图像的颜色未显示在 Collection View 中

Question

我有三个页面。所有页面都有集合 View 和 VieModels，在第三页我想显示读取的数据。我创建了一个集合 View 并在底部写了一个标签来检查数据是否被读入类对象。我的问题是当我单击后退按钮返回上一页时，数据存储在一个类对象中(这很好)，但我希望所选图像具有更改的背景颜色，而不是返回其原始状态。
第一页

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App1.Try.TryPage">
    <ContentPage.Content>
        <StackLayout>
            <CollectionView  x:Name="AddCar" ItemsSource="{Binding Hearts}"      
                  SelectionMode="None">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical"
                Span="2" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="135" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="150" />
                                <ColumnDefinition Width="150" />
                            </Grid.ColumnDefinitions>
                            <Frame CornerRadius="10" BorderColor="Black" Padding="0" >
                                <Button 
                           CornerRadius="10" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="135" WidthRequest="150"
                         BackgroundColor="{Binding CustButtonColor}" ImageSource="{Binding Image}"
                          Command="{ Binding BindingContext.ChangeColor, 
                           Source={x:Reference Name=AddCar} }"  CommandParameter="{Binding .}"/>
                            </Frame>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
            <Label x:Name="small12" FontSize="Large" HorizontalOptions="Center"  VerticalOptions="Start"  Text="{Binding  tryHeart.TypeHeart}" />
            <Button Text="Navigate" Command="{Binding navigateCommand }"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

代码隐藏

namespace App1.Try
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class TryPage : ContentPage
    {
        public TryPage()
        {
            InitializeComponent();
            BindingContext = new Try(Navigation);
        }
    }
}

查看模型第一页

namespace App1.Try
{
    class Try
    {
        public ObservableCollection<CircleColor> Hearts { get; set; }
        public ICommand ChangeColor { protected set; get;}

        public TryHeart tryHeart { get; set; }
        INavigation Navigation { get; set; }

        public Command navigateCommand { get; set; }
        public Command navigateCommand2 { get; set; }
        public async Task GotoPage2()
        {
           if(tryHeart.TypeHeart!=null) await Navigation.PushModalAsync(new Second(tryHeart));
        }
        public async Task GotoPage1()
        {
            await Navigation.PopModalAsync();
        }

        public Try(INavigation navigation)
        {
            tryHeart = new TryHeart();

            this.Navigation = navigation;
            this.navigateCommand = new Command(async () => await GotoPage2());
            this.navigateCommand2 = new Command(async () => await GotoPage1());

            Hearts = new ObservableCollection<CircleColor>();
            Hearts.Add(new CircleColor() { Name = "one",  Image = "heart", CustButtonColor = Color.White });
            Hearts.Add(new CircleColor() { Name = "two",  Image = "heart", CustButtonColor = Color.White });
            Hearts.Add(new CircleColor() { Name = "three",Image = "heart", CustButtonColor = Color.White });
            Hearts.Add(new CircleColor() { Name = "four", Image = "heart", CustButtonColor = Color.White });
      
            var DefaultCars = new ObservableCollection<CircleColor>();
            DefaultCars = Hearts;

            ChangeColor = new Command<CircleColor>((key) =>
            {
                foreach (var item in Hearts)
                {
                    item.CustButtonColor = Color.White;
                    item.Image = "heart";
                }
                var car = key as CircleColor;
                car.CustButtonColor = Color.LightCoral;
                tryHeart.TypeHeart = car.Name;
                
            });
        }

    }
}

第二页

 <ContentPage.Content>
        <StackLayout>
            <StackLayout>
                <CollectionView  x:Name="AddCar" ItemsSource="{Binding Hearts}"      
                  SelectionMode="None">
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Vertical"
                Span="2" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid >
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="135" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="150" />
                                    <ColumnDefinition Width="150" />
                                </Grid.ColumnDefinitions>
                                <Frame CornerRadius="10" BorderColor="Black" Padding="0" >
                                    <Button 
                           CornerRadius="10" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="135" WidthRequest="150"
                         BackgroundColor="{Binding CustButtonColor}" ImageSource="{Binding Image}"
                          Command="{ Binding BindingContext.ChangeColor, 
                           Source={x:Reference Name=AddCar} }"  CommandParameter="{Binding .}"/>
                                </Frame>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
                <Label x:Name="small12" FontSize="Large" HorizontalOptions="Center"  VerticalOptions="Start"  Text="{Binding  tryHeart.TypeHeart2}" />
                <Button Text="Navigate" Command="{Binding navigateCommand }"/>
                <Button Text="Back" Command="{Binding navigateCommand2 }"/>
            </StackLayout>

        </StackLayout>
    </ContentPage.Content>

代码隐藏

namespace App1.Try
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Second : ContentPage
    {
        public Second( TryHeart tryHeart)
        {
            InitializeComponent();
            BindingContext = new SSec(Navigation,tryHeart);
        }
    }
}

查看模型第二页

namespace App1.Try
{
    class SSec
    {
       public ObservableCollection<CircleColor> Hearts { get; set; }
        public ICommand ChangeColor { protected set; get; }

        public TryHeart tryHeart { get; set; }
        INavigation Navigation { get; set; }

        public Command navigateCommand { get; set; }
        public Command navigateCommand2 { get; set; }
        public async Task GotoPage2()
        {
          if(tryHeart.TypeHeart2!=null) await Navigation.PushModalAsync(new Third(tryHeart));
        }

        public async Task GotoPage1()
        {
            await Navigation.PopModalAsync();
        }
        public SSec(INavigation navigation,TryHeart heart)
        {
            tryHeart = heart;

            this.Navigation = navigation;
            this.navigateCommand = new Command(async () => await GotoPage2());
            this.navigateCommand2 = new Command(async () => await GotoPage1());

            Hearts = new ObservableCollection<CircleColor>();
            Hearts.Add(new CircleColor() { Name = "oneO", Image = "heart", CustButtonColor = Color.White });
            Hearts.Add(new CircleColor() { Name = "twoO", Image = "heart", CustButtonColor = Color.White });
            Hearts.Add(new CircleColor() { Name = "threeO", Image = "heart", CustButtonColor = Color.White });
            Hearts.Add(new CircleColor() { Name = "fourO", Image = "heart", CustButtonColor = Color.White });

            var DefaultCars = new ObservableCollection<CircleColor>();
            DefaultCars = Hearts;

            ChangeColor = new Command<CircleColor>((key) =>
            {
                foreach (var item in Hearts)
                {
                    item.CustButtonColor = Color.White;
                    item.Image = "heart";
                }
                var car = key as CircleColor;
                car.CustButtonColor = Color.Orange;
                tryHeart.TypeHeart2 = car.Name;

            });
        }

    }
}

第三页

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App1.Try.Third">
    <ContentPage.Content>
        <StackLayout>
              <Label x:Name="one" Text="{Binding  heart.TypeHeart}"  FontSize="Large" HorizontalOptions="Center"  VerticalOptions="Center"  />
        <Label x:Name="two" Text="{Binding  heart.TypeHeart2}" FontSize="Large" HorizontalOptions="Center"  VerticalOptions="Center"  />
        <Button Text="Back" Command="{Binding navigateCommand2 }"/>
          
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

代码隐藏

namespace App1.Try
{
    class Tht
    {
        public TryHeart heart { get; set; }
        INavigation Navigation { get; set; }

        public Command navigateCommand2 { get; set; }
        public async Task GotoPage1()
        {
            await Navigation.PopModalAsync();
        }
        public Tht(INavigation navigation, TryHeart h)
        {
            heart = h;
            this.Navigation = navigation;
            this.navigateCommand2 = new Command(async () => await GotoPage1());
           
        }
    }
}

查看模型第三页

namespace App1.Try
{
    class Tht
    {
        public TryHeart heart { get; set; }
        INavigation Navigation { get; set; }

        public Command navigateCommand2 { get; set; }
        public async Task GotoPage1()
        {
            await Navigation.PopModalAsync();
        }
        public Tht(INavigation navigation, TryHeart h)
        {
            heart = h;
            this.Navigation = navigation;
            this.navigateCommand2 = new Command(async () => await GotoPage1());
           
        }
    }
}

请帮我保存所选项目的颜色。因为在我的项目中，一个人可能想返回并重新检查所有信息，而所选元素不可见(尽管在对象中并记录)

Answer 1

随叫随到 Navigation.PopModalAsync()在你的第二页点击后退按钮(处理 GotoPage1 方法)，第二页会被销毁，但数据 tryHeart仍然存在。当您再次导航到第二个时，您可以看到 tryHeart.TypeHeart2显示，页面被重新创建(因此您无法在 UI 上看到选择)。
最后你可以确定是否tryHeart.TypeHeart2为空并在导航到第二页时设置选择。
例如在你的第二个 View 模型中:

   public SSec(INavigation navigation,TryHeart heart)
    {
        tryHeart = heart;

        this.Navigation = navigation;
        this.navigateCommand = new Command(async () => await GotoPage2());
        this.navigateCommand2 = new Command(async () => await GotoPage1());

        Hearts = new ObservableCollection<CircleColor>();
        Hearts.Add(new CircleColor() { Name = "oneO", Image = "heart", CustButtonColor = Color.White });
        Hearts.Add(new CircleColor() { Name = "twoO", Image = "heart", CustButtonColor = Color.White });
        Hearts.Add(new CircleColor() { Name = "threeO", Image = "heart", CustButtonColor = Color.White });
        Hearts.Add(new CircleColor() { Name = "fourO", Image = "heart", CustButtonColor = Color.White });

        var DefaultCars = new ObservableCollection<CircleColor>();
        DefaultCars = Hearts;
        
        //determine 
        if(!string.IsNullOrEmpty(tryHeart.TypeHeart2)){
          if(tryHeart.TypeHeart2.Equals("oneO")){
              Hearts[0].CustButtonColor =  Color.Orange;
          }
          if(tryHeart.TypeHeart2.Equals("twoO")){
              Hearts[1].CustButtonColor =  Color.Orange;
          }
          if(tryHeart.TypeHeart2.Equals("threeO")){
              Hearts[2].CustButtonColor =  Color.Orange;
          }
          if(tryHeart.TypeHeart2.Equals("fourO")){
              Hearts[3].CustButtonColor =  Color.Orange;
          }
        }
        ChangeColor = new Command<CircleColor>((key) =>
        {
            foreach (var item in Hearts)
            {
                item.CustButtonColor = Color.White;
                item.Image = "heart";
            }
            var car = key as CircleColor;
            car.CustButtonColor = Color.Orange;
            tryHeart.TypeHeart2 = car.Name;

        });
    }