添加選項卡時TabControl寬度增加

我的應用程序UI分爲兩部分。左側是導航菜單，右側是查看所選菜單內容的顯示區域。現在，其中一個菜單是報告。我正在使用標題和內容模板的Tabcontrol。模板有一個ViewModel作爲DataType和內容作爲相應的View，它是一個UserControl。此TabControl位於滾動查看器中，該滾動查看器設置爲水平和垂直對齊以進行拉伸。添加選項卡時TabControl寬度增加

用戶控件在網格內託管一個ContentPresenter，該網格綁定到具有reportviewer作爲子項的ReportHost。我正在使用此ReportViewer生成報告。

當用戶打開報告時，它會在新選項卡中打開。它工作正常，直到標籤的數量是這樣的tabheaders包含在查看區域內。但只要添加了更多製表符，就會導致製表符寬度拉伸，導致製表符的內容區域拉伸，並且內容展示器也拉伸，導致出現水平滾動。這最終導致報告拉長，並且由於某些原因，對我而言，該報告與UI的導航區域重疊，就好像它不是UI的一部分，但與其重疊。整個報告在滾動的視圖區域和導航菜單上不斷浮動。

我可以通過向ScrollViewer提供MaxWidth來修復它，但我不想這樣做。我希望tabcontroll或Scrolviewer的寬度完全取決於可用的視圖區域。如何在不使用固定寬度的情況下通過代碼或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>

來源

2012-04-19 Shakti Prakash Singh

ScrollViewer呈現給其子在其自身設置了一個無限大的區域，因爲這方面的原因，它可以只是提供滾動的，如果它不是提供給ScrollViewer本身的空間更大。由於您的滾動功能已在兩個方向啓用，這意味着TabControl可以在任何方向上都儘可能地擴展，並且它不會足夠聰明以知道它在ScrollViewer之內，並且您希望標籤不利用這個虛擬空間。

從聲音的角度來看，您可能需要考慮在TabControl範圍內移動ScrollViewer，以便只有標籤的內容是可滾動的而不是整個集合。您應該可以通過修改標籤內容模板來實現這一點。

來源

2012-04-19 13:34:30

哇，工作。唯一的事情是，當標籤更多時，標籤顯示爲多行。但我想我可以忍受這一點。非常感謝。 – 2012-04-19 14:09:21

如果你願意，你可以解決這個問題，但是它涉及到改變'TabControl'的模板並且有點複雜。網絡上有文章會帶你通過製作一個滾動選項卡或其他替代選項而不是生成多行的文章。 – 2012-04-19 15:59:08

我會試圖找出，但任何機會，如果你有一個相同的實施的鏈接，我會很高興，如果你可以分享。 – 2012-04-20 05:18:36

添加選項卡時TabControl寬度增加

回答

相關問題