Results 1 to 4 of 4

Thread: Custom TabPage/TabItem

Hybrid View

  1. #1

    Thread Starter
    Junior Member
    Join Date
    Apr 2010
    Posts
    26

    Custom TabPage/TabItem

    Hello,

    I have a TabControl on my main window and I would like it to have two types of tabs. One tab will have several textboxes on them. How do I create a general Tab Page. i.e. create an XAML file to go with my tab:
    Code:
    Public Class MyTab : Inherits TabItem
      CustomText_TextChanged(...)
    End Class
    
    Public Class CustomText : Inherits TextBox
    End Class

    Code:
    <Resource>
      <Type:MyTab>
         <CustomText Name="CT1"/>
         <CustomText Name="CT2"/>
      </Type:MyTab>
    </Resource>
    
    <MainTabControl>
      <MyTab Header="Custom Tab" />
    </MainTabControl>

    I am really bad at XAML, so the XAML part will have to be explained.
    Last edited by UWGRAD; Jun 7th, 2011 at 04:28 PM.

  2. #2
    PowerPoster Evil_Giraffe's Avatar
    Join Date
    Aug 2002
    Location
    Suffolk, UK
    Posts
    2,555

    Re: Custom TabPage/TabItem

    You don't really need to create special classes for each Tab page, you can define them in the TabControl itself:

    xml Code:
    1. <TabControl>
    2.     <TabItem Header="Custom Tab">
    3.         <StackPanel>
    4.             <TextBox x:Name="CT1"/>
    5.             <TextBox x:Name="CT2"/>
    6.         </StackPanel>
    7.     </TabItem>
    8.     <TabItem Header="Tab 2">
    9.         <Rectangle Fill="AntiqueWhite" Height="30" HorizontalAlignment="Stretch" />
    10.     </TabItem>
    11. </TabControl>

    What are you trying to achieve? Some kind of reuse of standard UI panels? You probably want to define a UserControl that represents the content of your tab page in that case, and then use that UserControl in your TabControl->TabItem XAML.

  3. #3

    Thread Starter
    Junior Member
    Join Date
    Apr 2010
    Posts
    26

    Re: Custom TabPage/TabItem

    The tabs are added dynamically and I need some code to run behind them, hence, I need a class.

  4. #4
    PowerPoster Evil_Giraffe's Avatar
    Join Date
    Aug 2002
    Location
    Suffolk, UK
    Posts
    2,555

    Re: Custom TabPage/TabItem

    The dynamic code - is it dealing with the behaviour of the tabs? If not, you can have the code-behind in the UserControl.

    To add a tab dynamically, bind the ItemsSource property of your TabControl to a Collection of objects that represent your tab pages. As you add/remove from this collection, the TabControl will add/remove tabs.

    For example, assuming this class as representing your tab pages:
    csharp Code:
    1. public class MyTabPageViewModel : INotifyPropertyChanged
    2. {
    3.     private string m_headerText;
    4.     private string m_customText1;
    5.     private string m_customText2;
    6.  
    7.     public string HeaderText
    8.     {
    9.         get { return m_headerText; }
    10.         set
    11.         {
    12.             if (m_headerText != value)
    13.             {
    14.                 m_headerText = value;
    15.                 OnPropertyChanged("HeaderText");
    16.             }
    17.         }
    18.     }
    19.  
    20.     public string CustomText1
    21.     {
    22.         get { return m_customText1; }
    23.         set
    24.         {
    25.             if (m_customText1 != value)
    26.             {
    27.                 m_customText1 = value;
    28.                 OnPropertyChanged("CustomText1");
    29.             }
    30.         }
    31.     }
    32.  
    33.     public string CustomText2
    34.     {
    35.         get { return m_customText2; }
    36.         set
    37.         {
    38.             if (m_customText2 != value)
    39.             {
    40.                 m_customText2 = value;
    41.                 OnPropertyChanged("CustomText2");
    42.             }
    43.         }
    44.     }
    45.  
    46.     #region Implementation of INotifyPropertyChanged
    47.  
    48.     protected virtual void OnPropertyChanged(string propertyName)
    49.     {
    50.         var handler = PropertyChanged;
    51.         if (handler != null)
    52.             handler(this, new PropertyChangedEventArgs(propertyName));
    53.     }
    54.  
    55.     public event PropertyChangedEventHandler PropertyChanged;
    56.  
    57.     #endregion
    58. }
    and that you have a window view model looking something like this:
    csharp Code:
    1. public class MyWindowViewModel
    2. {
    3.     private readonly ObservableCollection<MyTabPageViewModel> m_tabPages;
    4.     private readonly ReadOnlyObservableCollection<MyTabPageViewModel> m_readonlyTabPages;
    5.  
    6.     public MyWindowViewModel()
    7.     {
    8.         m_tabPages = new ObservableCollection<MyTabPageViewModel>();
    9.         m_readonlyTabPages = new ReadOnlyObservableCollection<MyTabPageViewModel>(m_tabPages);
    10.  
    11.         m_addTabCommand = new DelegateCommand(AddATab);
    12.         AddATab();
    13.         AddATab();
    14.     }
    15.  
    16.     private int i = 1;
    17.     private ICommand m_addTabCommand;
    18.  
    19.     private void AddATab()
    20.     {
    21.         MyTabPageViewModel myTabPageViewModel =
    22.             new MyTabPageViewModel()
    23.                 {
    24.                     HeaderText = string.Format("Tab Page {0}", i++)
    25.                 };
    26.  
    27.         m_tabPages.Add(myTabPageViewModel);
    28.     }
    29.  
    30.     public ReadOnlyObservableCollection<MyTabPageViewModel> TabPages
    31.     {
    32.         get { return m_readonlyTabPages; }
    33.     }
    34.  
    35.     public ICommand AddTabCommand
    36.     { get { return m_addTabCommand; } }
    37. }
    38. internal class DelegateCommand : ICommand
    39. {
    40.     private readonly Action m_onExecute;
    41.  
    42.     public DelegateCommand(Action onExecute)
    43.     {
    44.         m_onExecute = onExecute;
    45.     }
    46.  
    47.     #region Implementation of ICommand
    48.  
    49.     public void Execute(object parameter)
    50.     {
    51.         m_onExecute();
    52.     }
    53.  
    54.     public bool CanExecute(object parameter)
    55.     {
    56.         return true;
    57.     }
    58.  
    59.     public event EventHandler CanExecuteChanged;
    60.  
    61.     #endregion
    62. }

    Then you need to firstly define a template for what the tab page looks like:
    xml Code:
    1. <DataTemplate DataType="{x:Type local:MyTabPageViewModel}">
    2.     <StackPanel>
    3.         <TextBox Text="{Binding CustomText1}" />
    4.         <TextBox Text="{Binding CustomText2}" />
    5.     </StackPanel>
    6. </DataTemplate>
    (this is a default template, you might want to give it a key and then reference it explicitly in the TabControl...)
    Then you can bind you TabControl thus:
    xml Code:
    1. <TabControl ItemsSource="{Binding TabPages}">
    2.     <TabControl.ItemContainerStyle>
    3.         <Style TargetType="TabItem">
    4.             <Setter Property="Header" Value="{Binding HeaderText}" />
    5.         </Style>
    6.     </TabControl.ItemContainerStyle>
    7. </TabControl>
    This uses the TabPages property from the Window view model (that is set as the DataContext of the window) as the ItemsSource, so each TabItem in the TabControl gets an element from that collection as its DataContext. We use a style to define the Header property of each TabItem as bound to the HeaderText property of the TabPageViewModel so that we get the correct text in the header. The Content of each TabItem remains as the whole TabPageViewModel, which is rendered using the DatATemplate we defined earlier. The AddTabCommand can be wired up to a button on your window to test adding tab pages:
    xml Code:
    1. <Button Command="{Binding AddTabCommand}">Add a Tab</Button>

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width