2011-07-08 38 views
24

当我将一个TextBlock放置在水平对齐的StackPanel内时,它不会换行。我意识到这是因为StackPanel的可用宽度为PositiveInfinity,但是有没有解决方法?TextBlock TextWrapping不包装

我的布局比这个示例复杂得多,所以我不能删除StackPanel或者水平方向的 。我只是试图重现表现行为的最简单的例子。

<StackPanel Orientation="Horizontal"> 
     <Rectangle Width="50" Height="50" Fill="Blue" VerticalAlignment="Top" /> 
     <Rectangle Width="50" Height="50" Fill="Red" VerticalAlignment="Top" /> 
     <TextBlock TextWrapping="Wrap" 
       Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lectus, viverra ut lobortis vel, mollis eget lectus. Suspendisse laoreet consequat ultrices. Curabitur ultricies, tortor feugiat porttitor faucibus, lorem eros pretium nisl, eu ullamcorper mauris tortor sit amet augue." /> 
    </StackPanel> 

更新: TextBlock的宽度必须是动态的。我需要它随着窗口的大小而流动。

更新2:向StackPanel添加了另一个元素,因为我需要水平布置的子项。

更新3(解决方案):用DockPanel替换StackPanel。

<DockPanel> 
    <DockPanel DockPanel.Dock="Top"> 
     <Rectangle Width="50" Height="50" Fill="Blue" VerticalAlignment="Top" DockPanel.Dock="Left" /> 
     <Rectangle Width="50" Height="50" Fill="Red" VerticalAlignment="Top" DockPanel.Dock="Left" /> 
     <TextBlock TextWrapping="Wrap" 
       Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lectus, viverra ut lobortis vel, mollis eget lectus. Suspendisse laoreet consequat ultrices. Curabitur ultricies, tortor feugiat porttitor faucibus, lorem eros pretium nisl, eu ullamcorper mauris tortor sit amet augue." /> 
    </DockPanel> 
</DockPanel> 

回答

35

这是因为您在StackPanel上使用水平方向。这意味着StackPanel将为每个子控件提供完整的宽度,然后将它们水平放置 - 即使这意味着超出了其有界/可见宽度。因为没有限制TextBlock的宽度的地方,所以不会换行。

如果你切换到垂直方向然后包装工作,但我猜你有一个原因,你指定,否则。你能展示你想要达到的布局吗?

+0

我会更新示例。有时会显示消息左侧的图像。它的可视性由转换器打开或关闭。 –

+2

如果只是这个图像,你会通过使用另一个DockPanel而不是你的StackPanel来获得更好的结果。 DockPanel总是限制其内容的大小,而StackPanel不会。 –

+0

实际上有两个图像,但我会尝试使用DockPanel,并将它们对接到左侧。谢谢! –

16

您可以使用网格而不是StackPanel(正如所解释的,它不会限制其内容)。与StackPanel相比,网格允许对项目布局进行更多的控制,并且如果图像被折叠,那么“自动”列将具有0宽度。

<DockPanel> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Rectangle Width="50" Height="50" Fill="Blue" VerticalAlignment="Top" /> 
     <TextBlock TextWrapping="Wrap" Grid.Column="1" 
      Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lectus, viverra ut lobortis vel, mollis eget lectus. Suspendisse laoreet consequat ultrices. Curabitur ultricies, tortor feugiat porttitor faucibus, lorem eros pretium nisl, eu ullamcorper mauris tortor sit amet augue." /> 
    </Grid> 

</DockPanel> 
+0

+1这也可以。谢谢。 –

+0

我的解决方案。 – Abbas

7

我得到了这个问题的解决方案夫妇。

1)将父宽度绑定到文本块宽度。 (在以下情况下,我认为用户控件作为父项)。如果你和我一样

<UserControl x:Class="WpfApplication1.MyWindow" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" Name="userctrl"> 
    <DockPanel> 
     <StackPanel Orientation="Horizontal" DockPanel.Dock="Top" HorizontalAlignment="Left" > 
      <TextBlock TextWrapping="Wrap" MaxWidth="{Binding ElementName=userctrl,Path=ActualWidth}" 
       Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lectus, viverra ut lobortis vel, mollis eget lectus. Suspendisse laoreet consequat ultrices. Curabitur ultricies, tortor feugiat porttitor faucibus, lorem eros pretium nisl, eu ullamcorper mauris tortor sit amet augue." /> 

     </StackPanel>  
    </DockPanel> 
</UserControl> 

2)其他的解决办法是使用网格代替的StackPanel

<UserControl x:Class="WpfApplication1.MyWindow" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" Name="userctrl"> 
    <DockPanel> 
     <Grid DockPanel.Dock="Top" HorizontalAlignment="Left" > 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition></ColumnDefinition> 
       <ColumnDefinition></ColumnDefinition> 
      </Grid.ColumnDefinitions> 
      <TextBlock TextWrapping="Wrap" 
       Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lectus, viverra ut lobortis vel, mollis eget lectus. Suspendisse laoreet consequat ultrices. Curabitur ultricies, tortor feugiat porttitor faucibus, lorem eros pretium nisl, eu ullamcorper mauris tortor sit amet augue." /> 
      <TextBlock TextWrapping="Wrap" Grid.Column="1" Margin="20 0 0 0" 
       Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lectus, viverra ut lobortis vel, mollis eget lectus. Suspendisse laoreet consequat ultrices. Curabitur ultricies, tortor feugiat porttitor faucibus, lorem eros pretium nisl, eu ullamcorper mauris tortor sit amet augue." /> 

     </Grid>  
    </DockPanel> 
</UserControl> 
+0

您的第一个解决方案不包含任何填充或边距,因此您会丢失控件边缘的数据。 –

0

,并想知道为什么文本块仍然没有定义的宽度后包装。

尝试添加MaxWidth用相同的值相同宽度的文本块,

这可阻止一旦应用程序已经开始在宽度增长的控制。

希望这会有所帮助!