Elementos de ListBox de WP7 para llenar el ancho de ListBox

Estoy tratando de que los elementos de un ListBox abarquen todo el ancho del ListBox. Encontré varias publicaciones relacionadas con HorizontalContentAlignment = "Stretch" pero no he podido hacer que funcione en mi aplicación WP7. Aquí está mi ListBox:

<ListBox Margin="8" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Collection}" >
    <ListBox.ItemTemplate>
        <DataTemplate> 
            <Border BorderBrush="Black" CornerRadius="3" Background="#FFE88D34" 
                BorderThickness="1" HorizontalAlignment="Stretch" > 
                <Grid Background="Transparent" HorizontalAlignment="Stretch" > 
                    <Grid.ColumnDefinitions> 
                        <ColumnDefinition Width="*" /> 
                    </Grid.ColumnDefinitions> 
                    <TextBlock  
                        Grid.Column="0" HorizontalAlignment="Stretch" 
                        Margin="2"                                    
                        FontSize="10" 
                        Text="{Binding Property1}"/> 
                </Grid> 
             </Border> 
        </DataTemplate> 
    </ListBox.ItemTemplate>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

Estoy tratando de que el borde naranja abarque todo el ancho del cuadro de lista para que todos los elementos de la lista tengan el mismo tamaño y no solo el tamaño del texto en TextBlock.

preguntado el 24 de agosto de 10 a las 19:08

4 Respuestas

Utilice el siguiente recurso estático como ItemContainerStyle de Listbox:

ItemContainerStyle="{StaticResource ListboxStretchStyle}" 

<Application.Resources>
    <Style TargetType="ListBoxItem" x:Key="ListboxStretchStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

contestado el 18 de mayo de 14 a las 18:05

Esto es lo que uso para eso:

                <ListBox Height="430" Margin="50,70,50,110" Name="myListBox" >

                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <ContentPresenter
                                            HorizontalAlignment="Stretch" 
                                            VerticalAlignment="Stretch" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>

                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border Background="{StaticResource PhoneAccentBrush}" >
                                <TextBlock
                                    Text="{Binding Text}"
                                    FontSize="30"
                                    Foreground="{StaticResource PhoneForegroundBrush}" />
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>

                </ListBox>

más o menos encontrado aquí: http://timdams.wordpress.com/2011/11/30/creating-a-wp7-app-listbox-items-of-the-same-width/

contestado el 08 de mayo de 12 a las 19:05

Creo que esto es un error en la versión beta, porque HorizontalContentAlignment debería serlo.

como solución alternativa, es posible que deba utilizar un valor de ancho fijo.

Respondido 25 ago 10, 00:08

Parece que John Gardner está en el punto de que esto es un pequeño defecto en la Beta. Funciona bien en Silverlight "simple y antiguo", pero produce áreas extrañamente centradas en el teléfono. Sin embargo, es bastante fácil trabajar más allá.

  • Deshágase de / comente la entrada ListBox.ItemContainerStyle en su cuadro de lista, arriba.

  • En Blend, seleccione su ListBox en el panel Objetos y línea de tiempo, haga clic con el botón derecho y seleccione Editar plantillas adicionales / Editar contenedor de elementos generados (ItemContainerStyle) / Editar una copia ... Elija un nombre / clave y ubicación para el nuevo recurso de estilo.

  • Busque el control ContentContainer y establezca su alineación de contenido horizontal para enlazar con la alineación de contenido horizontal establecida en el elemento que consume esta plantilla, (HorizontalContentAlignment = "{TemplateBinding HorizontalContentAlignment}") de la siguiente manera:

    <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    

Una vez que le haya dicho al ContentControl cómo debe alinear su (ejem) contenido, los resultados deben ser los que esperaba.

Respondido 26 ago 10, 05:08

¡Gracias por la sugerencia! Creo que seguí tus instrucciones correctamente, pero todavía no funciona. ¿Puedes publicar el XAML completo para ListBox para que pueda compararlo con lo que tengo? - jeff r

Lo siento, me perdí el comentario hasta ahora. No olvide establecer también HorizontalContentAlignment en Estirar en el estilo del elemento del cuadro de lista. Todo lo que hace mi cambio es decirle a ControlTemplate que realmente preste atención a la configuración, que de lo contrario se ignorará por completo. - Juan Garland

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.