Windows Phone App - How to make text wrapping depending on device width

Question

In my app I have a list box that contains a stack panel with text block items. The text block items have a text wrapping or text trimming property to avoid that the text block items slide outside the visible range.

As far as I know the text wrapping and text trimming property need a fixed width to insert a line break. For this reason, I set a fixed width for the title (Width="456") and for the description (Width="432"):

<ListBox x:Name="CategoryList" ItemsSource="{Binding}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
        <StackPanel>
          <TextBlock 
            Style="{StaticResource PhoneTextLargeStyle}"
            Text="{Binding Name}" 
            TextTrimming="WordEllipsis"                                    
            Width="456"                                    
          />
          <TextBlock 
            Style="{StaticResource PhoneTextSubtleStyle}"
            Margin="12,-6,12,0" 
            Text="{Binding ContentDescription}"  
            TextWrapping="Wrap"                                                            
            Width="432"                                    
          />
        </StackPanel>
      </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

The problem now is that when I turn the phone, the fixed width for the horizontal mode is too small. Is there a way to put in place of the fixed width a width depending on the device width?

Screenshot: enter image description here

My current solution is to set a different (also fixed) width when an "orientation changed" event occurs. But is there another solution? — Benny Code, Dec 08 '13 at 13:23

Tamay · Accepted Answer · 2013-12-08T14:41:26.870

in general its never a good idea in XAML to use fixed width/height (for "whole" page(100%)) since XAML was designed to do this job for you, so you might concentrate on your layout and the technology covers the aspect of different screens and sizes.

So, if you use a fixed width to display sth. on the whole page its a very good indicator that something is wrong.

In your case you've got the use of StackPanels wrong. StackPanels are designed in a way, that their size is not limited in the direction of their orientation. This means, a StackPanel that has got its orientation set to horizontal might grow indefinetely in width and a sp with orientation set to vertical wouldn't be limited in its height.

Now this leads us to your problem: you have used an indefintely-in-width-growing element in an indefinetely-in-height-growing element (two stackpanels). Even though you might by some tricks limit their size (e.g. that could be achieved by some data bindings), this isn't what should be done.

I'd say - since in the parent StackPanel nothing is stacking - substitute it with some other panel/container (or just remove it) and your problem will be gone.

Example

<DataTemplate>
 <!-- If you need more child elements uncomment the following line -->
 <!-- <Grid> -->
 <StackPanel Margin="0,0,0,17">
  <TextBlock ... />
  <!-- no need to set width on the following textblock -->
  <TextBlock ... TextWrapping="Wrap" />
 </StackPanel>
 <!-- </Grid> -->
</DataTemplate>

I removed my second StackPanel and replaced my first StackPanel with "". After that I removed the widths of my text blocks. That did the trick! Thank you. :) — Benny Code, Dec 08 '13 at 14:43

Windows Phone App - How to make text wrapping depending on device width

1 Answers1