FlowDocument页面宽度无法填充TabControl内容区域的解决问询

当FlowDocumentScrollViewer放在TabControl的内容区域时，常会遇到初始渲染后不再响应宿主宽度变化的问题。以下是两种实用的解决方法：

方法1：绑定PageWidth到宿主实际宽度 #

直接将FlowDocument的PageWidth绑定到所在FlowDocumentScrollViewer的ActualWidth，让文档宽度始终跟随宿主的实际尺寸变化。如果存在垂直滚动条，可通过转换器减去滚动条宽度避免内容被遮挡。

基础绑定示例 #

<TabControl>
    <TabItem Header="文档标签">
        <FlowDocumentScrollViewer>
            <FlowDocument PageWidth="{Binding RelativeSource={RelativeSource AncestorType=FlowDocumentScrollViewer}, Path=ActualWidth}">
                <Paragraph>测试文本：调整TabControl或窗口宽度时，这段内容会自动换行适配新宽度。</Paragraph>
                <Paragraph>更多测试内容，用于验证换行逻辑是否正常工作。</Paragraph>
            </FlowDocument>
        </FlowDocumentScrollViewer>
    </TabItem>
</TabControl>

带滚动条宽度适配的版本 #

先定义一个值转换器：

public class SubtractValueConverter : IValueConverter
{
    public double ValueToSubtract { get; set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is double actualWidth ? Math.Max(0, actualWidth - ValueToSubtract) : value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

然后在XAML中使用：

<Window.Resources>
    <local:SubtractValueConverter x:Key="ScrollBarOffset" ValueToSubtract="15"/>
</Window.Resources>

<TabControl>
    <TabItem Header="文档标签">
        <FlowDocumentScrollViewer>
            <FlowDocument PageWidth="{Binding RelativeSource={RelativeSource AncestorType=FlowDocumentScrollViewer}, Path=ActualWidth, Converter={StaticResource ScrollBarOffset}}">
                <!-- 文档内容 -->
            </FlowDocument>
        </FlowDocumentScrollViewer>
    </TabItem>
</TabControl>

方法2：自定义自适应FlowDocumentScrollViewer #

如果绑定方式不够灵活，可自定义控件监听尺寸变化，主动更新FlowDocument的PageWidth：

public class AdaptiveFlowDocumentScrollViewer : FlowDocumentScrollViewer
{
    protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
    {
        base.OnRenderSizeChanged(sizeInfo);
        if (Document == null) return;

        // 获取垂直滚动条宽度（仅当滚动条显示时扣除）
        var scrollBar = Template.FindName("PART_VerticalScrollBar", this) as ScrollBar;
        var scrollBarWidth = scrollBar?.Visibility == Visibility.Visible ? scrollBar.ActualWidth : 0;
        
        Document.PageWidth = sizeInfo.NewSize.Width - scrollBarWidth;
    }
}

XAML中直接使用自定义控件：

<TabControl>
    <TabItem Header="文档标签">
        <local:AdaptiveFlowDocumentScrollViewer>
            <FlowDocument>
                <!-- 文档内容 -->
            </FlowDocument>
        </local:AdaptiveFlowDocumentScrollViewer>
    </TabItem>
</TabControl>

问题根源 #

默认情况下FlowDocument的PageWidth为NaN（自动模式），但TabControl初始布局的期望宽度与实际渲染宽度可能存在差异，且FlowDocument不会主动监听宿主的尺寸变化。设置固定PageWidth能强制按指定宽度布局，但无法适配动态变化；上述两种方法则通过主动绑定或监听，实现了宽度的动态适配。

内容的提问来源于stack exchange，提问作者Hydrargyrum