CODEWITHSUNDEEP
wpf.net-4.0tabcontrolscrollviewer
Shakti Prakash Singh
Shakti Prakash Singh

Reputation: 2533

TabControl width increases on adding tabs

My application UI is divided in 2 parts. Left side is Navigation Menu and Right is View Area where the selected Menu content is displayed. Now, one of the menu is reports. I am using Tabcontrol with Header and Content Template. Template has a ViewModel as DataType and content as the respective View which is a UserControl. This TabControl is inside a scrollviewer which is set as horizontal and vertical alignment to stretch.

The user control hosts a ContentPresenter inside a Grid which is bound to a ReportHost which has a reportviewer as child. I am using this ReportViewer to generate reports.

When the user opens a report, it opens in a new tab. It works fine till the number of tabs is such that the tabheaders are contained inside the viewing area. But as soon as more tabs are added, it causes the tabcontrol width to stretch, causing the content area of the tab to stretch and the contentpresenter also stretches causing horizontal scroll to appear. This finally result in the report to stretch and due to some reason, unknown to me, the report overlaps the Navigation Area of the UI, as if it is not a part of the UI but is overlapping it. The whole report keeps on floating on top of the View Area and Navigation menu on scrolling.

I can fix it by providing the MaxWidth to the ScrollViewer but I don't want to do that. I would like the width of the tabcontroll or the Scrolviewer to be decided purely based on available View Area. How do I do this through the code or XAML without using fixed width.

I am not sure if I was able to explain the situation. Please let me know if more information or clarification is needed. I would be more than happy to provide details.

Edit: Adding Code for information.

<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>

Upvotes: 0

Views: 459

Answers (1)

Matthew Walton
Matthew Walton

Reputation: 9959

ScrollViewer presents to its child an infinitely large area on which to set itself out, because it reasons that it can just offer scrolling if it's bigger than the space available to ScrollViewer itself. Because yours has scrolling enabled in both directions, that means the TabControl can expand as much as it likes in either direction, and it's not going to be smart enough to know that it's inside a ScrollViewer and that you want the tabs to not take advantage of this virtual space.

From the sound of things, you might want to consider moving the ScrollViewer within the TabControl so that only the contents of the tab is scrollable rather than the whole set. You should be able to do that by modifying the tab content template.

Upvotes: 1

Related Questions