Comment obtenir un ItemTemplate ListBox pour étirer horizontalement la pleine largeur de la ListBox?


356

Je veux que les ListItems étendent avec leur fond orange la pleine largeur de la Listbox.

Actuellement, ils sont aussi larges que FirstName + LastName.

J'ai défini tous les éléments que je peux: HorizontalAlignment = "Stretch".

Je veux que l'arrière-plan des ListboxItems se développe lorsque l'utilisateur étire la Listbox, donc je ne veux pas mettre de valeurs absolues.

Que dois-je faire pour que la couleur d'arrière-plan des ListBoxItems remplisse la largeur de la ListBox?

<Window x:Class="TestListBoxSelectedItemStyle.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestListBoxSelectedItemStyle"
    Title="Window1" Height="300" Width="300">

    <Window.Resources>
        <local:CustomerViewModel x:Key="TheDataProvider"/>

        <DataTemplate x:Key="CustomerItemTemplate">
            <Border CornerRadius="5" Background="Orange" HorizontalAlignment="Stretch" Padding="5" Margin="3">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Width="Auto">
                    <TextBlock HorizontalAlignment="Stretch">
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}{0} {1}">
                            <Binding Path="FirstName"/>
                            <Binding Path="LastName"/>
                        </MultiBinding>
                    </TextBlock.Text>
                    </TextBlock>
                </StackPanel>
            </Border>
        </DataTemplate>

    </Window.Resources>

    <Grid>
        <ListBox ItemsSource="{Binding Path=GetAllCustomers, Source={StaticResource TheDataProvider}}"
                 ItemTemplate="{StaticResource CustomerItemTemplate}"/>
    </Grid>
</Window>

Réponses:


468

Je suis sûr que c'est un doublon, mais je ne trouve pas une question avec la même réponse.

Ajoutez HorizontalContentAlignment="Stretch"à votre ListBox. Cela devrait faire l'affaire. Faites juste attention à la saisie semi-automatique, car il est si facile à obtenir HorizontalAlignmentpar erreur.


1
@ Agile Jedi, connaissez-vous une solution lorsque vous avez des éléments ListBox personnalisés? Rencontrer moi-même ce problème.
eoldre

11
En fait, cette solution ne fonctionne pas dans Silverlight pour une raison quelconque. La solution de Gabriel en revanche le fait
TimothyP

6
Cela ne fonctionne pas sur les contrôles WinRT ListView. Je l'ai déjà essayé.
uSeRnAmEhAhAhAhAhA

3
Cela fonctionne très bien sur les listes personnalisées (Windows, pas Silverlight), faites juste attention à la saisie automatique lors de l'écriture du xaml. Si vous écrivez "Horiz ..", vous obtiendrez "HorizontalAlignment" et non "HorizontalContentAlignment". Il est assez facile de sélectionner la première suggestion, car les deux utilisent "Stretch".
Jarle Bjørnbeth

1
Les éléments personnalisés fonctionnent pour moi si je règle la largeur de l'élément personnalisé sur auto.
Lensflare

646

J'ai trouvé une autre solution ici , car j'ai rencontré les deux postes ...

C'est de la réponse de Myles:

<ListBox.ItemContainerStyle> 
    <Style TargetType="ListBoxItem"> 
        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter> 
    </Style> 
</ListBox.ItemContainerStyle> 

Cela a fonctionné pour moi.


@CameronMacFarland La raison de Silverlight, au moins dans mon cas, est parce que le personnel d'administration informatique n'a pas pu comprendre comment déployer des applications WPF / Winform à l'aide d'Active Directory, et nous voulions un scénario de déploiement propre qui ne dépendait pas de nous Sneakernetting les mises à jour.
Richard B

@RichardB lol Mon commentaire était plus orienté vers Silverlight, car pourquoi Silverlight doit-il être différent et avoir un modèle cassé par rapport à WPF.
Cameron MacFarland

@CameronMacFarland ah ... pas de soucis. Après avoir créé une application Silverlight et rencontré des difficultés avec le fichier ServiceReferences.ClientConfig, je suis prêt à éviter (comme la peste) de développer à nouveau une autre application Silverlight. C'était une bonne idée, mais tout simplement pas impressionnante.
Richard B

1
Pour que cela fonctionne pour un modèle de données dans un listView: <ListView.ItemContainerStyle> <Style TargetType = "ListViewItem"> <Setter Property = "HorizontalContentAlignment" Value = "Stretch"> </Setter> </Style> </ ListView .ItemContainerStyle>
Christopher Cook

Erreur: erreur de chemin d'accès BindingExpression: propriété «Largeur» introuvable sur Project.CustomElement, Project.WindowsPhone, Version = 1.0.0.0, Culture = neutre, PublicKeyToken = null ». BindingExpression: Path = 'Width' DataItem = Project.CustomElement, Project.WindowsPhone, Version = 1.0.0.0, Culture = neutral, PublicKeyToken = null '; l'élément cible est 'Windows.UI.Xaml.Controls.Grid' (Name = 'null'); la propriété cible est 'Width' (type 'Double')
Black Cid

72

Si vos articles sont plus larges que le ListBox, les autres réponses ici ne seront d'aucune aide: les articles du ItemTemplaterestent plus larges que le ListBox.

Le correctif qui a fonctionné pour moi était de désactiver la barre de défilement horizontale, qui, apparemment, indique également au conteneur de tous ces éléments de rester aussi large que la zone de liste.

Par conséquent, le correctif combiné pour obtenir des éléments ListBox qui sont aussi larges que la zone de liste, qu'ils soient plus petits et nécessitent un étirement, ou plus larges et doivent être encapsulés, est le suivant:

<ListBox HorizontalContentAlignment="Stretch" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled">

( crédits pour l'idée de la barre de défilement )


0

Étant donné que la bordure est utilisée uniquement pour l'apparence visuelle, vous pouvez la placer dans le ControlTemplate de ListBoxItem et y modifier les propriétés. Dans le ItemTemplate, vous pouvez placer uniquement le StackPanel et le TextBlock. De cette façon, le code reste également propre, car dans l'apparence du contrôle sera contrôlé via le ControlTemplate et les données à afficher seront contrôlées via le DataTemplate.


0

La solution pour moi était de définir la propriété HorizontalAlignment="Stretch"à l' ItemsPresenterintérieur de ScrollViewer ..

J'espère que cela aide quelqu'un ...

<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" HorizontalAlignment="Stretch">
                        <ItemsPresenter  Height="252" HorizontalAlignment="Stretch"/>
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

0

J'ai également eu le même problème, comme solution rapide, j'ai utilisé le mélange pour déterminer la quantité de rembourrage ajoutée. Dans mon cas, c'était 12, j'ai donc utilisé une marge négative pour m'en débarrasser. Maintenant, tout peut maintenant être correctement centré

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.