4

tengo una duda, estoy trabajando con Xamarin y me ha tocado hacer una tabbedpage y agregar 2 páginas (ContentPage) y todo ha estado bien, el problema es cuando voy a hacer un evento, es decir, tengo un ListView y cuando selecciono un item quiero que en la página 2 se actualice, lo más cercano que pude investigar fue usar ObservableCollection que lo utilicé para agregar datos a esa listview pero lo que quiero ahora es que el dato seleccionado me tiene que actualizar unos labels de la segunda página.

Voy a mostrar el código XAML de la primera página (aquella que tiene el Listview)

<ContentPage.Content>
        <StackLayout>
            <ListView x:Name="ListItems">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                                <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="70"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" HorizontalOptions="Start" Source="{Binding Icon}" Margin="5"></Image>
                                <Label Grid.Column="1" Text="{Binding Name}"/>
                                <Label Grid.Column="1" Grid.Row="1" Text="{Binding Author}" VerticalTextAlignment="Center" FontSize="11"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>

Como podemos ver, internamente a ese Listview yo le paso un Observable y lo demás excelente. Ahora voy a mostrar el código CS del evento del Listview:

ListItems.ItemsSource = listMusic.Musics();
ListItems.ItemSelected += (sender, e) =>
{
     if(ListItems.SelectedItem != null)
     {
     }
};

Como podemos ver, el método Musics devuelve un ObservableCollection, ahora en el if es donde enviaría o en pocas palabras modificaría el valor actual de la segunda página y es ahí mi duda, ¿cómo puedo modificar esos datos? Voy a mostrar el código XAML de la segunda página:

<ContentPage.Content>
        <StackLayout>
            <Image x:Name="IMG"  Background="Red" HeightRequest="300" Margin="35, 100, 35, 0" Aspect="Fill"/>
            <Label x:Name="Titulo" Text="Título de la canción" Margin="35, 0, 0, 0" FontSize="Title"/>
            <Label x:Name="Artista" Text="Artita" Margin="35, 0, 0, 0"/>
            <Slider x:Name="Slider" Maximum="100" Minimum="1" Value="1" Margin="22, 0, 0, 0" WidthRequest="200" HeightRequest="35" MinimumTrackColor="#FFFE4164" MaximumTrackColor="White"/>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>

                <Button WidthRequest="60" HeightRequest="60" CornerRadius="30" VerticalOptions="Center" HorizontalOptions ="Center" Grid.Column="0" Margin="55,0,-55,0" BackgroundColor="White" ImageSource="tocarr"   />
                <ImageButton   VerticalOptions="Center" HorizontalOptions ="Center" Grid.Column="1" Source="playy"/>
                <Button WidthRequest="60" HeightRequest="60" CornerRadius="30" VerticalOptions="Center" HorizontalOptions ="Center" Grid.Column="2" Margin="-55,0,55,0" />
            </Grid>
          
        </StackLayout>
    </ContentPage.Content>

Actualización:

He agregado esto a mi clase Music:

public class Music : INotifyPropertyChanged
    {
        private string _Author;
        public event PropertyChangedEventHandler PropertyChanged;
        private Android.Graphics.Bitmap _Img;
        private string _Name;
        private string _Path;

        public string Name { 
            get => _Name; 
            set {
                if(value != _Name)
                {
                    _Name = value;
                    NotifyPropertyChanged();
                }
            }
        }

        public string Author {
            get => _Author;
            set
            {
                if(value != _Author)
                {
                    _Author = value;
                    NotifyPropertyChanged();
                }
            }
        }

        public Android.Graphics.Bitmap Icon { 
            get => _Img;
            set
            {
                if (value != _Img)
                {
                    _Img = value;
                    NotifyPropertyChanged();
                }
            } 
        }
        public string Path {
            get => _Path;
            set
            {
                if (value != _Path)
                {
                    _Path = value;
                    NotifyPropertyChanged();
                }
            }
        }


        public Music(string Name, string Author, Android.Graphics.Bitmap Icon, string Path)
        {
            this.Name = Name;
            this.Author = Author;
            this.Icon = Icon;
            this.Path = Path;
        }

        public Music()
        {

        }

        private void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        public override string ToString()
        {
            return "Nombre de la Canción: " + Name + ".\nNombre del Autor: " 
                + Author + ".\nÍcono: " + Icon +".\nRuta: " + Path;
        }


    }

Y además agregué los binding en la segunda pestaña:

<Image x:Name="IMG" Source="{Binding Icon}" Background="Red" HeightRequest="300" Margin="35, 100, 35, 0" Aspect="Fill"/>
            <Label x:Name="Titulo" Text="{Binding Name}" Margin="35, 0, 0, 0" FontSize="Title"/>
            <Label x:Name="Artista" Text="{Binding Author}" Margin="35, 0, 0, 0"/>

Mi método para enviar la información de pestaña 1 a pestaña 2:

 if(ListItems.SelectedItem != null)
                    {
                        var Music = ListItems.SelectedItem as Music;
                        MessagingCenter.Send("EnviarA", "Enviar", Music);
                        await DisplayAlert("info", Music.ToString(), "e");
                   
                    }

Y el constructor donde recibe la información:

public Music Music { get; set; }
        public MusicPage()
        {
            InitializeComponent();
            BindingContext = Music;

            MessagingCenter.Subscribe<Music>("EnviarA", "Enviar", (tema) =>
            {
                Music = tema;
            });
        }

1 respuesta 1

2

Como primer punto, no te devuelve un ObservableCollection ya que eso es un Tipo de lista, lo cual en su clase ya implementa INotifyPropertyChanged, lo que significa que si tu haces un cambio de un dato de esa lista, ese dato se ve automáticamente reflejado en tu ListView. Lo que el Listview te devuelve es un objeto que esta dentro de su ObservableCollection

Segundo para tu ejemplo, lo que necesitas usar es un evento o una objeto que la tengas global, si la cambias en un lado este se refleje en tu segunda pantalla.

Ahora pasando de los conceptos a la practica, deberia ser algo asi con la clase MessagingCenter Este ejemplo tenes que adaptarlo a tu problema real.

        public class Pestaña1
        {
            public void enviar()
            {
                Music music = new Music()
                {
                    Artista = "",
                    Titulo = ""
                };

                MessagingCenter.Send(this, "Enviar", Music);
            }
        }
        public class Pestaña2
        {

            public Pestaña2()
            {
                
                
                MessagingCenter.Subscribe<ListMusicPage, Music>(this,"Enviar", (tema) =>
                {
                    BindingContext = tema;
                });
            }
        }

using System.ComponentModel;
using System.Runtime.CompilerServices;

    public class Musica : INotifyPropertyChanged
    {
        private string _Artista;
        private string _Img;
        private string _Titulo;

        public string Artista
        {
            get => _Artista;
            set
            {
                if (value != _Artista)
                {
                    _Artista = value;
                    OnProperty();
                }
            }
        }

        public string Img
        {
            get => _Img;
            set
            {
                if (value != _Img)
                {
                    _Img = value;
                    OnProperty();
                }
            }
        }
        public string Titulo
        {
            get => _Titulo;
            set
            {
                if(value != _Titulo)
                {
                    _Titulo = value;
                    OnProperty();
                }
            }
        }

         private void OnProperty([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

Aca te agregue las propiedades Bindeadas. Observa el cambio en la Propiedad Text de cada componente.

 <StackLayout>
            <Image x:Name="IMG" Text="{Binding Img}" Background="Red" HeightRequest="300" Margin="35, 100, 35, 0" Aspect="Fill"/>
            <Label x:Name="Titulo" Text="{Binding Titulo}" Margin="35, 0, 0, 0" FontSize="Title"/>
            <Label x:Name="Artista" Text="{Binding Artista}" Margin="35, 0, 0, 0"/>
            <Slider x:Name="Slider" Maximum="100" Minimum="1" Value="1" Margin="22, 0, 0, 0" WidthRequest="200" HeightRequest="35" MinimumTrackColor="#FFFE4164" MaximumTrackColor="White"/>

Ahora tu opcion 2, con la propiedad Global. En clase App.cs declaras un objeto Musica;

 public Musica musica {get;set;}

Despues en tu pestaña 1,

 if(ListItems.SelectedItem != null)
     {
        App.Musica = ListItems.SelectedItem as Musica;
     }

Despues en tu pestaña 2: Dejas el ejemplo que te deje con el BindingContext, lo cual va a necesitar heredad INotifyPropertyChanged.

Ahora en tu pestaña dos, le pasas al BindingContext tu propiedad global.

        public Pestaña2()
        {
            BindingContext = App.musica;
        }
3
  • Bueno, intenté la primera opción y no entiendo porque no funciona el método enviar() de la pestaña 1 la utilizo en el ItemSelected para enviar la información y aún así no funciona, revisé lo que me estaba enviando y todo está bien, además, revisé mi clase Music y todo está bien, el OnProperty(); me imagino que es el método de NotifyPropertyChanged ¿no? Es que soy nuevo usando esto.
    – Ts-Pytham
    Commented el 30 abr. 2021 a las 16:04
  • He aplicado la segundo opción y sucede lo mismo, no muestra la actualización y me parece raro @Ramiro Barone.
    – Ts-Pytham
    Commented el 30 abr. 2021 a las 19:46
  • 1
    Ya pude solucionarlo, gracias!
    – Ts-Pytham
    Commented el 30 abr. 2021 a las 22:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.