Question

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

用户控件在Grid内部托管一个ContentPresenter，该GridA绑定到ReportHost，该ReportHost将reportviewer作为子视图。我正在使用此ReportViewer生成报告。

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

我可以通过向ScrollViewer提供MaxWidth来修复它，但我不想这样做。我希望tabcontroll或Scrolviewer的宽度完全基于可用的View Area来决定。如何在不使用固定宽度的情况下通过代码或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，以便只有选项卡的内容可滚动而不是整个集。您应该可以通过修改选项卡内容模板来实现此目的。

添加选项卡时TabControl宽度会增加

1 个答案: