how to change stackpanel width on rotate

0
votes

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?

2
windows-phone-7

2 Answers

2
votes

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>
0
votes

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;
    }