Share via

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

  • Article

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

Exemple

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

<!--XmlDataProvider is defined in a ResourceDictionary, 
    such as Window.Resources-->
<XmlDataProvider x:Key="InventoryData" XPath="Books">
    <x:XData>
        <Books xmlns="">
            <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 ISBN colonne, vous devez spécifier que la HorizontalContentAlignment propriété de chaque ListViewItem colonne est Stretch, afin que les éléments de chaque ListViewItem colonne puissent s’étendre ou être positionnés sur toute la largeur de chaque colonne. Étant donné que la ListView source de données est liée à une source de données, vous devez créer un style qui définit le HorizontalContentAlignment. Ensuite, vous devez utiliser un DataTemplate pour afficher le contenu au lieu d’utiliser la DisplayMemberBinding propriété. Pour afficher le ISBN modèle, il DataTemplate peut simplement contenir une TextBlockHorizontalAlignment propriété définie sur Right.

L’exemple suivant définit le style et DataTemplate nécessaire pour aligner la ISBN colonne à droite et modifie la GridViewColumn référence .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