how to change stackpanel width on rotate - windows-phone-7

Question

i'm trying to display a list of tweets in a stackpanel and i want the message to wrap within the available screen width (in both landscape and portrait)
i've put the following stackpanel within a listbox itemtemplates datatemplate
<StackPanel>
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" />
<StackPanel Width="380">
<TextBlock Text="{Binding UserName}" Foreground="#FFC8AB14" FontSize="28"/>
<TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="20" />
<TextBlock Text="{Binding CreatedAt}" FontSize="12" Foreground="#FFC8AB14" />
</StackPanel>
</StackPanel>
when I rotate the device to landscape, the stackpanel contaning the tweets remains at width=380, if I remove the width then the message text block text no longer wraps..
do I need to keep the width on the stackpanel and deliberately change it when the device rotates or is there some way I can have it fit the screen width and also wrap to message text?

Answer 1

Try using a Grid, rather than a StackPanel, for the outer container in your template. That way you can define a column to expand to take all available space.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" />
<StackPanel Grid.Column="1">
<TextBlock Text="{Binding UserName}" Foreground="#FFC8AB14" FontSize="28"/>
<TextBlock Text="{Binding Message}" FontSize="20" />
<TextBlock Text="{Binding CreatedAt}" FontSize="12" Foreground="#FFC8AB14" />
</StackPanel>
</Grid>

Answer 2

you will have to attach to the OrientationChanged event
public MainPage()
{
InitializeComponent();
this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>(MainPage_OrientationChanged);
}
void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
myStackpanel.Width = 100;
}