ScrollViewer is sizing over everything no matter what I do. :(

Question

All,

I am a novice to WPF and this seems to be a problem that a lot of people struggle with. I have put together the following piece of XAML which is then programmatically loaded into code. ONLY the template is used and is applied to a code-instantiated TabControl object. From there, I generate tabs and random fake data for the tabs. The problem is that my TabControl's ScrollViewer is growing infinitely beyond everything and therefore not scrolling. I have tried to set all of the VerticalAlignment's up the tree to "Stretch" but it hasn't helped. I have a feeling it is a simple issue that has arisen from piecing together multiple customizations and instantiating it all at runtime. Any help would be greatly appreciated.

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    Title="Window2">
<TabControl>
    <TabControl.Template>
        <ControlTemplate TargetType="TabControl">
            <DockPanel VerticalAlignment="Stretch">
                <ScrollViewer VerticalAlignment="Stretch">
                    <ScrollViewer.Template>
                        <ControlTemplate TargetType="{x:Type ScrollViewer}">
                            <Grid x:Name="Grid" VerticalAlignment="Stretch" Background="{TemplateBinding Background}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Rectangle x:Name="Corner" Grid.Column="0" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/>
                                <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
                                <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>
                                <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/>
                            </Grid>
                        </ControlTemplate>
                    </ScrollViewer.Template>
                    <TabPanel x:Name="HeaderPanel"
                          Panel.ZIndex ="1" 
                          KeyboardNavigation.TabIndex="1"
                          Grid.Column="0"
                          Grid.Row="0"
                          Margin="2,2,2,0"
                          IsItemsHost="true"/>
                </ScrollViewer>
                <ContentPresenter x:Name="PART_SelectedContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="{TemplateBinding Padding}" ContentSource="SelectedContent"/>
            </DockPanel>
        </ControlTemplate>
    </TabControl.Template>
</TabControl>

TabControl tabs = new TabControl();
        string xamlPath = System.IO.File.ReadAllText("..\\..\\Resources\\Templates\\Template.xaml");
        Window window = (Window)XamlReader.Parse(xamlPath);
        tabs.Template = ((TabControl)window.Content).Template;

        Random rand = new Random();

        for (int i = 0; i < 100; i++)
        {

            DataTable dataTable = new DataTable();
            for (int x = 0; x < 50; x++) dataTable.Columns.Add(x.ToString(), typeof(double));

            for (int x = 0; x < 50; x++)
            {
                DataRow dataRow = dataTable.NewRow();
                dataTable.Rows.Add(dataRow);
            }
            DataView dataView = new DataView(dataTable);
            for (int x = 0; x < 50; x++)
            {
                for (int y = 0; y < 50; y++) dataView[x][y] = rand.Next()%100;
            }

            DataGrid table = new DataGrid();
            table.ItemsSource = dataView;


            TabItem tab = new TabItem();
            tab.Header = "Tab " + (i+1);
            tab.Content = table;

            tabs.Items.Add(tab);
        }
        tabs.TabStripPlacement = Dock.Left;
        tabs.VerticalAlignment = VerticalAlignment.Stretch;
        tabs.HorizontalAlignment = HorizontalAlignment.Stretch;
        option.canvas.Children.Add(tabs);

Answer 1

EDIT: Below was my original solution. It turns out that the problem was using a Canvas in the first place. By using a DockPanel, it has eliminated any need to recalculate sizes at all. This is similar to Blam's answer.

Forcing the Canvas to have a height/width did the trick. It refused to calculate the height before layout rendering since everything is dynamically sized, so the top level Panel inside of a Content object apparently must have a manually calculated size. Naturally that is where the XAML/C# barrier was, which hid the problem quite well.

The below code is what was missing. After I added it, the XAML and C# code from the original post all fell in line perfectly. Basically, the top level Panel must have a size for the lower level objects to dynamically size around it.

option.canvas.Height = OptionTabs.ActualHeight - tab.ActualHeight - tab.Margin.Bottom - tab.Margin.Top;
option.canvas.Width = OptionTabs.ActualHeight - tab.Margin.Right - tab.Margin.Left;

Answer 2

Need to constrain the TabControl

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    Title="Window2">
    <Grid ShowGridLines="False">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <TabControl Grid.Row="0" Grid.Comlumn="0"/>
    </Grid>
</Window>