Delen via

Procedure: De horizontale uitlijning van een kolom in een ListView wijzigen

  • Artikel

Standaard wordt de inhoud van elke kolom in een ListViewItem links uitgelijnd. U kunt de uitlijning van elke kolom wijzigen door een DataTemplate op te geven en de eigenschap HorizontalAlignment op het element in de DataTemplatein te stellen. In dit onderwerp wordt beschreven hoe een ListView de inhoud ervan standaard uitlijnt en hoe u de uitlijning van één kolom in een ListViewkunt wijzigen.

Voorbeeld

In het volgende voorbeeld worden de gegevens in de Title en ISBN kolommen links uitgelijnd.

<!--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>

Als u de uitlijning van de kolom ISBN wilt wijzigen, moet u opgeven dat de eigenschap HorizontalContentAlignment van elke ListViewItemStretchis, zodat de elementen in elke ListViewItem de gehele breedte van elke kolom kunnen omvatten of kunnen worden geplaatst. Omdat de ListView is gebonden aan een gegevensbron, moet u een stijl maken waarmee de HorizontalContentAlignmentwordt ingesteld. Vervolgens moet u een DataTemplate gebruiken om de inhoud weer te geven in plaats van de eigenschap DisplayMemberBinding te gebruiken. Als u de ISBN van elke sjabloon wilt weergeven, kan de DataTemplate eenvoudig een TextBlock bevatten waarop de eigenschap HorizontalAlignment is ingesteld op Right.

In het volgende voorbeeld wordt de stijl en DataTemplate gedefinieerd die nodig zijn om de ISBN kolom rechts uitgelijnd te maken en wordt de GridViewColumn gewijzigd om te verwijzen naar de 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>

Zie ook