Comment obtenir un ItemBemplate ListBox pour étendre horizontalement toute la largeur du ListBox?

Question

Je souhaite que les éléments de liste étendent, avec leur arrière-plan orange, toute la largeur de la zone de liste.

Actuellement, leur largeur est égale à celle du prénom et du nom.

J'ai défini tous les éléments possibles à: HorizontalAlignment = " Stretch ".

Je souhaite que l’arrière-plan de ListboxItems s’agrandisse à mesure que l’utilisateur étire la Listbox afin que je ne mette pas de valeur absolue.

Que dois-je faire pour que la couleur d'arrière-plan du ListBoxItems remplisse la largeur du 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>

Answer 1

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

Ajoutez HorizontalContentAlignment = & Stretch " à votre contrôle ListBox. Cela devrait faire l'affaire. Soyez prudent avec la saisie automatique, car il est très facile d’obtenir HorizontalAlignment par erreur.

Answer 2

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

Ceci est tiré 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.

Answer 3

Si vos éléments sont plus larges que le ListBox , les autres réponses ne vous aideront pas: les éléments du ItemTemplate resteront plus larges que le ListBox .

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

Par conséquent, le correctif combiné permettant d'obtenir des éléments ListBox aussi larges que la zone de liste, qu'ils soient plus petits et nécessitant un étirement, ou plus larges et nécessitant un habillage, est le suivant:

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

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

Answer 4

Etant donné que la bordure sert uniquement à l'apparence visuelle, vous pouvez la placer dans le ControlTemplate du ListBoxItem et y modifier les propriétés. Dans ItemTemplate, vous pouvez uniquement placer StackPanel et TextBlock. De cette manière, le code reste également propre, car lors de l’apparence du contrôle, celui-ci sera contrôlé via le ControlTemplate et les données à afficher seront contrôlées via le DataTemplate.

Answer 5

Pour moi, le correctif consistait à définir la propriété HorizontalAlignment = "Stretch" sur ItemsPresenter dans ScrollViewe r ..

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>

Answer 6

J'ai également eu le même problème. En guise de solution de contournement rapide, j'ai utilisé blend pour déterminer la quantité de remplissage ajoutée. Dans mon cas, c’était 12, alors j’ai utilisé une marge négative pour m'en débarrasser. Maintenant tout peut être correctement centré