Friday 14 March 2008

Stretches that don't work for ListBoxItems

I have a listbox where I want my items to stretch across the full listbox.

Unfortunately this doesn't seem to work in Silverlight 2.0 Beta 1, (works perfect in WPF).

Code below:


<ListBox x:Name="myList"
HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Button Content="Hello World"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>


After sometime searching I found the bug is in the control (within the generic.xaml file). The HorizontalAlignment is set to left for the ListBoxItem rather than using the template binding, anyways you can override this style using ListBoxItemContainer Style.

I have provided the code below which fixes the problem. I believe Microsoft will fix this bug in time, so you can remove it once fixed.



<ListBox x:Name="myList"
HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="IsEnabled" Value="true" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Cursor" Value="Arrow" />
<Setter Property="TextAlignment" Value="Left" />
<Setter Property="TextWrapping" Value="NoWrap" />
<!-- Cannot currently parse FontFamily type in XAML so it's being set in code -->
<!-- <Setter Property="FontFamily" Value="Trebuchet MS" /> -->
<Setter Property="FontSize" Value="12" />
<Setter Property="Background" Value="White" />
<Setter Property="Padding" Value="2,0,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid x:Name="RootElement" Background="{TemplateBinding Background}">
<Grid.Resources>
<Storyboard x:Key="Normal State" />
<!-- <Storyboard x:Key="Unfocused Selected State"/> -->
<Storyboard x:Key="Normal Selected State">
<ColorAnimation Storyboard.TargetName="fillStop0" Storyboard.TargetProperty="Color" Duration="0" To="#FFD9EFFF"/>
<ColorAnimation Storyboard.TargetName="fillStop1" Storyboard.TargetProperty="Color" Duration="0" To="#FFBDD2E6"/>
<ColorAnimation Storyboard.TargetName="fillStop2" Storyboard.TargetProperty="Color" Duration="0" To="#FFA1B6CD"/>

<ColorAnimation Storyboard.TargetName="strokeStop0" Storyboard.TargetProperty="Color" Duration="0" To="#FF77B9EB"/>
<ColorAnimation Storyboard.TargetName="strokeStop1" Storyboard.TargetProperty="Color" Duration="0" To="#FF4887CD"/>
</Storyboard>
<Storyboard x:Key="MouseOver State">
<ColorAnimation Storyboard.TargetName="fillStop0" Storyboard.TargetProperty="Color" Duration="0" To="#FFF9FAFA"/>
<ColorAnimation Storyboard.TargetName="fillStop1" Storyboard.TargetProperty="Color" Duration="0" To="#FFE6EFF7"/>
<ColorAnimation Storyboard.TargetName="fillStop2" Storyboard.TargetProperty="Color" Duration="0" To="#FFD3E4F5"/>

<ColorAnimation Storyboard.TargetName="strokeStop0" Storyboard.TargetProperty="Color" Duration="0" To="#00000000"/>
<ColorAnimation Storyboard.TargetName="strokeStop1" Storyboard.TargetProperty="Color" Duration="0" To="#00000000"/>
</Storyboard>
<!-- <Storyboard x:Key="MouseOver Unfocused Selected State"/> -->
<Storyboard x:Key="MouseOver Selected State">
<ColorAnimation Storyboard.TargetName="fillStop0" Storyboard.TargetProperty="Color" Duration="0" To="#FFF9FAFA"/>
<ColorAnimation Storyboard.TargetName="fillStop1" Storyboard.TargetProperty="Color" Duration="0" To="#FFE6EFF7"/>
<ColorAnimation Storyboard.TargetName="fillStop2" Storyboard.TargetProperty="Color" Duration="0" To="#FFD3E4F5"/>

<ColorAnimation Storyboard.TargetName="strokeStop0" Storyboard.TargetProperty="Color" Duration="0" To="#FF77B9EB"/>
<ColorAnimation Storyboard.TargetName="strokeStop1" Storyboard.TargetProperty="Color" Duration="0" To="#FF4887CD"/>
</Storyboard>
</Grid.Resources>

<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<Rectangle IsHitTestVisible="False">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.316111,0.0165521" EndPoint="0.316111,0.724833">
<GradientStop Name="fillStop0" Color="#00000000" Offset="0"/>
<GradientStop Name="fillStop1" Color="#00000000" Offset="0.682203"/>
<GradientStop Name="fillStop2" Color="#00000000" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0.318122,0.0360108" EndPoint="0.318122,0.715784">
<GradientStop Name="strokeStop0" Color="#00000000" Offset="0"/>
<GradientStop Name="strokeStop1" Color="#00000000" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>

<Rectangle x:Name="FocusVisualElement" Stroke="Black" StrokeDashArray="1,2" Visibility="Collapsed" IsHitTestVisible="False"/>
<ContentPresenter
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontStretch="{TemplateBinding FontStretch}"
FontStyle="{TemplateBinding FontStyle}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
TextAlignment="{TemplateBinding TextAlignment}"
TextDecorations="{TemplateBinding TextDecorations}"
TextWrapping="{TemplateBinding TextWrapping}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
<Line Stretch="Fill" Grid.Row="1" X1="0" X2="1" Y1="0" Y2="0" StrokeThickness="1" Stroke="#FFA4A4A4" IsHitTestVisible="False"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Button Content="Hello World"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

No comments: