Silverlight: how to modify the width of ListBox Items in response to user input?
- by sympatric greg
I have a simple Silverlight 3 UserControl whose width increases or decreases based on user input.
The controls become more wide or more narrow as desired, except for the ListBox items. The ListBox Items grow horizontally to fit their content regardless of HorizontalContentAlignment being set to 'Stretch'.
Should I be able to set a property on ListBox.ItemContainerStyle to tell it to widen/narrow with the parent ListBox? There needs to be no horizontal scrolling within this Listbox.
Or is there a way to specify the ItemTemplate's StackPanel width that can be modified at runtime? I have bound this to a StaticResource, but do not understand whether I should be able to change the resource value. Can I create and bind to a DependencyProperty of the UserControl itself? I have not determined the syntax of this within the xaml.
code:
<UserControl x:Class="TheAssembly.GraphicViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:userControls="clr-namespace:TheAssembly"
xmlns:core="clr-namespace:System;assembly=mscorlib">
<UserControl.Resources>
<userControls:DictionaryAttributeConverter x:Name="MyDictionaryAttributeConverter" />
<core:Double x:Key="ListItemWidth">155</core:Double>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Width="175" >
<Border Style="{StaticResource DraggableWindowBorder}">
<StackPanel x:Name="RootStackPanel" Orientation="Vertical" HorizontalAlignment="Stretch">
<Border Background="Black" HorizontalAlignment="Stretch" Margin="0">
<TextBlock x:Name="Header" Foreground="White" FontSize="14" TextWrapping="Wrap" Margin="2,0,2,0"
Height="25" HorizontalAlignment="Left"
Text="{Binding HeaderText}"/>
</Border>
<TextBlock x:Name="Title" Style="{StaticResource GraphicViewerDetail}" FontSize="12" FontWeight="Medium" TextWrapping="Wrap"
Text="{Binding Title}" Margin="3,0,0,0" HorizontalAlignment="Left"/>
<ListBox x:Name="AttributeListBox" ItemsSource="{Binding Attributes}" BorderBrush="Red" HorizontalContentAlignment="Stretch"
Foreground="AntiqueWhite" Background="Transparent" IsEnabled="False" HorizontalAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Margin" Value="0,-2,0,0"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="ListBoxItemStackPanel" HorizontalAlignment="Stretch" Orientation="Vertical" >
<TextBlock FontSize="10" Text="{Binding Key}" Foreground="White" FontWeight="Bold" HorizontalAlignment="Stretch"
Margin="2,0,0,0" TextWrapping="Wrap"/>
<TextBlock FontSize="10" Text="{Binding Value}" Foreground="White" Margin="6,-2,0,0" TextWrapping="Wrap"
HorizontalAlignment="Stretch" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Border>
</Grid>
