Tengo tres páginas Todas las páginas tienen vista de colección y VieModels, en la tercera página quiero mostrar datos leídos Creé una vista de colección y escribí una etiqueta en la parte inferior para verificar si los datos se leen en un objeto de clase Mi problema es que cuando hago clic en el botón Atrás para volver a la página anterior, los datos se almacenan en un objeto de clase (y eso es bueno) pero quiero que la imagen seleccionada tenga su color de fondo cambiado, no vuelva a su estado original

PRIMERA PÁGINA

<?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>

CÓDIGO DETRÁS

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

Ver modelo PRIMERA PÁGINA

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;
                
            });
        }

    }
}

SEGUNDA PÁGINA

 <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>

CÓDIGO DETRÁS

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

VER SEGUNDA PÁGINA DEL MODELO

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;

            });
        }

    }
}

TERCERA PÁGINA

<?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>

CÓDIGO DETRÁS

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());
           
        }
    }
}

VER TERCERA PÁGINA DEL MODELO

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());
           
        }
    }
}

Ayúdame a guardar el color del elemento seleccionado, porque en mi proyecto una persona puede querer volver y volver a verificar toda la información, y los elementos seleccionados no son visibles (aunque en el objeto y registrados) ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

2
Maria Kamenskyh 29 ago. 2020 a las 15:08

1 respuesta

La mejor respuesta

Cuando llame a Navigation.PopModalAsync() en su segunda página cuando haga clic en el botón Atrás (maneje el método GotoPage1), la segunda página se destruirá, pero los datos tryHeart aún existen. el segundo de nuevo, puede ver que se muestra tryHeart.TypeHeart2, la página se vuelve a crear (por lo que no puede ver la selección en la interfaz de usuario).

Finalmente, podría determinar si tryHeart.TypeHeart2 está vacío y establecer la selección cuando navegue a la segunda página.

Por ejemplo, en su segundo modelo de vista:

   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;

        });
    }
2
Leo Zhu - MSFT 31 ago. 2020 a las 03:48