We are using Infragistics WinTab control (Infragistics version 11.2). Can you please let us know if it is possible to change the header appearance of the tab. We have attached here with a screenshot for the tab appearance we need in our application.
Hello,
There are several predefined styles for the utlraTabControl and you have to use one of them. After that you have the flexibility to style the tabs the way you want. To achieve the appearance close to the one on the picture, I can suggest altering the folloring properties:
I created a small sample for you with this settings applied. Please let me know if this meets your requirements.
Hi Vasil,Thanks for your prompt reply.
We have gone through your sample code however,we need to achieve the tab header style with no border, and should include cut like mark on the active tab and a separate label for number and text as shown in the image above (i.e., WizardTab.png).
Further we tried setting the background image to the header tab as suggested by you. However, the problem we encountered in this is that when we resize the form the image of the tab and the background image gets stretched. As per our requirement we want the "^" icon on the tab (displayed on the bottom center of the tab header) to be in the middle position of the tab header. Just wanted to know is there any other way we can change the style of the tab header, instead of changing the background image. Also is there any way for us to create a custom tab header style (as displayed in our screenshot)?Please find attached the sample code in which we tried setting the background image.
We have also attached herewith a new screenshot "Wizardtab2.png"(image included in zip file), can you please let us know if it is possible achieve this appearance.
Is any others wizard like control available for Windows form which would provide us the similar appearance.
Hi,
I updated the sample and almost achieved the appearance from your first screenshot "Wizardtab.png". I used 2 different images for the Appearance and ActiveAppearance of each tab and also used the AppStylistRuntime to set some of the other properties like Font for Normal and Selected state of the tab. All the settings can be done without the use of AppStylist, but it makes the styling much easier. There is a button under Tab 2, which opens the RunTimeAppstylist. If you are not familiar with it, here is a getting started video:
http://es.infragistics.com/products/windows-forms/appstylist/videos/appstylistruntime-getting-started
I removed the Border of the header by setting the Border for the tab to Transparent in the RunTimeAppstylist. And with a little more effort the appearance from the screenshot can be achieved exactly. The same is with the second screenshot.
Please feel free to let me know if that works for you or if you have any other questions.
Hi Vasil,Thanks for your reply,
The design which you have provided was very helpful, we have almost reached close to the tab header appearance as we require.
The only problem we are facing now is that aligning the number image which appears to be too close from the left margin. Is it possible to give a defined space between left margin and number image(image #1), as well as number image and tab header text (image #2). Also selecting the tab it shows a dotted selection (image #3); is there any property to remove it in selected appearance. We have attached herewith a screenshot (WizardTab3.png) showing the changes we require. Please review the same and let us know is there any property to achieve these changes.
Hi rhealsoftTakeoff,
I believe that this could be achieved using a CreationFilter.
Please try the following code for the 'Form1.cs' class:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using Infragistics.Win;
using Infragistics.Win.UltraWinTabControl;
namespace TabHeaderAppearance
{
public partial class Form1 : Form
public Form1()
InitializeComponent();
Infragistics.Win.AppStyling.StyleManager.Load("..//..//CustomStyleSet.isl");
ultraTabControl1.CreationFilter = new CF();
}
private void Form1_Load(object sender, EventArgs e)
ultraTabControl1.UseOsThemes = DefaultableBoolean.False;
ultraTabControl1.Style = UltraTabControlStyle.PropertyPageSelected ;
ultraTabControl1.MinTabWidth = 120;
private void ultraButton1_Click(object sender, EventArgs e)
this.appStylistRuntime1.ShowRuntimeApplicationStylingEditor(this, "Styling Tabs");
class CF : IUIElementCreationFilter
public void AfterCreateChildElements(UIElement parent)
if(parent is Infragistics.Win.ImageAndTextUIElement.ImageAndTextDependentImageUIElement)
parent.Offset(5, 0);
public bool BeforeCreateChildElements(UIElement parent)
return false;
Please do not hesitate to contact me if you need any additional assistance.
I wanted to know if you were able to solve your issue based on these suggestions or you still need help. Please let me know.
I am glad to hear this!
Please feel free to let me know if a question about our tool set comes up on your mind.
Hi Boris,Thank you for your reply.
We have finally achieved the tab appearance as we required. Your code was really helpful in aligning the image and additionally we were also able to use the same for aligning the text as well by implementing the "ImageAndTextDependentTextUIElement". And for removing dotted selection appearance we have set the "tabstop" property to "false".
If further any thing else is required then we'll surely let you know.