4
votes

Xamarin.Forms: ajouter des étiquettes à l'intérieur de ListView?

J'apprends toujours, alors soyez indulgents avec moi.

J'essaie d'afficher un ListView dans mon Xamarin.Form . Jusqu'à présent, c'est ce que j'ai, et cela fonctionne plutôt bien:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             xmlns:local="clr-namespace:GasStations"
             x:Class="GasStations.MainPage">
    <StackLayout>
        <ListView x:Name="ListView_Pets" ItemsSource="{Binding MyClass}" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.View>
                            <Label x:Name="Label_Name" Text="Name" />
                            <Label x:Name="Label_Desc" Text="Description" />
                        </ViewCell.View>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Voici le code derrière:

var obj = JsonConvert.DeserializeObject(coord);
List<String> storeList = new List<String>();
string store = string.Empty;
foreach (var item in ((JArray)obj))
{
    store = item.Value<string>("name");
    //desc = item.Value<string>("description"); /* This is the string I want to display */
    storeList.Add(store);
}
ListView_Pets.ItemsSource = storeList;

Cela fonctionne et il montre les noms des magasins dans la ListView . Vous pouvez voir la capture d'écran ici .

Maintenant, au lieu de juste en affichant le Nom du magasin dans la ListView Je veux également afficher la description (et toute autre valeur). Je suppose que j'aurais besoin de Labels dans chaque ligne, similaire à asp.net GridView ItemTemplate .

J'ai essayé quelque chose comme ça, mais ça ne compile pas:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             xmlns:local="clr-namespace:GasStations"
             x:Class="GasStations.MainPage">
        <StackLayout>
            <ListView x:Name="ListView_Pets">
            </ListView>
        </StackLayout>
</ContentPage>

J'ai accès à la fois à Name et Description dans le codebehind (avec desc = item.Value ("description"); , mais je ne sais pas comment lier ces valeurs aux libellés dans le Formulaire.


4 commentaires

Vous n'utilisez pas les avantages du paradigme MVVM. Comme indiqué dans la réponse, spécifiez les liaisons requises avec vos étiquettes nouvellement ajoutées. x: nom casse le modèle MVVM alors essayez de vous en éloigner


stackoverflow.com/a/54280876/5772095 ... qui le fait pour vous.


"mais il ne se construit pas" - quelles erreurs de construction obtenez-vous?


@Jason, Son xaml avait ViewCell deux fois et je ne l'avais pas remarqué.


3 Réponses :


3
votes

Vous devez spécifier le Binding .. Les propriétés amusantes de votre classe sont Name et Description alors vous feriez ceci

<Label Text="{Binding Name}" />
<Label Text="{Binding Description}" />

Remarque : vous n'avez pas besoin d'utiliser x: Name sauf si vous devez y accéder directement depuis Code-Behind

XXX

Mis à jour

Merci pour votre réponse. Mais que dois-je faire dans le codebehind? À quel objet les lierais-je?

Lorsque vous spécifiez une liaison dans un ItemTemplate , vous liez les propriétés individuelles de la classe dans la liste que votre listview a spécifiée comme ItemsSource


1 commentaires

Merci pour votre réponse. Mais que dois-je faire dans le code derrière? À quel objet les plierais-je?



1
votes

Définir la classe avec les propriétés

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             xmlns:local="clr-namespace:GasStations"
             x:Class="GasStations.MainPage">
    <StackLayout>
        <ListView x:Name="ListView_Pets" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell>
                          <StackLayout Orientation="Vertical">
                            <Label Text="{Binding Name" />
                            <Label Text="{Binding Description}" />
                          </StackLayout>
                        </ViewCell>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Après puis Dans le code derrière

var obj = JsonConvert.DeserializeObject<List<MyClass>>(coord);
ListView_Pets.ItemsSource = obj;

Ensuite, mettez à jour dans la vue Liste

public MyClass(){

public string Name{get;set;}
public string Description{get;set;}
}


1 commentaires

Merci pour l'exemple complet, cela m'a vraiment aidé. Veuillez corriger les erreurs de syntaxe dans le xaml.



1
votes

Dans le code d'Ankit tyagi, ils ont écrit deux viewcell dans son xaml. supprimez l'un d'entre eux. Il existe des processus de création complète de liaison de données à une vue de liste.

Tout d'abord, définissez votre modèle.

    <StackLayout>
    <ListView x:Name="ListView_Pets" 
              ItemsSource="{Binding DataSource}" 
              HorizontalOptions="FillAndExpand"
              VerticalOptions="FillAndExpand"
              SeparatorColor="Silver">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>

                    <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
                            <Label Text="{Binding Name}" />
                             <Label Text="{Binding Description}" />
                        </StackLayout>

                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

Ensuite, définissez une source de données dans le code arrière. Je vous suggère d'utiliser ObservableCollection pour collecter vos données. ObservableCollection est une collection de données dynamiques générique qui fournit des notifications (à l'aide d'une interface "INotifyCollectionChanged") lorsque des éléments sont ajoutés, supprimés ou lorsque toute la collection est actualisée

         public ObservableCollection<MyClass> DataSource { get; set; }
    public MainPage()
    {
        this.BindingContext = this;

        DataSource = new ObservableCollection<MyClass>();

        DataSource.Add(new MyClass() { Name = "Item 1", Description = "Sub Item Text 1" });
        DataSource.Add(new MyClass() { Name = "Item 2", Description = "Sub Item Text 2" });
        DataSource.Add(new MyClass() { Name = "Item 3", Description = "Sub Item Text 3" });


        InitializeComponent();
    }

En fin de compte , difine une listview dans votre xaml. n'oubliez pas de lier les données source à partir du code arrière.

public class MyClass
{
    public string Name { get; set; }
    public string Description { get; set; }
}

Exécution de ce code.

 entrez la description de l'image ici a>


3 commentaires

Je viens de remarquer que vous ajoutez manuellement à la source de données tandis que le code d'Ankit tyagi prend l'objet coord et se copie automatiquement dans MyClass avec var obj = JsonConvert.DeserializeObject > (coord); .


Est-ce que cela peut être fait avec ObservableCollection ou dois-je parcourir la collection et l'ajouter individuellement à DataSource avec DataSource.Add ?


Oui, cela peut être fait avec ObservableCollection , vous devez parcourir la collection et l'ajouter individuellement à DataSource avec DataSource.Add .