Another problem with using canvases and scrollviewers in tab

Question

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WPFDynamicTab
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
        private List<TabItem> _tabItems;
        private TabItem _tabAdd;
   //     private Canvas canvas1;
        public MainWindow()
           try
                InitializeComponent();
                // initialize tabItem array
                _tabItems = new List<TabItem>();
                // add a tabItem with + in header
                _tabAdd = new TabItem();
             //    canvas1= new Canvas();
                _tabAdd.Header = "+";
                _tabAdd.MouseLeftButtonUp += _tabAdd_MouseLeftButtonUp;
                _tabItems.Add(_tabAdd);
                this.AddTabItem();   // add first tab
                // bind tab control
                tabDynamic.DataContext = _tabItems;
                tabDynamic.SelectedIndex = 0;
            catch (Exception ex)
                MessageBox.Show(ex.Message);
        private TabItem AddTabItem()
            int count = _tabItems.Count;
            // create new tab item
            TabItem tab = new TabItem();
            tab.Header = string.Format("Tab {0}", count);
            tab.Name = string.Format("tab{0}", count);
            tab.HeaderTemplate = tabDynamic.FindResource("TabHeader") as DataTemplate;
            // add controls to tab item, this case I added just a canvas
            ScrollViewer scrollview1 = new ScrollViewer();
            Canvas canvas1 = new Canvas();
            canvas1.Name = "canvas1";
// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
            Canvas_Paint(ref canvas1); // Canvas_Paint defines the background color of  "canvas1"
            scrollview1.Height=200;
            scrollview1.VerticalAlignment = VerticalAlignment.Center;
            canvas1.Height=400+400*count;
            scrollview1.Content = canvas1;
            tab.Content = scrollview1;    
//YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY 
            // insert tab item right before the last (+) tab item
            _tabItems.Insert(count - 1, tab);
            return tab;
        private void _tabAdd_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
            TabItem newTab = this.AddTabItem();
            // clear tab control binding
            tabDynamic.DataContext = null;
            // bind tab control
            tabDynamic.DataContext = _tabItems;
            tabDynamic.SelectedItem = newTab;
        private void Canvas_Paint(ref Canvas canvas1)
            int count = _tabItems.Count;
            switch (count)
                case 0:
                    canvas1.Background = Brushes.Green;
                    break;
                case 1:
                    canvas1.Background = Brushes.Red;
                    break;
                case 2:
                    canvas1.Background = Brushes.Blue;
                    break;
                case 3:
                    canvas1.Background = Brushes.Yellow;
                    break;
                case 4:
                    canvas1.Background = Brushes.Brown;
                    break;
                case 5:
                    canvas1.Background = Brushes.Orange;
                    break;
                case 6:
                    canvas1.Background = Brushes.Olive;
                    break;
                default:
                    break;
        private void tabDynamic_SelectionChanged(object sender, SelectionChangedEventArgs e)
      // this is a dummy method
 and the xaml
<Window x:Class="WPFDynamicTab.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Dynamic Tab" Height="300" Width="527" WindowStartupLocation="CenterScreen">
    <Grid>
        <TabControl Name="tabDynamic" ItemsSource="{Binding}" SelectionChanged="tabDynamic_SelectionChanged">
            <TabControl.Resources>
                <DataTemplate x:Key="TabHeader" DataType="TabItem">
                    <DockPanel>
                        <TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType=TabItem }, Path=Header}" />
                    </DockPanel>
                </DataTemplate>
            </TabControl.Resources>
        </TabControl>
    </Grid>
</Window>
The program does the job but there are 2 questions. I am using a scrollviewer and each time the tab increases the canvas size increases and this is reflected in the scrollview bar getting shorter.
Question 1)
I set the scrollview1 height to  200 ,which was obtained by trial and error, increasing causes the extents to go outside the box etc,
the window height was 300 , is it possible to automatically set the scrollviewer height.
Question 2)
Is it possible to  put the canvas and scrollviewer into the XAML I tried but  failed
Note: the relevent code to the above questeions is between XXXXX... and YYYY...

Answer 1

>>the window height was 300 , is it possible to automatically set the scrollviewer height.
You should not specify an explicit height if you want an element to fill the available space. Just set the VerticalAlignment property to Strecth (which is the default value for a ScrollViewer:
Canvas_Paint(ref canvas1); // Canvas_Paint defines the background color of "canvas1"
scrollview1.VerticalAlignment = VerticalAlignment.Stretch;
canvas1.Height = 400 + 400 * count;
scrollview1.Content = canvas1;
tab.Content = scrollview1;
//YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY
// insert tab item right before the last (+) tab item
_tabItems.Insert(count - 1, tab);
return tab;
>>Is it possible to  put the canvas and scrollviewer into the XAML I tried but  failed
Well, you could define the ScrollViewer, i.e. the root element, as a resource and then add access it from the AddTabItem() method like this:
<Window x:Class="WPFDynamicTab.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Dynamic Tab" Height="300" Width="527" WindowStartupLocation="CenterScreen">
<Window.Resources>
<ScrollViewer x:Key="sv" x:Shared="false">
<Canvas Height="800">
</Canvas>
</ScrollViewer>
</Window.Resources>
<Grid>
<TabControl Name="tabDynamic" ItemsSource="{Binding}" SelectionChanged="tabDynamic_SelectionChanged">
<TabControl.Resources>
<DataTemplate x:Key="TabHeader" DataType="TabItem">
<DockPanel>
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType=TabItem }, Path=Header}" />
</DockPanel>
</DataTemplate>
</TabControl.Resources>
</TabControl>
</Grid>
</Window>
private TabItem AddTabItem()
int count = _tabItems.Count;
// create new tab item
TabItem tab = new TabItem();
tab.Header = string.Format("Tab {0}", count);
tab.Name = string.Format("tab{0}", count);
tab.HeaderTemplate = tabDynamic.FindResource("TabHeader") as DataTemplate;
// add controls to tab item, this case I added just a canvas
ScrollViewer scrollview1 = this.Resources["sv"] as ScrollViewer;
Canvas canvas1 = scrollview1.Content as Canvas;
canvas1.Name = "canvas1";
Canvas_Paint(ref canvas1); // Canvas_Paint defines the background color of "canvas1"
scrollview1.VerticalAlignment = VerticalAlignment.Stretch;
canvas1.Height = 400 + 400 * count;
scrollview1.Content = canvas1;
tab.Content = scrollview1;
// insert tab item right before the last (+) tab item
_tabItems.Insert(count - 1, tab);
return tab;
It may not provide that much benefits in this scenario though since you are setting the height and the background of the Canvas dynamically but it is indeed possible.
Hope that helps.
Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question.