silverlight - listbox template wpf

Silverlight 3: ListBox DataTemplate HorizontalAlignment

Question

Tengo un ListBox con su ItemTemplate vinculado a un DataTemplate. Mi problema es que no puedo hacer que los elementos en la plantilla se extiendan a todo el ancho de ListBox.

<ListBox x:Name="listPeople" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Margin="0,0,0,0" Background="{x:Null}" SelectionMode="Extended" Grid.Row="1"
ItemTemplate="{StaticResource PersonViewModel.BrowserDataTemplate}"
ItemsSource="{Binding Mode=OneWay, Path=SearchResults}" >
</ListBox>
<DataTemplate x:Key="PersonViewModel.BrowserDataTemplate">
<ListBoxItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,5,5,5">
<Border Opacity=".1" x:Name="itemBorder" Background="#FF000000"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
CornerRadius="5,5,5,5" MinWidth="100" Height="50"/>
</Grid>
</ListBoxItem>
</DataTemplate>

Como puede ver, he agregado un borde dentro de la cuadrícula para indicar el ancho de la plantilla. Mi objetivo es ver que este borde se expanda al ancho completo del cuadro de lista. Actualmente, su ancho está determinado por su contenido o MinWidth, que es lo único que lo mantiene visible en este momento.

Answer 1

Al crear plantillas de datos para ListBox, no debe incluir <ListBoxItem> . El contenido de DataTemplate se colocará dentro de un contenedor generado. Puede controlar cómo se construye ese contenedor utilizando ItemContainerStyle.

El estilo de control predeterminado para ListBoxItem se utiliza para definir ItemContainerStyle de forma predeterminada. Este estilo establece la propiedad ListBoxItem.HorizontalContentAlignment en ''Izquierda''. Observe cómo ContentPresenter vincula su HorizontalAlignment a esta propiedad.

Debe sobrescribir el estilo del contenedor ListBoxItem que se genera cuando se vincula a su ListBox. Esto puede hacerse configurando ItemContainerStyle. Establezca la propiedad HorizontalContentAlignment para que sea "Stretch".

A continuación se muestra el estilo de ListBoxItem predeterminado. Incluido para referencia.

<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="Padding" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<!-- VSM excluded for readability -->
<Rectangle x:Name="fillColor" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="1" RadiusY="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 2

Dos cosas que noté aquí, porque tuve el mismo problema y no pude resolverlo de la manera en que lo intentas.

Primero, no necesita colocar explícitamente un ListBoxItem en su DataTemplate. Esto se crea para usted automáticamente, por lo que realmente tiene su ListBoxItem dentro del que se creó para usted. Lo comprobé en Snoop para confirmarlo.

Segundo, y no sé exactamente por qué, pero tampoco fui capaz de obtener el comportamiento de estiramiento fuera de los atributos de alineación. Lo cambié para usar el enlace RelativeSource en el atributo Ancho a la propiedad ActualWidth del ListBoxItem que contiene. Esto funcionó para mí.

Width="{Binding RelativeSource={RelativeSource
AncestorType={x:Type ListBoxItem}}, Path=ActualWidth}"

Si necesita establecer propiedades de estilo en ListBoxItem que se creó implícitamente para usted, use un elemento Style dentro del elemento ListBox.ItemContainerStyle.

Espero que esto ayude...

Answer 3

Estoy trabajando con Silverlight 5 con VS 2012. Tengo el mismo problema. Tengo un cuadro de lista horizontal con mis propios objetos personalizados como ItemsSource. Quiero que se expandan los elementos del cuadro de lista. Pero no se están expandiendo. No quiero dar ningún ancho codificado duro para cada elemento del cuadro de lista. Intenté todas las respuestas aquí, pero nada funciona. Acabo de darles ItemsSource = {Binding Persons} DisplayMemberPath = "Nombre". Eso es todo

Answer 4

Mi ListBoxItem contenía un CheckBox y las soluciones anteriores no me funcionaron (muy probablemente debido a la naturaleza de un CheckBox, no a esas soluciones) Pude forzar esta funcionalidad al no enlazar a la propiedad "Contenido" de la casilla de verificación, pero definiendo explícitamente el XAML en línea:

<CheckBox HorizontalAlignment="Stretch" IsChecked="{Binding Path=IsSelected, Mode=TwoWay}">
<TextBlock
MinWidth="130"
Margin="0,-2,0,0"
HorizontalAlignment="Stretch"
Text="{Binding Path=DisplayText}" />
</CheckBox>

El margen es necesario porque el texto del cuadro de texto no se alineó con la marca de verificación de CheckBox. El MinWidth también fue necesario.

Answer 5

Pasé una hora tratando de resolver este. Muy muy frustrante. No tiene que anular todo el estilo predeterminado para ListBoxItem. No pude hacer que esto funcione. Al final, resolví el problema simplemente anulando solo la propiedad HorizontalContentAlignment en mi sección ListBox.ItemContainerStyle , por ejemplo:

 <ListBox x:Name="ClassList" ItemsSource="{Binding LineClasses}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
SelectionMode="Extended"
ScrollViewer.HorizontalScrollBarVisibility="Hidden" HorizontalContentAlignment="Stretch"
HorizontalAlignment="Stretch" Loaded="ClassList_Loaded"
VerticalAlignment="Stretch" Grid.Row="0">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<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 DisplayClassNm}"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>

Esto funcionó como un regalo para mí.

Myles

Answer 6

Here hay un ejemplo del uso de las plantillas de control y las plantillas de datos para el control de cuadro de lista. Consulte el marcado XAML que muestra el borde de los elementos de la lista.