Diesesmal hat mein Silverlight Schulungsteilnehmer (Stephan) mir eine cooles Silverlight Sample gezeigt. Während der Schulung war wieder mal die Listbox ein Thema (darüber könnte ich schon ein Buch schreiben. Es sollte eine Liste mit Namen angezeigt werden und dabei das Itemtemplate verändert werden. Das geht eigentlich ganz einfach entweder mit Expression Blend oder direkt im XAML Code ala
<ListBox.ItemTemplate>
<DataTemplate>
<Border Margin="5" BorderBrush="#FF340CF9" CornerRadius="5" Height="32">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="{Binding}" Foreground="#FFF9F5F5" FontWeight="Bold" Margin="4,2"/>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
Das ganze sieht allerdings mehr nach Balkengrafik aus. Der Wunsch ist das alle Listboxitems gleich breit sein sollen. Eigentlich ganz einfach. Die Width der Broder gesetzt und… Aber es soll genau so breit sein wie die Listbox.
Das geht indem man das HorizontalContentAlignment auf Stretch setzt. Da kommt man leider gar nicht so leicht ran. Entweder man nimmt Expression Blend und zerlegt die Listbox in sein Template. Contextmenü – Edit Template-Edit a copy.- und erhält 300 Zeilen XAML Code
Oder man nimmt die relevante Setter Stelle einfach raus und setzt sie sozusagen auf dem kurzen Dienstweg im ItemContainerstyle der Silverlight Listbox
<ListBox Margin="96,26,129,54" x:Name="listbox1" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" >
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
Perfektes Ergebnis im Browser
