Windows Phone 7 programmatically trigger an event SizeChanged textWrapping

RoadhouseBlues
RoadhouseBlues used Ask the Experts™
on
Hi,

WP7, XAML, TriggerEvent, TextBlock, TextWrapping

The main issue I'm having is getting text to wrap in a XAML TextBlock. And get the text to wrap appropriately regardless of the orientation.
When changing the orientation (portrait to landscape or vise versa) I need to get the text to wrap appropriately. I'm very new to XAML and have I've gone round and round with the XAML (Grid, StackPanel, ScrollViewer) without success.  

Programmatically, its possible to detect when the orientation changes and then to obtain the ActualWidth of the ListBox the TextBlock is in. However, from that point it appears I'll need to trigger the SizeChanged(?) event for the TextBlock and I'm unsure how to do that. This SizeChanged event works fine then the TextBlock is initially loaded, but on an orientation change, is not triggered.

I'm trying to figure out how to apply the ActualWidth (a double) to the text in the TextBlock and get it's text to wrap appropriately depending on the orientation. Here' the code for the event on the TextBlock itself "SizeChanged".  

 
  Here's the code for the event.

       private void TextBlock_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            double szeWidth = 0;
                       
            szeWidth = listBox1.ActualWidth ;
            var textBlock = sender as TextBlock;
            if (textBlock == null) return;

            // set the size of the textblock to the available width and force the text to wrap
            textBlock.Width = szeWidth;  
        }



What is the syntax for triggering the SizeChanged event programmatically?  or is there a different event I should use?

For those who like pain :>)  here's the XAML - obviously, if there' a way to do this with the XAML, this would be equally appreciated. I'm trying to get the text to wrap regardless of the orientation (Portrait/Landscape). The TextBlock is named "textMessage"


  <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="125"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
     
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="theTitle" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Cool stuff" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle2Style}"/>
         </StackPanel>


        <!--ContentPanel -->
        <Grid x:Name="ContentPanel" Margin="12,12,0,0" Grid.Row="1">
            <StackPanel Name="listboxStack" Background="Transparent" Height="620">
                <ListBox Height="619" Margin="12,12,0,0" HorizontalContentAlignment="Stretch" SelectionMode="Single" x:Name="listBox1" SelectionChanged="listBox1_SelectionChanged">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                       
                            <StackPanel Name="imageStack" Orientation="Horizontal">
                            <Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0" />
                            <StackPanel Name="textStack" Orientation="Vertical">
                                <TextBlock Text="{Binding UserName}" Foreground="#FFC8AB14" FontSize="22" />
                                <TextBlock Name="textMessage" SizeChanged="TextBlock_SizeChanged"  Text="{Binding TextMessage}" FontSize="20" TextWrapping="Wrap" LayoutUpdated="TextBlock_LayoutUpdated" />
                                <TextBlock Text="{Binding CreatedOnDate}" FontSize="10" TextWrapping="Wrap" />
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        </Style>
                    </ListBox.ItemContainerStyle>
            </ListBox>
            </StackPanel>
        </Grid>
        <Button Content="refresh" Height="71" Margin="5,80,-1,0" Name="button1" VerticalAlignment="Top" Click="button1_Click" BorderThickness="1" Grid.RowSpan="2" />
    </Grid>




Thanks in advance,
Paul
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Dont you set the width of textbox when the orientation changes?

Author

Commented:
Hi Mikal613,

From what I can tell in the orientationChanged event there is no direct access to the TextBlock control named "textMessage" - unless I'm missing something(?).  

In the SizeChanged event, the sender allows for addressing the control and setting its width. If you know how to access it from the OrientationChanged event or trigger the SizeChanged event from OrientationChanged, I'd appreciate it.

Thanks
Just set a Name to the "Name" property and access that from the code.
JavaScript Best Practices

Save hours in development time and avoid common mistakes by learning the best practices to use for JavaScript.

Author

Commented:
Hi,

hmmm... Not sure what you mean.  Would this be in the OrientationChanged event itself, or something I pass to the SizeChanged event?

The TextBlock has a Name (see XAML above).  It's "textMessage".  But that does not show up in the code behind's intellisense in OrientationChanged event - practically every other named control in the XAML does.  Is there a particular way I need to address the Name for a TextBlock?

Author

Commented:
Hi,

I'll try this and get back to you.  Adding the Name property to the XAML did not make the control addressable in the code behind.  As I mentioned above, I'm fairly new to XAML and will have to comb thru it to make sure I'm not, er..., inserting user error.

Thanks again
Well its only because its bound to a list that you cant access it. normally if you just add a TextBlock with a name you can access it via the code.

Author

Commented:
Thanks.

I see what you're suggesting and I've already gone down that road.  This may fix the textwrapping, but the adjacent controls all overlap eachother once the TextBlock is removed from the list..

I'm getting close by using the SizeChanged event and skipping the Landscape orientation for now.  This was a "nice to have" for the app but its, (imho, unreasonably)  delaying the first release.  I'll wrap up this release (no pun intended) and return to the textwrapping issue in the next.

Thanks for your assistance.
Paul

Author

Commented:
The response time was great and I really appreciated the ideas.  I'm hoping to incorporate in the next release

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial