Comment : modifier l'alignement horizontal d'une colonne dans un ListView

Mise à jour : novembre 2007

Par défaut, le contenu de chaque colonne d'un ListViewItem est aligné à gauche. Vous pouvez modifier l'alignement de chaque colonne en fournissant un DataTemplate et en définissant la propriété HorizontalAlignment sur l'élément dans le DataTemplate. Cette rubrique montre comment un ListView aligne son contenu par défaut et comment modifier l'alignement d'une colonne dans un ListView.

Exemple

Dans l'exemple suivant, les données des colonnes Title et ISBN sont alignées à gauche.

<!--XmlDataProvider is defined in a ResourceDictionary, 
    such as Window.Resources-->
<XmlDataProvider x:Key="InventoryData" XPath="Books">
    <x:XData>
        <Books >
            <Book ISBN="0-7356-0562-9" Stock="in" Number="9">
                <Title>XML in Action</Title>
                <Summary>XML Web Technology</Summary>
            </Book>
            <Book ISBN="0-7356-1370-2" Stock="in" Number="8">
                <Title>Programming Microsoft Windows With C#</Title>
                <Summary>C# Programming using the .NET Framework</Summary>
            </Book>
            <Book ISBN="0-7356-1288-9" Stock="out" Number="7">
                <Title>Inside C#</Title>
                <Summary>C# Language Programming</Summary>
            </Book>
            <Book ISBN="0-7356-1377-X" Stock="in" Number="5">
                <Title>Introducing Microsoft .NET</Title>
                <Summary>Overview of .NET Technology</Summary>
            </Book>
            <Book ISBN="0-7356-1448-2" Stock="out" Number="4">
                <Title>Microsoft C# Language Specifications</Title>
                <Summary>The C# language definition</Summary>
            </Book>
        </Books>
    </x:XData>
</XmlDataProvider>


...


<ListView ItemsSource="{Binding Source={StaticResource InventoryData}, XPath=Book}">
    <ListView.View>
        <GridView>
            <GridViewColumn Width="300" Header="Title" 
                            DisplayMemberBinding="{Binding XPath=Title}"/>
            <GridViewColumn Width="150" Header="ISBN" 
                            DisplayMemberBinding="{Binding XPath=@ISBN}"/>
        </GridView>
    </ListView.View>
</ListView>

Pour modifier l'alignement de la colonne ISBN, vous devez spécifier que la propriété HorizontalContentAlignment de chaque ListViewItem est Stretch, afin que les éléments de chaque ListViewItem puissent couvrir ou être positionnés sur toute la largeur de chaque colonne. Comme le ListView est lié à une source de données, vous devez créer un style qui définit l'HorizontalContentAlignment. Vous devez ensuite utiliser un DataTemplate pour afficher le contenu au lieu d'utiliser la propriété DisplayMemberBinding. Pour afficher l'ISBN de chaque modèle, le DataTemplate peut uniquement contenir un TextBlock dont la propriété HorizontalAlignment a la valeur Right.

L'exemple suivant définit le style et le DataTemplate nécessaires pour aligner le contenu de la colonne ISBN à droite et modifie la GridViewColumn pour référencer le DataTemplate.

<!--The Style and DataTemplate are defined in a ResourceDictionary, 
    such as Window.Resources-->
<Style TargetType="ListViewItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>

<DataTemplate x:Key="ISBNTemplate">
    <TextBlock HorizontalAlignment="Right" 
               Text="{Binding XPath=@ISBN}"/>
</DataTemplate>


...


<ListView ItemsSource="{Binding Source={StaticResource InventoryData}, XPath=Book}">
    <ListView.View>
        <GridView>
            <GridViewColumn Width="300" Header="Title" 
                            DisplayMemberBinding="{Binding XPath=Title}"/>
            <GridViewColumn Width="150" Header="ISBN" 
                            CellTemplate="{StaticResource ISBNTemplate}"/>
        </GridView>
    </ListView.View>
</ListView>

Voir aussi

Tâches

Comment : effectuer une liaison à des données XML à l'aide d'un XMLDataProvider et de requêtes XPath

Concepts

Vue d'ensemble de la liaison de données

Vue d'ensemble des modèles de données

Vue d'ensemble de ListView