Cómo: Cambiar la alineación horizontal de una columna en un control ListView

  • Artículo

De forma predeterminada, el contenido de cada columna de un elemento ListViewItem está alineado a la izquierda. Puede cambiar la alineación de cada columna proporcionando DataTemplate y estableciendo la propiedad HorizontalAlignment en el elemento dentro de DataTemplate. En este tema se muestra cómo ListView alinea su contenido de forma predeterminada y cómo cambiar la alineación de una columna en ListView.

Ejemplo

En el ejemplo siguiente, los datos de las columnas Title y ISBN están alineados a la izquierda.

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

Para cambiar la alineación de la columna ISBN, debe especificar que la propiedad HorizontalContentAlignment de cada ListViewItem es Stretch, de modo que los elementos de cada ListViewItem puedan abarcar o colocarse a lo largo de todo el ancho de cada columna. Dado que ListView está enlazado a un origen de datos, debe crear un estilo que establezca HorizontalContentAlignment. A continuación, debe usar DataTemplate para mostrar el contenido en lugar de usar la propiedad DisplayMemberBinding. Para mostrar el ISBN de cada plantilla, DataTemplate solo puede contener un objeto TextBlock que tenga su propiedad HorizontalAlignment establecida en Right.

En el ejemplo siguiente se define el estilo y DataTemplate necesario para alinear la columna ISBN a la derecha y se cambia GridViewColumn para hacer referencia a 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>

Vea también