0

I am trying to align a textblock vertically and horizontally center in a stack panel which is there in Listview but i am only able to get text vetically center but not horizontally. Plus the text is not getting wrapped. Here is the code that i have tried:

 <ListBox Name="lstTiles" Margin="12,0,-12,0" Grid.Row="1" SelectionChanged="lstTiles_SelectionChanged">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <toolkit:WrapPanel/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Background="{StaticResource PhoneAccentBrush}" Width="145" Height="80" Margin="8,8,0,0" Orientation="Vertical" >
                    <TextBlock Text="{Binding Name}" Tag="{Binding ID}" Style="{StaticResource PhoneTextNormalStyle}" FontSize="15" TextWrapping="Wrap" TextAlignment="Center" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

How can i achieve text vertically, horizontally and textwrap?

Balraj Singh
  • 3,381
  • 6
  • 47
  • 82

1 Answers1

0

It looks like since you have the orientation of the StackPanel set to Horizontal, you're putting textblocks next to each other rather than on top of each other. Since the StackPanel elements take the size of their children, you would be able to visualize this as a horizontal, side-by-side, listing of textblocks. Since each textblock takes the size of the text that is in it, you are going to see blocks that are of varying widths, so centering horizontally is going to have no effect.

You could use margins (a pain) to accomplish equal widths. I don't recommend this.

You could also put grids of a set width in the stack panel, and put the textblocks on the grid. You may be able to set the width of the textblocks to get the right effect, but I can't test this at the moment, and I don't remember if it will cause the text to stretch or not.

For text wrapping, I assume you're talking about within the textblock, and that's easy - just set the textblock's TextWrapping property to Wrap.

Try setting the HorizontalContentAlignment and VerticalContentAlignment properties on the listboxitem. I don't have my dev computer now, so I can't experiment, but here is a post that might help you: Silverlight 3: ListBox DataTemplate HorizontalAlignment. Look at both of the first two answers, and see which one might be most helpful in your situation, substituting center, of course, in place of left, top, or stretch.

Community
  • 1
  • 1
Rich Hopkins
  • 1,861
  • 15
  • 29
  • Hi, In my code i have already written textwrap property but its not working when I am setting stack panel orientation as vertical – Balraj Singh Jul 02 '12 at 08:14
  • So your markup is now different than above? Above the stackpanel orientation is horizontal. If different, post the new markup. Is the text running beyond the side of the stackpanel? Try setting maxwidth on the textblock, and then see if it wraps. Are you expecting scrolling behavior? The stackpanel will not scroll. If you want scroll, place the stackpanel in a scrollviewer, and remove the height property. – Rich Hopkins Jul 02 '12 at 13:03
  • Yes i have updated the UI code above and the UI that will appear while rendering this code is like small tile like box next to each other each holding text of varying length. So now the issue is text is getting wrapped and is horizontally center align but vertically i am not able to get center align and if i put margin for different text of varying length i am not getting exactly center align. – Balraj Singh Jul 03 '12 at 10:46
  • Ah - not sure why I didn't notice this before.... Was thinking more than one item in stackpanel, wasn't thinking of it as a template for some reason. So your items in your listbox are not horizontally centered with each other even though they are centered within the textblock. This is because there is a stackpanel in each listboxitem. They are all different widths. See my edited answer above for a link that may help you. – Rich Hopkins Jul 03 '12 at 12:49