Splitter Tab Text Orientation - Solution

[richard]

Hi
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
            //TextToImage.aspx?size=100&text=Hello%20there&color=FF22F3

            //-------------------------------------------
            // CAPTURE + SANITIZE QUERYSTRING PARAMETERS
            //-------------------------------------------

            string qText;

            qText = Request.QueryString["text"] + "";
            if (qText.Length == 0)
                qText = "-";


            int qSize;
            try
            {
                qSize = Convert.ToInt32(Request.QueryString["size"]);
            }
            catch
            {
                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)
        {

            //-------------------------------------------
            // DECLARE VARIABLES + PRE-CALCULATE
            //-------------------------------------------

            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.Clear(Color.Transparent);


            g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.SingleBitPerPixelGridFit;
            g.DrawString(pText, f, new SolidBrush(ColorTranslator.FromHtml("#" + pColor)), 0, 0);
            g.Flush();

            b.RotateFlip(RotateFlipType.Rotate90FlipNone);
            //-------------------------------------------
            // 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);

            o.Write(n);
            o.Close();
        }

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

[richard]

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")
        {
            TabsTextToImage();
        }

Problems with transparency/font still remain.

I tried changing the graphics clear function to :

g.Clear(Color.Transparent);

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.

[Dobromir]

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,
Dobromir
the Telerik team

[richard]

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