動態調整WPF TextBlock大小時的性能不佳

Question

我目前正在研究WPF應用程序的布局，似乎在我的一個控件的布局中有一點點障礙。 此控件是動態調整大小的，因此它應適合作為其一部分的視口的大小。 我遇到的問題是一個非常視覺化的問題，因此，我將盡力描述它。 這是現在的樣子：

替代文字http://gallery.me.com/theplatz/100006/Capture/web.png?ver=12472534170001

每個“ Col N Row X”標題下方的區域是一個TextBlock，將在其中放置不同長度的文本。 為了實際包裝TextBlock，我在stackoverflow上找到了一個解決方案，該解決方案將textblock的寬度綁定到列的寬度。 這是Grid定義的摘錄以及第一列的定義：

<!-- 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>

當窗口/視口寬度增加時，所有內容都將調整大小。 當寬度減小時，問題變得明顯。 如果您突然從最大化變為原始大小，則所有列都會“跳舞”回到其指定大小。 我的意思是，您可以看到每列的尺寸都減小了，因為它按比例地重新調整為較小的尺寸。 我發現這是直接由

Width="{Binding ActualWidth, ElementName=FirstBorder}"

在每個TextBlocks上。 隨着這些控件一次出現在屏幕上，問題也變得更加嚴重。 但是，如果沒有該行，則每個TextBlocks內的文本將繼續向右增加，而添加的文本將更多，而不是在列中向下滾動。

有沒有更好的方法來完成我要完成的工作？ 使用HTML / CSS，這將是一件相當簡單的事情。 我花了幾個小時在谷歌上搜索，並通過stackoverflow尋找有關此問題的答案。

我來自HTML / CSS的深厚背景，所以如果WPF不擅長於此，請告訴我。

Answer 1

我不願回答自己的問題，但似乎我可能發現自己做錯了什么。 由於提出原始問題已經很久了，所以我不記得嘗試采取的每一個步驟，但這就是我所知道的。 每個文本塊的樣式設置如下：

<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>

當時，我假設這無法產生理想的結果，因此我不得不將文本塊的寬度綁定到列的寬度。 在今天的比賽中，我將樣式更改為以下樣式（請注意不同的Horizo​​ntalAlignment），並刪除了綁定，並發現我的問題已解決：

<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

如果您嘗試過此操作，我深表歉意，但是將TextBlock.TextWrapping設置為“ Wrap”是否無法實現您的目標？

我猜想這將擺脫對您正在執行的寬度綁定內容的需要，因為網格將負責調整大小。 （現在可能正在發生這種情況：網格在縮小時正在布局控件，並且對寬度的綁定稍微改變了大小，從而引起了跳舞。）

[更新]

我試圖重復您看到的行為，但是對我來說很好。 我為TextBlocks制作了一個簡單的樣式，如下所示：

<Style x:Key="DetailText" TargetType="{x:Type TextBlock}">
    <Setter Property="TextBlock.TextWrapping" Value="Wrap"/>                
</Style>

而且我沒有其他任何動態資源（ DetailHeadingBorder, DetailHeadingText, or ColumnBorderBrush ），因此所有內容都是黑白的（很好）。

也許您只是有一個非常老的圖形卡並且正在用軟件渲染東西？ 或者與您的styles 。

Answer 3

希望我不會誤解您的問題，但是我認為不需要綁定TextBlock.Width嗎？

這個xaml似乎正常工作：

  <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>

我只是刪除了寬度綁定，添加了TextWrapping（您可能已在樣式中添加了它），還刪除了名為“ FirstBorder”的邊框。