Splitter Tab Text Orientation - Solution

4 posts, 0 answers
  1. richard
    richard avatar
    38 posts
    Member since:
    May 2011

    Posted 03 Jan 2012 Link to this post

    I ran into the Tab Text orientation problem with Google Chrome and firefox.

    I noticed the suggestion using images instead of text for the tab Titles.

    My tab titles are dynamic and created at run time so that poses a challenge.

    I am submitting here my solution that creates the images on the fly!!

    There are a couple of problems though:
    1/The images are not transparent.
    2/I have tried to get the image to use the forecolor of the tabs theme, but this always seems to be 0 (black).

    Can anyone help fix with these two problems?

    Here is how it works:

    A/   Create an aspx page that will convert the text to an image:
            (this is a pretty handy code in itself and is based on this link:http://911-need-code-help.blogspot.com/2009/02/create-text-images-on-fly-with-aspnet.html)
        Create a new page name it TextToImage.aspx 

            Here is the code behind :
    protected void Page_Load(object sender, EventArgs e)
                //Usage example
                string qText;
                qText = Request.QueryString["text"] + "";
                if (qText.Length == 0)
                    qText = "-";
                int qSize;
                    qSize = Convert.ToInt32(Request.QueryString["size"]);
                    qSize = 0;
                if (qSize < 8)
                    qSize = 8;
                string qColor;
                qColor = Request.QueryString["color"] + "";
                if (qColor.Length == 0 || Regex.IsMatch(qColor, "^[0-9A-F]{6}$", RegexOptions.IgnoreCase) == false)
                    qColor = "000000";
                // CALL FUNCTION
                RenderGraphic(qText, qSize, qColor);
            private void RenderGraphic(string pText, int pSize, string pColor)
                Bitmap b = new Bitmap(1, 1);
                Graphics g = Graphics.FromImage(b);
                Font f = new Font("Arial", pSize);
                int w = Convert.ToInt32(g.MeasureString(pText, f).Width);
                int h = Convert.ToInt32(g.MeasureString(pText, f).Height);
                // RENDER DRAWING
                b = new Bitmap(w, h);
                g = Graphics.FromImage(b);
                g.Clear(Color.FromArgb(255, 255, 255, 204));//Color.FromArgb(&HFF, &HFF, &HFF, &HCC)
                g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.SingleBitPerPixelGridFit;
                g.DrawString(pText, f, new SolidBrush(ColorTranslator.FromHtml("#" + pColor)), 0, 0);
                // SAVE IN MEMORY
                MemoryStream m = new MemoryStream();
                b.Save(m, ImageFormat.Gif);
                // APPLY TRANSPARENCY HACK
                byte[] n;
                n = m.ToArray();
                //n[787] = 254;
                // SEND TO BROWSER
                BinaryWriter o = new BinaryWriter(Response.OutputStream);

    The ASPX needs no content.

    B/ The next step is to iterate through the tabs and apply the image URL:
          Here is my implemenation, my sliding zone is called 'ExploreSlidingZone' so you will need to change that to your own sliding zone name.
    Call this function from code behind page_Load method.
    private void TabsTextToImage()
            // chrome & firefox can;t rotate text so we have to convert the tab text to image
            // and set the tabs to image only
            foreach (RadSlidingPane mypane in ExploreSlidingZone.GetPanes())
                mypane.TabView = SplitterSlidePaneTabView.ImageOnly;
                mypane.IconUrl = "TextToImage.aspx?size=" + mypane.Font.Size + "&text=" + mypane.Title + "&color=" + mypane.ForeColor.GetHashCode();

    Please see attached for a snapshot of the result.

    You should see your tabs with images, but they are not transparent and do not inherit the skin properties.

    So if we can solve the transparency & skin issues - we will have a result!!

    Best Regards

    Richard Briggs

  2. richard
    richard avatar
    38 posts
    Member since:
    May 2011

    Posted 03 Jan 2012 Link to this post

    Added a little check so we only convert to images if not IE in page_Load, thought it might be useful:

    // If not IE then convert tab titles to images
            if (!Page.IsPostBack && Request.Browser.Type.ToString().Substring(0, 2) != "IE")

    Problems with transparency/font still remain.

    I tried changing the graphics clear function to :

    However this has the effect of making the title black, unless somehow it is transparent and the sliding zone or pane has a black background - but I don't think it does in my case.

  3. Dobromir
    Dobromir avatar
    1633 posts

    Posted 04 Jan 2012 Link to this post

    Hi Richard,

    This is indeed very thoughtful solution. Thank you for sharing it with the community. After polishing it, would you mind posting it as a CodeLibrary?

    Now regarding the issues you've encountered:
    1. The problem with image transparency is due to the transparency provided by the GIF format. To be able to use color with alpha you need to use PNG image, and also, 255 set as value for the Alpha provides solid color. To make the image with transparent background you need to use 0 for Alpha.
    2. Regarding the font color - this can be a bit tricky. The font-color, font-name and font-size of the text for the Tabs is set using CSS. Nevertheless, you can set the specific values according to the Skin set to the RadSplitter. For your convenience I have prepared a table with the font definitions for all skins.
      Skin Name
      Font Color
      Font Size
      Font Family
       Black  #FFFFFF  10px  Segoe UI
       Default  #000000  10px  Segoe UI
       Forest  #000000  10px  Segoe UI
       Hay  #000000  10px  Segoe UI
       Metro  #FFFFFF  10px  Segoe UI
       Office2007  #000000  10px  Segoe UI
       Office2010Black  #FFFFFF  10px  Segoe UI
       Office2010Blue  #384E73  10px  Segoe UI
       Office2010Silver  #3B3B3B  10px  Segoe UI
       Outlook  #000000  10px  Segoe UI
       Simple  #000000  10px  Segoe UI
       Sitefinity  #000000  10px  Arial
       Telerik  #000000  10px  Segoe UI
       Sunset  #FFFFFF  10px  Segoe UI
       Transparent  #000000  10px  Tahoma
       Vista  #003399  10px  Segoe UI
       Web20  #FFFFFF  10px  Segoe UI
       WebBlue  #FFFFFF  10px  Segoe UI
       Windows7  #000000  10px  Segoe UI

    All the best,
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  4. richard
    richard avatar
    38 posts
    Member since:
    May 2011

    Posted 04 Jan 2012 Link to this post

    Hi Dobromir,

    many thanks for your comments..

    I was wondering if you or anyone fancied having a go at changing the TextToImage.aspx.cs code in line with your image format suggestions?

    Would it be possible to access the required font color without hardcoding, perhaps by referencing the selected skin somehow?

    Best Regards
    Richard Briggs
Back to Top