Udostępnij za pośrednictwem

Jak zmienić poziome wyrównanie kolumny w widoku ListView

  • Artykuł

Zawartość każdej kolumny w ListViewItem jest domyślnie wyrównana do lewej. Wyrównanie każdej kolumny można zmienić, podając DataTemplate i ustawiając właściwość HorizontalAlignment elementu w DataTemplate. W tym temacie pokazano, jak ListView domyślnie wyrównuje swoją zawartość oraz jak można zmienić wyrównanie jednej z kolumn w ListView.

Przykład

W poniższym przykładzie dane w kolumnach Title i ISBN wyrównano do lewej.

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

Aby zmienić wyrównanie kolumny ISBN, należy ustalić, że właściwość HorizontalContentAlignment każdego ListViewItem ma wartość Stretch, co pozwala elementom w każdej ListViewItem obejmować lub znajdować się na całej szerokości każdej kolumny. Ponieważ ListView jest powiązana ze źródłem danych, należy utworzyć styl ustawiający HorizontalContentAlignment. Następnie należy użyć DataTemplate, aby wyświetlić zawartość zamiast używać właściwości DisplayMemberBinding. Aby wyświetlić ISBN każdego szablonu, DataTemplate może po prostu zawierać TextBlock, który ma właściwość HorizontalAlignment ustawioną na Right.

W poniższym przykładzie zdefiniowano styl i DataTemplate niezbędne do wyrównania kolumny ISBN do prawej strony oraz zmienia GridViewColumn, aby odnosiło się do 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>

Zobacz też