¿Cómo hacer que una ItemTemplate ListBox se estire horizontalmente todo el ancho de ListBox?

Question

Quiero que los elementos de lista se extiendan con su fondo naranja todo el ancho del cuadro de lista.

Actualmente solo son tan anchos como FirstName + LastName.

He configurado todos los elementos que puedo para: HorizontalAlignment = " Stretch " ;.

Deseo que el fondo de ListboxItems se expanda a medida que el usuario estira el Listbox, por lo que no quiero poner valores absolutos.

¿Qué debo hacer para que el color de fondo de ListBoxItems ocupe el ancho de 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

Estoy seguro de que es un duplicado, pero no puedo encontrar una pregunta con la misma respuesta.

Agregue HorizontalContentAlignment = " Stretch " a su ListBox. Eso debería hacer el truco. Solo tenga cuidado con el autocompletado porque es muy fácil obtener HorizontalAlignment por error.

Answer 2

Encontré otra solución aquí , ya que me encontré con ambas publicaciones ...

Esto es de la respuesta de Myles:

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

Esto funcionó para mí.

Answer 3

Si sus elementos son más anchos que el ListBox , las otras respuestas aquí no ayudarán: los elementos en ItemTemplate permanecen más anchos que el ListBox .

La solución que funcionó para mí fue deshabilitar la barra de desplazamiento horizontal, que, aparentemente, también le dice al contenedor de todos esos elementos que permanezca tan ancho como el cuadro de lista.

Por lo tanto, la solución combinada para obtener elementos ListBox que son tan anchos como el cuadro de lista, ya sea que sean más pequeños y necesiten estirarse, o más anchos y necesiten envoltura, es la siguiente:

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

( créditos para la idea de la barra de desplazamiento )

Answer 4

Dado que el borde se usa solo para la apariencia visual, puede colocarlo en ControlTemplate de ListBoxItem y modificar las propiedades allí. En ItemTemplate, puede colocar solo StackPanel y TextBlock. De esta manera, el código también permanece limpio, ya que en la apariencia del control se controlará a través de ControlTemplate y los datos que se mostrarán se controlarán a través de DataTemplate.

Answer 5

La solución para mí fue establecer la propiedad HorizontalAlignment = " Stretch " en ItemsPresenter dentro de ScrollViewe r ..

Espero que esto ayude a alguien ...

<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

También tuve el mismo problema, como una solución rápida, usé blend para determinar cuánto relleno se estaba agregando. En mi caso eran 12, así que usé un margen negativo para deshacerme de él. Ahora todo se puede centrar correctamente