Zoeken…


DataTemplate gebruiken in een ListBox

Stel dat we het volgende XAML-fragment hebben:

<ListBox x:Name="MyListBox" />

Vervolgens schrijven we in de code achter voor dit XAML-bestand het volgende in de constructor:

MyListBox.ItemsSource = new[]
{
    1, 2, 3, 4, 5
};

Met de toepassing krijgen we een lijst met nummers die we hebben ingevoerd.

voer hier de afbeeldingsbeschrijving in

Als we echter proberen een lijst met objecten van een aangepast type weer te geven, zoals deze

MyListBox.ItemsSource = new[]
{
    new Book { Title = "The Hitchhiker's Guide to the Galaxy", Author = "Douglas Adams" },
    new Book { Title = "The Restaurant at the End of the Universe", Author = "Douglas Adams" },
    new Book { Title = "Life, the Universe and Everything", Author = "Douglas Adams" },
    new Book { Title = "So Long, and Thanks for All the Fish", Author = "Douglas Adams" },
    new Book { Title = "Mostly Harmless", Author = "Douglas Adams" }
};

ervan uitgaande dat we een klas hebben die Book heet

public class Book
{
    public string Title { get; set; }
    public string Author { get; set; }
}

dan zou de lijst er ongeveer zo uitzien:

voer hier de afbeeldingsbeschrijving in

Hoewel we kunnen aannemen dat de ListBox 'slim genoeg' is om onze boekobjecten precies goed weer te geven, zien we eigenlijk de volledige naam van het Book . Wat ListBox hier eigenlijk doet, is de ingebouwde methode ToString() aanroepen voor objecten die het wil weergeven, en terwijl dat in het geval van getallen de gewenste uitkomst oplevert, resulteert het aanroepen van ToString() op objecten van aangepaste klassen in het verkrijgen van de naam van hun type, zoals te zien op de screenshot.

We kunnen dat oplossen door ToString() te schrijven voor onze boekenklasse, dat wil zeggen

public override string ToString()
{
    return Title;
}

voer hier de afbeeldingsbeschrijving in

Dat is echter niet erg flexibel. Wat als we de auteur ook willen weergeven? We zouden dat ook in de ToString kunnen schrijven, maar wat als we dat niet in alle lijsten in de app willen? Wat dacht je van een mooie boekomslag om weer te geven?

Dat is waar DataTemplates kunnen helpen. Het zijn fragmenten van XAML die naar behoefte kunnen worden "geïnstantieerd", ingevuld met details op basis van de brongegevens waarvoor ze zijn gemaakt. Simpel gezegd, als we onze ListBox-code als volgt uitbreiden:

<ListBox x:Name="MyListBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Title}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

dan maakt de lijst een TextBox voor elk item in de bron, en die TextBoxen hebben hun Text eigenschappen "ingevuld" met waarden uit de eigenschap Title van onze objecten.

Als we de toepassing nu uitvoeren, krijgen we dezelfde uitvoer als hierboven, * zelfs als we de aangepaste ToString implementatie verwijderen. Het voordeel hiervan is dat we deze sjabloon dan verder kunnen aanpassen dan de mogelijkheden van een eenvoudige string (en ToString ). We kunnen elk XAML-element gebruiken dat we willen, inclusief aangepaste elementen, en kunnen hun waarden "binden" aan werkelijke gegevens van onze objecten (zoals Title in het bovenstaande voorbeeld). Breid de sjabloon bijvoorbeeld als volgt uit:

<ListBox x:Name="MyListBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock FontStyle="Italic" Text="{Binding Author}" />
                <TextBlock FontSize="18" Text="{Binding Title}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Dan krijgen we een mooi opgemaakt beeld van onze boeken!

voer hier de afbeeldingsbeschrijving in



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow