Question

我目前正在研究WPF应用程序的布局，并且似乎在我的一个控件的布局中遇到了一些障碍。此控件是动态调整大小的，因此它应该适合它所属视口的大小。我遇到的问题是一个非常直观的问题，所以我会尽力描述它。这就是目前的样子：

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

那时，我假设没有产生预期的结果，因此我不得不将文本块的宽度绑定到列的宽度。在今天的游戏中，我将样式更改为以下（注意不同的HorizontalAlignment）并删除绑定并发现我的问题已得到解决：

<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”不能实现你的目标吗？

我猜这将消除你正在做的绑定到宽度的需要，因为Grid将负责调整大小。（这可能就是现在发生的事情：网格在收缩时布置控件，绑定到宽度会稍微改变大小，导致跳舞。）

<强> [更新]

我试图复制你看到的行为，但它对我来说很好。我为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”的边框。

动态调整WPF TextBlock大小时的性能不佳

3 个答案: