This is a migrated thread and some comments may be shown as answers.

Splitter Tab Text Orientation - Solution

3 Answers 69 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
richard
Top achievements
Rank 1
richard asked on 03 Jan 2012, 01:24 PM
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

3 Answers, 1 is accepted

Sort by
0
richard
Top achievements
Rank 1
answered on 03 Jan 2012, 04:27 PM
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.


0
Dobromir
Telerik team
answered on 04 Jan 2012, 03:00 PM
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
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
0
richard
Top achievements
Rank 1
answered on 04 Jan 2012, 04:04 PM
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
Tags
Splitter
Asked by
richard
Top achievements
Rank 1
Answers by
richard
Top achievements
Rank 1
Dobromir
Telerik team
Share this question
or