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


356

Quiero que ListItems extienda con su fondo naranja todo el ancho del Listbox.

Actualmente solo son tan anchos como FirstName + LastName.

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

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

¿Qué tengo que hacer para que el color de fondo de ListBoxItems llene 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>

Respuestas:


468

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

Añadir HorizontalContentAlignment="Stretch"a su ListBox. Eso debería hacer el truco. Solo tenga cuidado con el autocompletado porque es muy fácil de obtener HorizontalAlignmentpor error.


1
@ Agile Jedi, ¿conoce una solución cuando TIENE elementos ListBox personalizados? Me encuentro con ese problema yo mismo.
Eoldre

11
En realidad, esta solución no funciona en Silverlight por alguna razón. La solución de Gabriel por el contrario lo hace
TimothyP

66
Esto no funciona en los controles WinRT ListView. Ya lo he intentado
uSeRnAmEhAhAhAhAhA

3
Esto funciona bien en listas personalizadas (Windows, no Silverlight), solo tenga cuidado con la finalización automática al escribir el xaml. Si escribe "Horiz .." obtendrá "HorizontalAlignment" no "HorizontalContentAlignment". Es bastante fácil seleccionar la primera sugerencia, ya que ambas usan "Estirar".
Jarle Bjørnbeth

1
Los elementos personalizados funcionan para mí si configuro el ancho del elemento personalizado en automático.
Lensflare

646

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í.


@CameronMacFarland La razón de Silverlight, al menos en mi caso, es porque el personal de administración de TI no pudo descubrir cómo implementar aplicaciones WPF / Winform usando Active Directory, y queríamos un escenario de implementación limpio que no dependiera de nosotros. Las actualizaciones.
Richard B

@RichardB lol Mi comentario estaba más dirigido a Silverlight, ya que por qué Silverlight debe ser diferente y tener una plantilla rota en comparación con WPF.
Cameron MacFarland

@CameronMacFarland ah ... no te preocupes. Después de hacer una aplicación Silverlight y de luchar con el archivo ServiceReferences.ClientConfig, estoy seguro de que evitaré (como la peste) volver a desarrollar otra aplicación Silverlight nuevamente. Fue una idea genial, pero no impresionante.
Richard B

1
Para que esto funcione para una plantilla de datos dentro de listView: <ListView.ItemContainerStyle> <Style TargetType = "ListViewItem"> <Setter Property = "HorizontalContentAlignment" Value = "Stretch"> </Setter> </Style> </ ListView .ItemContainerStyle>
Christopher Cook

Error: error de ruta de BindingExpression: propiedad 'Width' no encontrada en Project.CustomElement, Project.WindowsPhone, Version = 1.0.0.0, Culture = neutral, PublicKeyToken = null '. BindingExpression: Path = 'Width' DataItem = Project.CustomElement, Project.WindowsPhone, Version = 1.0.0.0, Culture = neutral, PublicKeyToken = null '; el elemento de destino es 'Windows.UI.Xaml.Controls.Grid' (Nombre = 'nulo'); la propiedad de destino es 'Ancho' (tipo 'Doble')
Black Cid

72

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

La solución que funcionó para mí fue deshabilitar la barra de desplazamiento horizontal, que, al parecer, 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 )


0

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.


0

La corrección para mí era propiedad conjunto HorizontalAlignment="Stretch"en ItemsPresenterel interior ScrollViewer ..

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>

0

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.