FlowDocument 页面宽度未填充主机 TabControl 内容区域

Question

我在尝试在

FlowDocument

的内容区域托管

TabControl

内容时遇到布局问题。

我希望

FlowDocumentScrollViewer

渲染以适合托管

TabControl

的实际宽度，但它似乎是根据 TabControl 的

desired

宽度进行初始渲染，然后不响应事实上，实际渲染的宽度是不同的。

这是演示该问题的简化 XAML：

<Window x:Class="ProblemDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ProblemDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="Auto" Width="Auto">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Grid.Column="0" 
               MinWidth="800" MinHeight="200"
               VerticalAlignment="Stretch" 
               HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Background="Bisque">
            Mock Content
        </Label>
        <Label Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" 
               MinWidth="300" MinHeight="500"
               HorizontalContentAlignment="Center" 
               VerticalContentAlignment="Center" 
               Background="CadetBlue">
            Mock Content
        </Label>
        <TabControl Grid.Column="0" Grid.Row="1" TabStripPlacement="Bottom">
            <TabControl.ContentTemplate>
                <DataTemplate DataType="{x:Type TabItem}">
                    <FlowDocumentScrollViewer HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
                        <FlowDocumentScrollViewer.Document>
                            <FlowDocument TextAlignment="Left" PageWidth="Auto">
                                <Paragraph FontWeight="Bold">
                                    Sample Header
                                </Paragraph>
                                <Paragraph>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                </Paragraph>
                                <Paragraph>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                </Paragraph>
                                <Paragraph>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                </Paragraph>
                            </FlowDocument>
                        </FlowDocumentScrollViewer.Document>
                    </FlowDocumentScrollViewer>
                </DataTemplate>
            </TabControl.ContentTemplate>
            <TabItem Header="Item 1" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch">
                Content
            </TabItem>
        </TabControl>
    </Grid>
</Window>

看起来像这样：

如果我将

FlowDocument

的

PageWidth

设置从

Auto

更改为固定值，它会响应该设置。所以看来根本问题是

Auto

宽度不尊重父控件的实际大小。但在我的实际应用程序中，左上角（第 0 行第 0 列）和右侧窗格（第 1 列）中的内容是可变大小的，因此我希望

FlowDocument

适合其主机，而不是设置固定的

 PageWidth

。我怎样才能做到这一点？

Answer 1

FlowDocumentScrollViewer 似乎需要指定宽度才能充分利用空间。一个简单的解决方法是将确定列宽的 Label 的实际宽度与 TabControl 的宽度绑定。

<Label Grid.Column="0" Grid.Row="0"
       MinWidth="800"
       x:Name="TopLabel"
       ...
       Background="Bisque">
    Mock Content
</Label>
...
<TabControl Grid.Column="0" Grid.Row="1" TabStripPlacement="Bottom"
            Width="{Binding ElementName=TopLabel, Path=ActualWidth, Mode=OneWay}">
...
</TabControl>