Poor Performance When Dynamically Resizing a WPF TextBlock - wpf

Question

I'm currently working out the layout of a WPF Application and seem to have it a bit of a snag in the layout of one of my controls. This control is a dynamically sizing, so it should fit the size of the viewport it's a part of. The problem I'm running into is a very visual problem, so I'll do my best to describe it. Here's what it looks like at the moment:
alt text http://gallery.me.com/theplatz/100006/Capture/web.png?ver=12472534170001
The area underneath each of the "Col N Row X" headers is a TextBlock where text of varying length will be placed. To make the TextBlock actually wrap, I found a solution here on stackoverflow that said to bind the width of the textblock to that of the column. Here's a snippet of the Grid definition along with the definition for the first column:
<!-- Change Detail Contents Grid -->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="270" Width="2*" />
<ColumnDefinition MinWidth="160" Width="*" />
<ColumnDefinition MinWidth="160" Width="*" />
<ColumnDefinition MinWidth="160" Width="*" />
</Grid.ColumnDefinitions>
<!--
We bind the width of the textblock to the width of this border to make sure things resize correctly.
It's important that the margin be set to 1 larger than the margin of the textblock or else you'll end
up in an infinate loop
-->
<Border Grid.Column="0" Margin="6" Name="FirstBorder" />
<Border Grid.Column="0" BorderThickness="0,0,1,0" BorderBrush="{DynamicResource ColumnBorderBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<Border Style="{DynamicResource DetailHeadingBorder}">
<TextBlock Text="Col 1 Row 1" Style="{DynamicResource DetailHeadingText}" />
</Border>
<TextBlock Text="{Binding IsReason, ElementName=ChangeDetailRoot}" Style="{DynamicResource DetailText}" Width="{Binding ActualWidth, ElementName=FirstBorder}" />
</StackPanel>
<StackPanel Grid.Row="1">
<Border Style="{DynamicResource DetailHeadingBorder}">
<TextBlock Text="Col 1 Row 2" Style="{DynamicResource DetailHeadingText}" />
</Border>
<TextBlock Text="{Binding WasReason, ElementName=ChangeDetailRoot}" Style="{DynamicResource DetailText}" Width="{Binding ActualWidth, ElementName=FirstBorder}" />
</StackPanel>
</Grid>
</Border>
</Grid>
Everything resizes fine when the window/viewport width is increasing. The problem become apparent when the width is decreased. If you suddenly go from maximized to the original size, all of the columns "dance" back to their specified size. What I mean by this is that you can watch each column reduce in size, as it's proportionally resized back to its smaller size. What I've found is that this is directly caused by
Width="{Binding ActualWidth, ElementName=FirstBorder}"
on each of the TextBlocks. The problem also become noticeably worse the more of these controls are on the screen at one time. But, without that line, the text inside each of the TextBlocks will continue to grow to the right the more text is added instead of wrapping down in the column.
Is there a better way to accomplish what I'm trying to accomplish? Using HTML/CSS, this would be a fairly simple thing to accomplish. I've spent hours Googling and looking through stackoverflow for an answer to this question.
I come from a heavy background of HTML/CSS, so if this isn't something that WPF should be good at, please let me know.

Answer 1

I hate to answer my own question, but it appears that I may have found out what I was doing incorrectly. Since it's been so long since the original question was asked, I cannot remember every step I attempted to take, but this is what I do know. The style on each textblock was set as such:
<Style x:Key="DetailText" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="Margin" Value="5,5,5,5" />
</Style>
At that time, I'm assuming that did not produce the desired results and therefore I had to bind the width of the textblock to that of the column. In playing around today, I changed the style to the following (note the different HorizontalAlignment) and removed the bindings and found out that my problem had been resolved:
<Style x:Key="DetailText" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="Margin" Value="5,5,5,5" />
</Style>

Answer 2

I apologize if you've tried this, but does setting TextBlock.TextWrapping to "Wrap" not accomplish your goal?
I'm guessing that will get rid of the need for the bind-to-width stuff you're doing, as the Grid will take care of the resizing. (That is probably what is happening now: The Grid is laying out the controls as it shrinks, and the binding to width is changing the size slightly, causing the dancing.)
[Update]
I tried to duplicate the behavior you're seeing, but it works fine for me. I made a simple style for the TextBlocks like so:
<Style x:Key="DetailText" TargetType="{x:Type TextBlock}">
<Setter Property="TextBlock.TextWrapping" Value="Wrap"/>
</Style>
And I didn't have any of your other dynamic resources (DetailHeadingBorder, DetailHeadingText, or ColumnBorderBrush), so everything was black and white (fine).
Maybe you just have a really old graphics card and it's rendering things in software? Or it has to do with your styles.

Answer 3

I hope I didn't misinterpret your question, but I don't see the need for binding TextBlock.Width?
This xaml seems to work correctly:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="270"
Width="2*" />
<ColumnDefinition MinWidth="160"
Width="*" />
<ColumnDefinition MinWidth="160"
Width="*" />
<ColumnDefinition MinWidth="160"
Width="*" />
</Grid.ColumnDefinitions>
<!-- We bind the width of the textblock to the width of this border to make sure things resize correctly.
It's important that the margin be set to 1 larger than the margin of the textblock or else you'll end
up in an infinate loop -->
<Border Grid.Column="0"
BorderThickness="0,0,1,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<Border>
<TextBlock Text="Col 1 Row 1" />
</Border>
<TextBlock TextWrapping="Wrap"
Text="gfege dfh lh dfl dhliöslghklj h lglsdg fklghglfg flg lgheh" />
</StackPanel>
<StackPanel Grid.Row="1">
<Border>
<TextBlock Text="Col 1 Row 2" />
</Border>
<TextBlock Text="Massor av text som blir en wrappning i slutändan hoppas jag"
TextWrapping="Wrap" />
</StackPanel>
</Grid>
</Border>
</Grid>
I just removed the width bindings, added TextWrapping (which you probably had in a style), and removed the border named "FirstBorder" as well.