Como obter um ListBox ItemTemplate ao estiramento na horizontal a toda a largura da caixa de listagem?

Question

Eu quero ter os ListItems para estender com a sua laranja, fundo a toda a largura da caixa de listagem.

Atualmente eles são apenas tão grande como o FirstName + LastName.

Eu configurei todos os elementos que puder para:. HorizontalAlignment = "Stretch"

Eu quero o fundo das ListBoxItems para expandir como o usuário se estende a caixa de listagem para que eu não quero colocar em valores absolutos.

O que eu tenho que fazer para que a cor das ListBoxItems fundo preencher a largura da caixa de listagem?

<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

Eu tenho certeza que este é um duplicado, mas não consigo encontrar uma pergunta com a mesma resposta.

Adicionar HorizontalContentAlignment="Stretch" à sua listagem. Isso deve fazer o truque. Basta ter cuidado com auto-complete, porque é tão fácil de obter HorizontalAlignment por engano.

Answer 2

outra solução aqui , desde que eu corri para ambos post ...

Esta é a partir da resposta Myles:

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

Isso funcionou para mim.

Answer 3

Se os itens são mais amplo que o ListBox, as outras respostas aqui não vai ajudar:. Itens da ItemTemplate permanecem mais largo que o ListBox

A correção que funcionou para mim foi desativar a barra de rolagem horizontal, que, aparentemente, também informa o recipiente de todos esses itens para permanecer apenas tão grande como a caixa de lista.

Assim, a correção combinado para obter itens de caixa de listagem que são tão ampla como a caixa de lista, se eles são menores e necessidade de alongamento, ou mais amplo e necessidade de embrulho, é a seguinte:

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

créditos para a barra de rolagem ideia )

Answer 4

Uma vez que a fronteira é usado apenas para a aparência visual, você pode colocá-lo em ControlTemplate do ListBoxItem e modificar as propriedades lá. No ItemTemplate, você pode colocar apenas o StackPanel eo TextBlock. Desta maneira, o código também permanece limpa, tal como no aspecto do controlo irá ser controlado por meio do ControlTemplate e os dados a serem exibidos serão controlados através do DataTemplate.

Answer 5

A correção para mim foi conjunto HorizontalAlignment="Stretch" propriedade em ItemsPresenter dentro ScrollViewer ..

Espero que isso ajude alguém ...

<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

Eu também tive o mesmo problema, como uma solução rápida, eu usei mistura para determinar quanto cobertura estava sendo adicionado. No meu caso, tinha 12 anos, então eu usei uma margem negativa para se livrar dele. Agora tudo pode agora ser centrado corretamente