ScrollViewer and TextBlock wrapping

Question

I have the following layout (simplified):

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition MaxWidth="400" />
    <ColumnDefinition />
  </Grid.ColumnDefinitions>

  <!-- Code for Column=0 -->

  <ScrollViewer Grid.Column="1">
    <Grid x:Name="layoutGrid">

      <Grid.ColumnDefinitions>
        <Grid.ColumnDefinition Width="Auto" />
        <Grid.ColumnDefinition MinWidth="100" MaxWidth="400" />
        <Grid.ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions>

      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
      </Grid.RowDefinitions>


      <!-- Code for Row=0 and Row=1 -->

      <GroupBox Grid.ColumnSpan="3" Grid.Row=2>
        <TextBlock Text="{Binding ...}" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" />
      </GroupBox>
    </Grid>
  </ScrollViewer>
</Grid>

• First column should occupy space as mush as it needs (sometimes it can be 100 pixels, sometimes 500).
• Second column Should stretch to available space, but no more than 400 pixels (gets ugly).
• Third column should occupy space as much as it needs (sometimes it can be 200 pixels, sometimes 400).
• If, in some rare cases, layoutGrid needs space more than available on the screen, horizontal scrollbar should be visible.
• GroupBox should always have the total width of all three columns (it should spread as much as their width is in total). And in that space, text box should wrap. GroupBox should not stretch to whole space available on screen.

How can I achieve this in xaml? It seems that as soon as ScrollViewer is inserted, TextBlock does not wrap any more.

Answer 1

Just give the TextBlock a MaxWidth which is the ActualWidth of either the GroupBox or in your case even the layoutGrid (as your GroupBox has the same width). This would force the TextBlock to have to wrap when it's Width exceeds that dimension and thereby giving you your requirement.

So something like:

<GroupBox x:Name="grpBox"
          Grid.Row="2"
          Grid.ColumnSpan="3">
  <TextBlock MaxWidth="{Binding ElementName=grpBox,
                                Path=ActualWidth}"
              HorizontalAlignment="Left"
              VerticalAlignment="Top"
              Text="{Binding ...}"
              TextWrapping="Wrap" />
</GroupBox>

or

<TextBlock MaxWidth="{Binding ElementName=layoutGrid,
                              Path=ActualWidth}"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Text="{Binding ...}"
            TextWrapping="Wrap" />