Comment redimensionner et aligner à droite les données d'une GridViewColumn dans WPF ?

Question

Comment puis-je :

• aligner à droite le texte de la colonne ID
• faire en sorte que chacune des colonnes s'auto-dimensionne en fonction de la longueur du texte de la cellule dont les données visibles sont les plus longues ?

Voici le code :

<ListView Name="lstCustomers" ItemsSource="{Binding Path=Collection}">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="ID" DisplayMemberBinding="{Binding Id}" Width="40"/>
            <GridViewColumn Header="First Name" DisplayMemberBinding="{Binding FirstName}" Width="100" />
            <GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding LastName}"/>
        </GridView>
    </ListView.View>
</ListView>

réponse partielle :

Merci Kjetil, le GridViewColumn.CellTemplate fonctionne bien et la largeur automatique fonctionne bien sûr, mais lorsque l'ObservativeCollection "Collection" est mis à jour avec des données plus longues que la largeur de la colonne, les tailles des colonnes ne se mettent pas à jour elles-mêmes, donc c'est seulement une solution pour l'affichage initial des données :

<ListView Name="lstCustomers" ItemsSource="{Binding Path=Collection}">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="ID" Width="Auto">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Id}" TextAlignment="Right" Width="40"/>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
            <GridViewColumn Header="First Name" DisplayMemberBinding="{Binding FirstName}" Width="Auto" />
            <GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding LastName}" Width="Auto"/>
        </GridView>
    </ListView.View>
</ListView>

Answer 1

Pour que chacune des colonnes ait une taille automatique, vous pouvez définir Width="Auto" sur la GridViewColumn.

Pour aligner à droite le texte de la colonne ID, vous pouvez créer un modèle de cellule utilisant un TextBlock et définir l'alignement du texte. Définissez ensuite le paramètre ListViewItem.HorizontalContentAlignment (en utilisant un style avec un paramètre sur le ListViewItem) pour que le modèle de cellule remplisse la totalité de la GridViewCell.

Il existe peut-être une solution plus simple, mais celle-ci devrait fonctionner.

Nota: la solution nécessite à la fois HorizontalContentAlignment=Stretch dans Window.Resources et Alignement du texte = droite dans le modèle de cellule.

<Window x:Class="WpfApplication6.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</Window.Resources>
<Grid>
    <ListView Name="lstCustomers" ItemsSource="{Binding Path=Collection}">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="ID" Width="40">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Id}" TextAlignment="Right" />
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
                <GridViewColumn Header="First Name" DisplayMemberBinding="{Binding FirstName}" Width="Auto" />
                <GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding LastName}" Width="Auto"/>
            </GridView>
        </ListView.View>
    </ListView>
</Grid>
</Window>

Answer 2

Si la largeur du contenu change, vous devrez utiliser ce bout de code pour mettre à jour chaque colonne :

private void ResizeGridViewColumn(GridViewColumn column)
{
    if (double.IsNaN(column.Width))
    {
        column.Width = column.ActualWidth;
    }

    column.Width = double.NaN;
}

Il faudrait le déclencher à chaque fois que les données de cette colonne sont mises à jour.

Answer 3

Si votre liste est également redimensionnée, vous pouvez utiliser un modèle de comportement pour redimensionner les colonnes afin qu'elles s'adaptent à la largeur totale de la liste. C'est presque la même chose que d'utiliser les définitions de grid.column.

<ListView HorizontalAlignment="Stretch"
          Behaviours:GridViewColumnResize.Enabled="True">
        <ListViewItem></ListViewItem>
        <ListView.View>
            <GridView>
                <GridViewColumn  Header="Column *"
                                   Behaviours:GridViewColumnResize.Width="*" >
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBox HorizontalAlignment="Stretch" Text="Example1" />
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>

Voir le lien suivant pour quelques exemples et un lien vers le code source http://lazycowprojects.tumblr.com/post/7063214400/wpf-c-listview-column-width-auto

Answer 4

J'ai créé la classe suivante et je l'ai utilisée dans toute l'application à chaque fois que cela était nécessaire à la place de GridView :

/// <summary>
/// Represents a view mode that displays data items in columns for a System.Windows.Controls.ListView control with auto sized columns based on the column content     
/// </summary>
public class AutoSizedGridView : GridView
{        
    protected override void PrepareItem(ListViewItem item)
    {
        foreach (GridViewColumn column in Columns)
        {
            // Setting NaN for the column width automatically determines the required
            // width enough to hold the content completely.

            // If the width is NaN, first set it to ActualWidth temporarily.
            if (double.IsNaN(column.Width))
              column.Width = column.ActualWidth;

            // Finally, set the column with to NaN. This raises the property change
            // event and re computes the width.
            column.Width = double.NaN;              
        }            
        base.PrepareItem(item);
    }
}

Answer 5

Comme j'avais un ItemContainerStyle, j'ai dû placer l'HorizontalContentAlignment dans l'ItemContainerStyle.

    <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=FieldDef.DispDetail, Mode=OneWay}" Value="False">
                         <Setter Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                </Style.Triggers>
                <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
    ....