Text Wrapping inside a Grid

Question

Hey Guys,

If I have a grid thats say 300px in length and a textblock of 300px in length inside the grid. How can I have it that if the text will drop down onto a new line if needs be. I have tried this but all it does it cut off the text at the end instead.

categoryTitle.Width = 300;
categoryTitle.TextWrapping = TextWrapping.Wrap;

Answer 1

The Text should wrap with the TextWrapping property as long as you have it constrained to the UI.  Remove the Width from the TextBox and apply a Margin instead.

Can you post the code or xaml that you are using?

XAML:

<Grid Width="300">
            <TextBlock Text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" FontSize="18" Margin="5" TextWrapping="Wrap" />
        </Grid>

 

Answer 2

That doesnt seem to work. I'm creating the textblock dynamically like so

TextBlock categoryTitle = new TextBlock();

categoryTitle.Text = parentCategory.Name;
categoryTitle.FontSize = 35;
categoryTitle.Margin = new Thickness(5, 5, 5, 5);
categoryTitle.TextWrapping = TextWrapping.Wrap;
subCategory1Title.Children.Add(categoryTitle);

Just seems to cut off at the end.

Answer 3

What is "subCategory1Title"? Is that a Grid defined in code or xaml?  What are the properties on subCategory1Title? 

 

C#:

Category parentCategory = new Category() { Name = "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" };

Grid subCategory1Title = new Grid();
subCategory1Title.Width = 300;
LayoutRoot.Children.Add(subCategory1Title);

TextBlock categoryTitle = new TextBlock();
categoryTitle.Text = parentCategory.Name;
categoryTitle.FontSize = 35;
categoryTitle.Margin = new Thickness(5, 5, 5, 5);
categoryTitle.TextWrapping = TextWrapping.Wrap;
subCategory1Title.Children.Add(categoryTitle);

 

Answer 4

It is.. this is the xmal for it

<Grid x:Name="subCategory1Title" Height="46" VerticalAlignment="Top" Width="300">

Answer 5

Remove the Height property from the subCategory1Title grid. This is causing the text to be clipped to that height.

Answer 6

Ah that was it. You were spot on. Just one more question abotu this..

I want to have 2 grids.. top and bottom. How can I get it so if the content in the top grid expands ie: text wraps.. it pushes down the bottom grid so the content doesnt overlap on top of it or behind it.

Same way two divs on a webpage would work. One div can expand with content pushing the div below it down with it.

Answer 7

For that, you can either use a StackPanel or divide your root Grid into two rows using RowDefinitions.

<Grid>
   <Grid.RowDefinitions>
       <RowDefinition Height="Auto" />
       <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>

   <Grid x:Name="subCategoryTitle1" Grid.Row="0" />
   <Grid x:Name="subCategoryTitle2" Grid.Row="1" />
</Grid>

 

Answer 8

Thanks for your help. I've used the same code as you supplied but the content of grid 0 still sites behind grid 1. Should I be using any other perferences

    					<Grid Height="108" Margin="8,8,8,0" VerticalAlignment="Top" d:LayoutOverrides="GridBox">
    						<Grid.RowDefinitions>
    							<RowDefinition Height="Auto"/>
    							<RowDefinition Height="Auto"/>
    						</Grid.RowDefinitions>
							   <Grid x:Name="subCategory1Title" Grid.Row="0" />
  								 <Grid x:Name="subCategory1Desc" Grid.Row="1" />

    					</Grid>

Answer 9

Got it working there. Thanks a mill for the help! :)