Craig Palenshus' Blog

Wow, this was difficult to figure out. After beating my head against the desk several times over the course of nearly 2 hours, I finally stumbled upon it.

Here are the issues. The first problem was I couldn’t get the contents in it to stretch. The second problem was the spacing between the ListBoxItems was more than I wanted.

For the ListBoxItem Stretch problem, I had a grid inside the ListBoxItems that was set to stretch with two columns where the left column was text aligned left and the right was text aligned right.

I set the HorizontalAligment and HorizontalContentAlignement of every property I could find in my ListBox and ListBoxItem to Stretch, but nothing seemed to fix it. I even overrode the HorizontalAlignement property of the ContentPresenter in the ListBoxItemTemplate and set it to stretch. Even this wouldn’t make it stretch!

I finally figured out that there are two ways to assign a style to your ListBoxItems. You can either assign it to each individual ListBoxItem as shown here:

METHOD 1 -

Or you can assign it in the ListBox as the ItemContainerStyle as shown here:

METHOD 2 -

The first method WILL NOT WORK. No matter what you do, it will not let the ListBoxItems stretch when they are inside a DataTemplate.

The second method worked perfectly. And it fixed the spacing issue I was running into with the extra space between each ListBoxItem, too.

Apparently, when you put ListBoxItems inside a DataTemplate, an extra container is created around each ListBoxItem that has default settings set that are hidden from you. The problem is compounded because, when using Blend, you can’t actually see the contents of a DataTemplate in the Blend WYSIWYG interface. So you design it without the DataTemplate and everything looks great. Then you throw the items into it and run it to see the results, and it is wrong. Very maddening!

Also, you can’t assign the same style to both the ListBox’s ItemContainerStyle and to the ListBoxItem. Again, if you do without a DataTemplate, it doesn’t matter, but as soon as you add the DataTemplate, the styles are doubled up and so you get a container inside a container both with the styles applied. In this case, it doesn’t look terrible, but isn’t what I was trying to achieve.

In case it is helpful, here is what my final XAML looked like:

  1: <ListBox Style="{StaticResource ListBoxStyle}" x:Name="ListBox1" 
  2: 		 ItemContainerStyle="{StaticResource ListBoxItemStyleWhite}" Loaded="ListBox1_Loaded">
  3:                     <ItemsControl.ItemTemplate>
  4:                         <DataTemplate>
  5:                             <ListBoxItem HorizontalContentAlignment="Stretch" Loaded="ListBoxItem_Loaded">
  6: 			<Grid Margin="0" d:LayoutOverrides="Height" UseLayoutRounding="True">
  7:                                 <Grid.ColumnDefinitions>
  8:                                     <ColumnDefinition Width="0.626*"/>
  9:                                     <ColumnDefinition Width="0.374*"/>
 10:                                 </Grid.ColumnDefinitions>
 11:                                 <TextBlock HorizontalAlignment="Left"
 12:                                            TextWrapping="Wrap" 
 13: 					   Text="{Binding Label}">
 14:                                 </TextBlock>
 15:                                 <TextBlock HorizontalAlignment="Right" 
 16:                                            TextWrapping="Wrap"
 17:                                            Grid.Column="1" 
 18: 					   Text="{Binding Value}" d:LayoutOverrides="Width"/>
 19:                             </Grid>
 20: 			</ListBoxItem>
 21:                         </DataTemplate>
 22:                     </ItemsControl.ItemTemplate>
 23: </ListBox>					
 24: 

And here is my ListBoxItemStyleWhite style that has all the settings correct to get the item to stretch when the style is applied only to the ItemContainerStyle (I’ve removed all the VSM stuff for readability):

  1: 	<Style x:Key="ListBoxItemStyleWhite" TargetType="ListBoxItem">
  2: 		<Setter Property="Padding" Value="2"/>
  3: 		<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
  4: 		<Setter Property="VerticalContentAlignment" Value="Center"/>
  5: 		<Setter Property="BorderThickness" Value="0"/>
  6: 		<Setter Property="TabNavigation" Value="Local"/>
  7:         <Setter Property="FontSize" Value="13.333"/>
  8:         <Setter Property="Height" Value="25"/>
  9:         <Setter Property="Foreground" Value="White"/>
 10:         <Setter Property="MinHeight" Value="26"/>
 11:         <Setter Property="Margin" Value="1"/>
 12:         <Setter Property="FontFamily" Value="Fonts/Fonts.zip#Tahoma"/>
 13:         <Setter Property="Template">
 14: 			<Setter.Value>
 15: 				<ControlTemplate TargetType="ListBoxItem">
 16: 				<Border CornerRadius="5">
 17: 					<Grid Background="{TemplateBinding Background}">
 18: 						<Rectangle x:Name="fillColor" RadiusX="5" RadiusY="5" IsHitTestVisible="False" Opacity="1">
 19: 							<Rectangle.Fill>
 20: 								<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
 21: 									<GradientStop Color="#38FFFFFF" Offset="0"/>
 22: 									<GradientStop Color="#38808080" Offset="1"/>
 23: 									<GradientStop Color="#385B5B5B" Offset="0.444"/>
 24: 								</LinearGradientBrush>
 25: 							</Rectangle.Fill>
 26: 						</Rectangle>
 27: 						<Rectangle x:Name="fillColor2" RadiusX="5" RadiusY="5" IsHitTestVisible="False" Opacity="1"/>
 28: 						<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
 29: 						<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="1" RadiusY="1" Visibility="Collapsed"/>
 30: 					</Grid>
 31: 				</Border>
 32: 				</ControlTemplate>
 33: 			</Setter.Value>
 34: 		</Setter>
 35: 

Hopefully this saves someone else a couple hours of beating their head on the desk and the headache that follows!