我的应用程序 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>