wake-up-neo.com

Xamarin Forms dynamische Listenansicht

Ich versuche, eine Liste in xamarin.forms zu erstellen, die ein bisschen komplex ist. Der Benutzer sollte in der Lage sein, auf ein Element in der Liste zu klicken, und es sollte etwas größer werden. Das größere Element sollte jetzt einige zusätzliche UI-Komponenten anzeigen, die speziell dieser Ansicht zugeordnet sind.

Ich frage mich, wie ich dieses Problem angehen soll. Es geht um eine Listenansicht mit Elementen dynamischer Größe. Wenn Sie auf das Element klicken, werden zusätzliche Ansichten angezeigt, die sich auf das Element beziehen. Sollte dies in Xamarin.ios und Xamarin.droid geschehen, oder wird empfohlen, dies in xamarin.forms zu versuchen?

Ich werde ein Bild posten, es ist nicht gut und muss möglicherweise vergrößert werden, aber es zeigt 4 Elemente. Das dritte ist erweitert und daher können Sie den Drehknopf und den Drehknopf darauf sehen.

Es kann immer nur ein Element gleichzeitig erweitert werden (ich muss dies möglicherweise im ViewModel erledigen), und beim Drücken eines anderen Elements sollte das alte ausgeblendet werden.

 The list

Bearbeiten:

Dank Rohit habe ich begonnen, eine Lösung in Xamarin.Forms zu implementieren, aber es funktioniert nicht wirklich, nur ein paar kleine Probleme bei der Erweiterung der Zeile. Siehe Bild unten. Der Einfachheit halber überspringe ich den Spinner und benutze nur einen Knopf. Die erweiterte Zeile überlappt die Zeile unter sich. Das erste Bild ist vor dem Klicken, das zweite ist nach dem Klicken auf den Punkt "Zwei".

Aussicht

<?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="simpletest.PlayGroundPage">
    <ContentPage.Content>
        <StackLayout>
            <ListView VerticalOptions="FillAndExpand" HasUnevenRows="True" ItemsSource="{Binding AllItems}" SelectedItem="{Binding MySelectedItem}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout VerticalOptions="FillAndExpand">
                            <StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal">
                                <Label Text="{Binding MyText}" />
                                <Image Source="{Binding MyImage}" />
                            </StackLayout>
                            <Button Text="button1" IsVisible="{Binding IsExtraControlsVisible}" />  
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Artikel

    public class Item : INotifyPropertyChanged
    {


        public Item(string text, string image, int id)
        {
            _myText = text;
            _myImage = image;
            _id = id;
            _isExtraControlsVisible = false;

        }

        private string _myText;
        private string _myImage;
        private bool _isExtraControlsVisible;
        private int _id;

        public event PropertyChangedEventHandler PropertyChanged;

        public int Id { get { return _id; } set { _id = value; } }

        public string MyText
        {
            get { return _myText; }
            set { _myText = value; OnPropertyChanged("MyText"); }
        }
        public string MyImage
        {
            get { return _myImage; }
            set { _myImage = value; OnPropertyChanged("MyImage"); }
        }
        public bool IsExtraControlsVisible
        {
            get { return _isExtraControlsVisible; }
            set { _isExtraControlsVisible = value; OnPropertyChanged("IsExtraControlsVisible"); }
        }

        private void OnPropertyChanged(string property)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(property));
            }
        }
    }

ViewModel:

    class PlayGroundViewModel : INotifyPropertyChanged
    {
        private Item _mySelectedItem;



        public PlayGroundViewModel(ObservableCollection<Item> allItems)
        {
            AllItems = allItems;
            _mySelectedItem = allItems.First();
        }
        public ObservableCollection<Item> AllItems { get; set; }

        public Item MySelectedItem
        {
            get { return _mySelectedItem; } //Added a field for this one, mainly for debugging.
            set
            {

                foreach (Item x in AllItems) //Changed to non-linq since it is not a list.
                {
                    x.IsExtraControlsVisible = false;
                }

                if (value != null)
                {
                    foreach (Item x in AllItems)
                    {
                        if (x.Id.Equals(value.Id))
                        {
                            x.IsExtraControlsVisible = true;
                            _mySelectedItem = x;
                        }
                    }
                }

                SetChangedProperty("MySelectedItem");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void SetChangedProperty(string property)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(property));
            }
        }

    }

CodeBehind:

    public partial class PlayGroundPage : ContentPage
    {
        public PlayGroundPage()
        {
            InitializeComponent();
            ObservableCollection<Item> items = new ObservableCollection<Item>();
            items.Add(new Item("One", "", 0));
            items.Add(new Item("Two", "", 1));
            items.Add(new Item("Three", "", 2));
            PlayGroundViewModel weekViewModel = new PlayGroundViewModel(items);
            BindingContext = weekViewModel;
        }
    }

 Before clicking on a row

 After having clicked

6
why_vincent

Sie können es folgendermaßen mit XAML, ViewModel, ObservableCollection implementieren.

XAML:

<ListView VerticalOption="FillAndExpand" HasUnevenRows="True" 
 ItemsSource="{Binding AllItems}" SelectedItem="{Binding MySelectedItem}" >
 <ListView.ItemTemplate>
   <DataTemplate>
      <ViewCell>
         <StackLayout VerticalOptions="FillAndExpand">
            <StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal">
               <Label Text="{Binding MyText}" />
               <Image Source="{Binding MyImage}" />
            </StackLayout>
            <Button Text="button" IsVisible="{Binding IsExtraControlsVisible}" />
            <Spinner IsVisible="{Binding IsExtraControlsVisible}" />
         </StackLayout>
      </ViewCell> 
   </DataTemplate>
 </ListView.ItemTemplate>
</ListView>

ViewModel:

public ObservableCollection<Item> AllItems
{
    get { return _allItems; }
    set
    {
        _allItems = value;
        OnPropertyChanged();
     }
}
public Item MySelectedItem
{
    get { return _mySelectedItem; }
    set
    {
        _mySelectedItem = value;
        OnPropertyChanged();

        foreach (var item in AllItems)
        {
            item.IsExtraControlsVisible = false;
        }
        var selectedItem = AllItems.FirstOrDefault(x => x.Equals(value));
        if (selectedItem != null)
        {
            selectedItem.IsExtraControlsVisible = true;
        }
    }
}

Item.cs:

public class Item : INotifyPropertyChanged
{
   private string _myText;
   private string _myImage;
   private bool _isExtraControlsVisible;
   private int _id;

   public int Id { get; set; }
   public string MyText 
   {
       get{ return _myText; } 
       set
       { _myText = value; 
          OnPropertyChanged();
       } 
   }
   public string MyImage
   {
       get{ return _myImage; } 
       set
       {
            _myImage = value; 
            OnPropertyChanged();
       } 
   }
   public bool IsExtraControlsVisible
   {
       get{ return _isExtraControlsVisible; } 
       set
       {
           _isExtraControlsVisible = value;
           OnPropertyChanged();
       } 
   }
}

Die Demo finden Sie hier - XamarinForms_Dynamic_ListView_Item .

1