web-dev-qa-db-fra.com

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

Je veux avoir les ListItems pour étendre avec leur fond orange toute la largeur de la Listbox.

Actuellement, ils sont aussi larges que le prénom et le 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 d'éviter de définir des valeurs absolues.

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>
xamllistboxitem
341
Edward Tanguay

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 ListBox. Cela devrait faire l'affaire. Faites attention avec l'auto-complétion, car il est si facile d'obtenir HorizontalAlignment par erreur.

429
Matt Hamilton

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

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.

636
Gabriel Mongeon

Si vos éléments sont plus larges que la ListBox, les autres réponses ne vous aideront pas: les éléments de la ItemTemplate restent plus large 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écessitent un étirement, ou plus larges et qu’ils nécessitent un habillage, est le suivant:

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

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

67
Roman Starkov

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, il était 12, alors j'ai utilisé une marge négative pour m'en débarrasser. Maintenant tout peut être correctement centré

0
Michael Ato Hutchful

Étant donné que la bordure est utilisée uniquement à des fins visuelles, vous pouvez l'insérer 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'apparition du contrôle, celui-ci sera contrôlé via le ControlTemplate et les données à afficher seront contrôlées via le DataTemplate.

0
Sangeetha

Le correctif pour moi était de définir la propriété HorizontalAlignment="Stretch" sur ItemsPresenter à l'intérieur de ScrollViewer ..

J'espère que ça 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
Ivica Marinčić