如何让 TextBlock 将文本包装在 DockPanel 区域内？答案

【问题标题】：How to get a TextBlock to wrap text inside a DockPanel area?如何让 TextBlock 将文本包装在 DockPanel 区域内？
【发布时间】：2011-02-02 21:18:45
【问题描述】：

我必须做些什么才能让下面的内部 TextBlock 在不定义绝对宽度的情况下换行其文本？

我尝试过 Width=Auto、Stretch、TextWrapping，将其放入 StackPanel，似乎没有任何效果。

_{（来源：deviantsart.com）}

XAML：

<UserControl x:Class="Test5.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:tk="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
    Width="800"
    Height="600">
    <tk:DockPanel LastChildFill="True">

        <StackPanel tk:DockPanel.Dock="Top"
            Width="Auto"
            Height="50"
            Background="#eee">
            <TextBlock Text="{Binding TopContent}"/>
        </StackPanel>

        <StackPanel tk:DockPanel.Dock="Bottom" Background="#bbb"
            Width="Auto"
            Height="50">
            <TextBlock Text="bottom area"/>
        </StackPanel>

        <StackPanel tk:DockPanel.Dock="Right" Background="#ccc"
            Width="200"
            Height="Auto">
            <TextBlock Text="info panel"/>
        </StackPanel>

        <StackPanel tk:DockPanel.Dock="Left" Background="#ddd"
            Width="Auto"
            Height="Auto">
            <ScrollViewer HorizontalScrollBarVisibility="Auto" Padding="10"
            BorderThickness="0"
                Width="Auto"
                VerticalScrollBarVisibility="Auto">
                <tk:DockPanel HorizontalAlignment="Left" Width="Auto" >
                    <StackPanel tk:DockPanel.Dock="Top" HorizontalAlignment="Left">
                        <Button Content="Add More" Click="Button_Click"/> 
                    </StackPanel>
                    <TextBlock tk:DockPanel.Dock="Top" 
                        Text="{Binding MainContent}" 
                        Width="Auto" 
                        TextWrapping="Wrap" />
                </tk:DockPanel>
            </ScrollViewer>
        </StackPanel>

    </tk:DockPanel>
</UserControl>

【问题讨论】：

查看这个答案：stackoverflow.com/questions/386039/…

标签： silverlight textblock word-wrap dockpanel

【解决方案1】：

由于某种原因，显而易见的（优雅的）解决方案似乎在 SL 中不起作用：

<ScrollViewer Name="w_scrollViewer" HorizontalScrollBarVisibility="Auto" Padding="10"
BorderThickness="0" Width="Auto" VerticalScrollBarVisibility="Auto">
    <tk:DockPanel Name="w_dp" HorizontalAlignment="Left" Width="Auto" >
        <TextBlock Margin="2" Name="w_tb"
                   Text="{Binding MainContent}" TextWrapping="Wrap"
                   Width="{Binding ActualWidth, ElementName=w_scrollViewer}"
                    />
    </tk:DockPanel>
</ScrollViewer>

但更“粗略”的方式：

<StackPanel SizeChanged="w_sp_SizeChanged" Name="w_sp" tk:DockPanel.Dock="Left"
            Background="#ddd" Width="Auto" Height="Auto">
    <ScrollViewer Name="w_scrollViewer" HorizontalScrollBarVisibility="Auto"
                  Padding="10" Width="Auto" VerticalScrollBarVisibility="Auto"
                  SizeChanged="HandleScrollViewerSizeChanged" >
        <tk:DockPanel HorizontalAlignment="Left" Width="Auto" >
            <TextBlock Name="w_textBlock" Text="{Binding MainContent}" TextWrapping="Wrap" />
        </tk:DockPanel>
    </ScrollViewer>
</StackPanel>

后面的代码：

private void HandleScrollViewerSizeChanged(object sender, SizeChangedEventArgs e)
{
    w_textBlock.Width = w_scrollViewer.ActualWidth;
}

【讨论】：

【解决方案2】：

您是否尝试过更改滚动条的可见性？

<ScrollViewer HorizontalScrollBarVisibility="Disabled" Padding="10"
            BorderThickness="0"
                Width="Auto"
                VerticalScrollBarVisibility="Auto">

【讨论】：

禁用滚动条将“起作用”，但 OP 确实需要它。