添加选项卡时 TabControl 宽度增加

Question

我的应用程序 UI 分为两部分。左侧是导航菜单，右侧是显示所选菜单内容的查看区域。现在，菜单之一是报告。我正在使用带有标题和内容模板的 Tabcontrol。模板具有作为 DataType 的 ViewModel 和作为 UserControl 的相应 View 的内容。此 TabControl 位于滚动查看器内，该滚动查看器设置为水平和垂直对齐以进行拉伸。

用户控件在 Grid 内托管一个 ContentPresenter，该 Grid 绑定到一个 ReportHost，该 ReportHost 有一个报告查看器作为子项。我正在使用这个 ReportViewer 来生成报告。

当用户打开报告时，它会在新选项卡中打开。它工作正常，直到选项卡的数量使得选项卡标题包含在查看区域内。但是一旦添加了更多选项卡，它就会导致 tabcontrol 宽度拉伸，导致选项卡的内容区域拉伸，并且 contentpresenter 也拉伸导致出现水平滚动。 这最终导致报告被拉伸，并且由于某种原因，我不知道，报告与 UI 的导航区域重叠，就好像它不是 UI 的一部分而是重叠它一样。整个报告在滚动时一直浮动在“查看区域”和“导航”菜单的顶部。

我可以通过向 ScrollViewer 提供 MaxWidth 来修复它，但我不想这样做。我希望 tabcontroll 或 Scrollviewer 的宽度完全基于可用的视图区域来决定。如何在不使用固定宽度的情况下通过代码或 XAML 执行此操作。

我不确定我是否能够解释这种情况。如果需要更多信息或澄清，请告诉我。我很乐意提供详细信息。

编辑：为信息添加代码。

<DataTemplate x:Key="TabContent" DataType="{x:Type VM:ReportViewModel}">
  <View:Report/>
</DataTemplate>
<DataTemplate x:Key="TabHeader" DataType="{x:Type VM:ReportViewModel}">
  <ContentPresenter Content="{Binding Path=TabHeader}"
    VerticalAlignment="Center"/>
</DataTemplate>

<ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
    HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
  <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap"
        Text="Reports" VerticalAlignment="Top" Margin="10,13,0,0" 
        FontSize="18.667" FontFamily="Segoe UI" Foreground="White"/>
    <Border BorderThickness="0" Margin="0,50,0,0" 
        Background="{DynamicResource Brush_HeaderNew}" Height="50" Width="Auto" 
        VerticalAlignment="Top"/>
    <TabControl ItemsSource="{Binding ReportItems}" Grid.Row="1" Margin="0,20,0,0" 
        SelectedItem="{Binding SelectedReportItem}"
        ContentTemplate="{StaticResource TabContent}" 
        ItemTemplate="{StaticResource TabHeader}"
    />
  </Grid>
</ScrollViewer>

Answer 1

ScrollViewer 向它的孩子展示了一个无限大的区域来设置自己，因为它的原因是如果它比ScrollViewer 本身可用的空间大，它就可以提供滚动。因为您的已启用双向滚动，这意味着 TabControl 可以在任一方向上任意扩展，并且它不会聪明到知道它在 ScrollViewer 内并且您希望标签不要利用这个虚拟空间。

从事物的声音来看，您可能需要考虑将ScrollViewer 移动到TabControl 中，以便只有选项卡的内容是可滚动的，而不是整个集合。您应该可以通过修改选项卡内容模板来做到这一点。