Comment puis-je créer un modèle de données WPF sur toute la largeur de la liste?

J’ai un ListBox DataTemplate dans WPF. Je veux qu’un élément soit serré contre le côté gauche du ListBox et qu’un autre élément soit serré contre le côté droit, mais je ne peux pas comprendre comment faire.

Jusqu’à présent, j’ai une Grid avec trois colonnes, les gauche et droite ont du contenu et le centre est un espace réservé avec sa largeur définie sur “*”. Où est-ce que je me trompe?

Voici le code:

                    

J’ai également dû définir:

 HorizontalContentAlignment="Stretch" 

sur le contenant ListBox .

    

Ok, voici ce que vous avez:

Colonne 0: WrapPanel
Colonne 1: rien
Colonne 2: ListBox

Il semble que vous vouliez WrapPanel sur le bord gauche, ListBox sur le bord droit et un espace pour prendre ce qui rest au milieu.

Le moyen le plus simple de le faire est d’utiliser un DockPanel , pas une Grid .

     

Cela devrait laisser un espace vide entre le WrapPanel et le ListBox .

En étendant la réponse de Taeke, définir ScrollViewer.HorizontalScrollBarVisibility="Hidden" pour un contrôle ListBox permet au contrôle enfant de prendre la largeur du parent et de ne pas afficher la barre de défilement.

    

La Grid devrait par défaut occuper toute la largeur du ListBox car le ItemsPanel par défaut pour cela est un VirtualizingStackPanel . Je suppose que vous n’avez pas changé ListBox.ItemsPanel .

Peut-être que si vous vous êtes débarrassé de la ColumnDefinition du milieu (les autres sont par défaut "*" ), et mettez HorizontalAlignment="Left" sur votre WrapPanel et HorizontalAlignment="Right" sur le ListBox pour les numéros de téléphone. Vous devrez peut-être modifier un peu cette ListBox pour que les numéros de téléphone soient encore plus alignés à droite, par exemple en créant un DataTemplate pour eux.

Si vous souhaitez utiliser une Grid , vous devez modifier votre ColumnDefinition pour qu’elle soit:

       

Si vous n’avez pas besoin d’utiliser une Grid , vous pouvez utiliser un DockPanel :

            

Notez le TextBlock à la fin. Tout contrôle sans "DockPanel.Dock" défini remplira l’espace restant.

La réponse de Taeke fonctionne bien, et selon la réponse de vancutterromney, vous pouvez désactiver la barre de défilement horizontale pour éliminer la disparité de taille ennuyeuse. Cependant, si vous voulez le meilleur des deux mondes – supprimer la barre de défilement lorsque cela n’est pas nécessaire, mais l’activer automatiquement lorsque le ListBox devient trop petit, vous pouvez utiliser le convertisseur suivant:

 ///  /// Value converter that adjusts the value of a double according to min and max limiting values, as well as an offset. These values are set by object configuration, handled in XAML resource definition. ///  [ValueConversion(typeof(double), typeof(double))] public sealed class DoubleLimiterConverter : IValueConverter { ///  /// Minimum value, if set. If not set, there is no minimum limit. ///  public double? Min { get; set; } ///  /// Maximum value, if set. If not set, there is no minimum limit. ///  public double? Max { get; set; } ///  /// Offset value to be applied after the limiting is done. ///  public double Offset { get; set; } public static double _defaultFailureValue = 0; public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if (value == null || !(value is double)) return _defaultFailureValue; double dValue = (double)value; double minimum = Min.HasValue ? Min.Value : double.NegativeInfinity; double maximum = Max.HasValue ? Max.Value : double.PositiveInfinity; double retVal = dValue.LimitToRange(minimum, maximum) + Offset; return retVal; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } 

Ensuite, définissez-le en XAML en fonction des valeurs max / min souhaitées, ainsi que d’un décalage pour gérer cette incompatibilité de taille de 2 pixels, comme mentionné dans les autres réponses:

    

Utilisez ensuite le convertisseur dans la liaison Largeur:

    

La méthode de la réponse de Taeke force une barre de défilement horizontale. Cela peut être résolu en ajoutant un convertisseur pour réduire la largeur de la grid par la largeur du contrôle vertical de la barre de défilement.

 using System; using System.Globalization; using System.Windows; using System.Windows.Data; using System.Windows.Markup; namespace Converters { public class ListBoxItemWidthConverter : MarkupExtension, IValueConverter { private static ListBoxItemWidthConverter _instance; #region IValueConverter Members public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return System.Convert.ToInt32(value) - SystemParameters.VerticalScrollBarWidth; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } #endregion public override object ProvideValue(IServiceProvider serviceProvider) { return _instance ?? (_instance = new ListBoxItemWidthConverter()); } } } 

Ajoutez un espace de noms au nœud racine de votre XAML.

 xmlns:converters="clr-namespace:Converters" 

Et mettre à jour la largeur de la grid pour utiliser le convertisseur.