Like any other visual window, the tab control uses such properties as the the Location (Right and Top values), the Size (Width and Height values), the tab stop (TabStop), the tab index (TabIndex), the cursor (Cursor), etc. After adding the TabControl control to your form and after adding one or more tab pages, the property pages are created where the TabControl control is positioned and their dimensions are used by the tab control. This means that, if you want a different position, a smaller or larger property sheet, you must modify the dimensions of the TabControl control and not those of the tab pages, even though each tab page has a Location property and dimensions (the Size property). To programmatically find out the location and size of a tab control, the TabControl class is equipped with a property named DisplayRectangle that produces a Rectangle value. Here is an example of using it: System::Void Form1_Load(System::Object^ sender, System::EventArgs^ e) { Rectangle rctLocationSize = tabControl1->DisplayRectangle; textBox1->Text = rctLocationSize.Left.ToString(); textBox2->Text = rctLocationSize.Top.ToString(); textBox3->Text = rctLocationSize.Width.ToString(); textBox4->Text = rctLocationSize.Height.ToString(); }
Probably the first obvious characteristic of a tab page is the word or string that identifies it to the user. That is, the string that displays on the tab of a property page. This is known as its title or its caption. If you create your tab pages at design time, by default, the captions are set cumulatively as the pages are added. Usually you will not use these titles because they are meaningless. To display a custom title for a property page, on the form, select the tab control:
To programmatically change the title of a property page, assign a string to its Text property. Here is an example: public ref class CExercise : public Form { private: TabControl ^ tclPropertySheet; TabPage ^ pgeController; public: CExercise() { InitializeComponent(); } void InitializeComponent() { Size = System::Drawing::Size(345, 228); tclPropertySheet = gcnew TabControl; tclPropertySheet->Location = Point(14, 16); tclPropertySheet->Size = System::Drawing::Size(310, 170); pgeController = gcnew TabPage; pgeController->Text = L"Controller"; tclPropertySheet->Controls->Add(pgeController); Controls->Add(tclPropertySheet); } }; This would produce:
When the user positions the mouse on a tab, you can (slightly) change the color of the caption to blue. To support this, the TabControl class is equipped with the HotTrack Boolean property. Its default value is False. At design time, to specify this value, select the control and, in the Properties window, select the desired option of the HotTrack field. To programmatically set this property, assign the true or false value to the property. Here is an example: public ref class CExercise : public Form { private: TabControl ^ tclPropertySheet; public: CExercise() { InitializeComponent(); } void InitializeComponent() { Size = System::Drawing::Size(270, 165); tclPropertySheet = gcnew TabControl; tclPropertySheet->Location = Point(10, 10); tclPropertySheet->Size = System::Drawing::Size(240, 120); tclPropertySheet->HotTrack = true; Controls->Add(tclPropertySheet); } };
When you specify the caption of a tab page, the string displays from the left to the right side of the tab area. If you want, you can specify how much space should be left empty on the left side of the caption. This space is referred to as padding. To support this, the TabControl class is equipped with a property named Padding. The Padding property is of type Point. During design, to specify the amount of padding, select the tab control on the form. In the Properties window, click the + button of the Padding field, type the desired amounts of the X and the Y values. To programmatically specify the padding amount, assign a Point value to the Padding property of your TabControl object.
A tab is meant to show a relatively short caption that indicates to the user what the tab page contains. If you want to provide more information, you can display a more explicit tool tip that would display when the user positions the mouse on the tab. To support the tooltips on tabs, the TabControl class is equipped with a Boolean property named ShowToolTips. Therefore, if you want the tabs to displays the tool tips, first set this property to True. To show a tool tip on a tab, select it on the tab control and, in the Properties window, enter a string in the ToolTipText field.
Besides, or instead of, the caption, you can display an icon on the tab of one or more or some selected tabs of your control. To start, you should create an image list and add some images or icons to it. After creating the image list, to associate it with the tab control, on the form, select the control. In the Properties window, click the arrow of the ImageList field and select the image list. To specify the image list with code, first create the image list, visually or programmatically. To associate the image list with the tab control, assign the name of the image list to the ImageList property of the tab control. Here is an example: To visually specify the image to display on a tab:
Before programmatically using the images on a tab control, you must first create an ImageList object and then assign it to the tab control. Here is an example: public ref class CExercise : public Form { private: TabControl ^ tclPropertySheet; ImageList ^ lstImages; public: CExercise() { InitializeComponent(); } void InitializeComponent() { Size = System::Drawing::Size(345, 228); tclPropertySheet = gcnew TabControl; tclPropertySheet->Location = Point(14, 16); tclPropertySheet->Size = System::Drawing::Size(310, 170); lstImages = gcnew ImageList; lstImages->Images->Add(Image::FromFile(L"E:\\Programs\\image1.jpg")); lstImages->Images->Add(Image::FromFile(L"E:\\Programs\\Image2.jpg")); lstImages->Images->Add(Image::FromFile(L"E:\\Programs\\Image3.jpg")); tclPropertySheet->ImageList = lstImages; Controls->Add(tclPropertySheet); } }; After assigning an image list to the tab control, to programmatically specify the image to display on a tab, assign an index from an ImageList object to the tab page. To support this, the TabPage class is equipped with a property named ImageIndex that is of type int. Here is an example: public ref class CExercise : public Form { private: TabControl ^ tclPropertySheet; TabPage ^ pgeController; TabPage ^ pgeAccount; TabPage ^ pgeSummary; ImageList ^ lstImages; public: CExercise() { InitializeComponent(); } void InitializeComponent() { Size = System::Drawing::Size(345, 228); tclPropertySheet = gcnew TabControl; tclPropertySheet->Location = Point(14, 16); tclPropertySheet->Size = System::Drawing::Size(310, 170); lstImages = gcnew ImageList; lstImages->Images->Add(Image::FromFile(L"E:\\Programs\\image1.jpg")); lstImages->Images->Add(Image::FromFile(L"E:\\Programs\\image2.jpg")); lstImages->Images->Add(Image::FromFile(L"E:\\Programs\\image3.jpg")); tclPropertySheet->ImageList = lstImages; pgeController = gcnew TabPage; pgeController->Text = L"Controller"; pgeController->ImageIndex = 1; tclPropertySheet->Controls->Add(pgeController); pgeAccount = gcnew TabPage; pgeAccount->Text = L"Account"; pgeAccount->ImageIndex = 2; tclPropertySheet->TabPages->Add(pgeAccount); pgeSummary = gcnew TabPage; pgeSummary->Text = L"Summary"; pgeSummary->ImageIndex = 0; tclPropertySheet->TabPages->Add(pgeSummary); Controls->Add(tclPropertySheet); } }; Here is an example of what this would produce:
If you have many tab pages and the width of the tab control cannot show all tabs at the same time, the control would add two navigation arrows to its top right corner to let the user know that there are more property pages:
By default, the navigation buttons would come up because the control uses a property that controls their availability. If you do not want the navigation arrows, select the tab control and, in the Properties window, set the MultiLine property to True. This would create cascading tabs and the user can simply select the desired property page from its tab:
Of course, you can also do this programmatically by assigning the TabControl::MultiLine to true. After setting the MultiLine property to true, depending on the number of tab pages, the control may have 2, 3 or more rows. To find out the number of rows that the tab control contains, you can get the value of the RowCount property of the TabControl class. This property is of type int.
When you specify the caption of a property page, its is resized to accommodate the string. This means that the tab would get enlarged or narrowed, depending on the length of the caption. As an alternative, you can make all tabs use the same width. To support this, the TabControl class is equipped with a property named SizeMode. The SizeMode property is based on the TabSizeMode enumeration that has three members: Normal (the default), Fixed, and FillToRight. To control the size mode at design time, on the form, select the tab control. In the Properties window, click SizeMode and select the desired option: Normal: Each tab would be resized to fit its caption:
Fixed: The designer would find out what tab has the longest caption. It would then use that length as the common width of all the other tabs:
If the tab control's MultiLine property is set to true, the designer would get the length of the longest string of the first (top) row:
That length would be used as the common length to all the tabs on all rows:
FillToRight: This option is valid only if the MultiLine property is set to true. With this option, the tabs on each row would be resized so that the total length of the rows fit the width of the tab control:
Besides, or in addition to, the size mode, you can control the widths of the tab by specifying your own width. To do this, first set the SizeMode property to true. Then, use the ItemSize property of the tab control to specify how much width you want to apply to all tabs of the control.
As you are adding pages to a TabControl control, the tabs of the pages are positioned on the top border of the TabControl area. You can reposition them to the left, the right, or the bottom borders of the control. The placement of the tab is set using the Alignment property of the TabControl control. The possible values of this property are Top, Left, Right, and Bottom:
To support the alignment of the tabs of a property sheet, the TabControl class is equipped with a property named Alignment. This property is based on the TabAlignment enumeration and its members are Bottom, Left, Right, and Top. To programmatically control the alignment of the tabs, assign the desired value to the tab control. Here is an example: public ref class CExercise : public Form { private: TabControl ^ tclPropertySheet; public: CExercise() { InitializeComponent(); } void InitializeComponent() { tclPropertySheet = gcnew TabControl; tclPropertySheet->Location = Point(14, 16); tclPropertySheet->Size = System::Drawing::Size(310, 170); tclPropertySheet->Alignment = TabAlignment::Left; Controls->Add(tclPropertySheet); } };
If you want to create a discrete property sheet and do not want to display the traditional tabs, you can replace the tabs with buttons. This is controlled by the Appearance property that presents three options: Normal (the default), Buttons, and FlatButtons. The Normal and the Buttons values can be used on all four views. The FlatButtons option is available only if the Alignment property is set to Top.
To support the option of showing tabs or buttons, the TabControl class is equipped with the Appearance property that is based on the TabAppearance enumeration. Therefore, to specify this option, assign the desired value to your TabControl object. Here is an example: public ref class CExercise : public Form { private: TabControl ^ tclPropertySheet; public: CExercise() { InitializeComponent(); } void InitializeComponent() { tclPropertySheet = gcnew TabControl; tclPropertySheet->Location = Point(14, 16); tclPropertySheet->Size = System::Drawing::Size(310, 170); tclPropertySheet->Appearance = TabAppearance::FlatButtons; Controls->Add(tclPropertySheet); } }; |
|
|||||||||||||||||||||||||||||||||||||||||||||
|