Drawing Text on Windows Aero Glass

Post Reply
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Drawing Text on Windows Aero Glass

Post by Click16 »

If you have followed my tutorial Here We extended Windows Glass into from the non-client area, into the client area. But soon after experimenting for a while, you will notice some issues. If you add a label to the glass area, it will get the glass effect applied to it.

Image

To fix this issue, we need to use a label, but only as a reference. I will take you through the steps.

Section 1: Drawing Text on Glass

1) Add a button and customize the label to what you want. (Font and text wise. don't worry about the background color, or fore color.)

Image

2) Set the label to not be visible. Double-Click the button to go to it's Click event.

Add this code:

Code: Select all

            this.Refresh();
            //Create Graphics
            Graphics g = this.CreateGraphics();
            //Creating a Graphics Path
            GraphicsPath DrawTextOnGlass = new GraphicsPath();
            //Creating a Solid White Brush
            SolidBrush brush = new SolidBrush(Color.White);
So you will end up like this:

Code: Select all

        private void button1_Click(object sender, EventArgs e)
        {
            this.Refresh();
            //Create Graphics
            Graphics g = this.CreateGraphics();
            //Creating a Graphics Path
            GraphicsPath DrawTextOnGlass = new GraphicsPath();
            //Creating a Solid White Brush
            SolidBrush brush = new SolidBrush(Color.White);

        }
Now you need to add the following code:

Code: Select all

            //Adding text to DrawTextOnGlass
            DrawTextOnGlass.AddString(label1.Text, this.label1.Font.FontFamily, Convert.ToInt32(this.label1.Font.Style), label1.Size.Height - label1.Font.SizeInPoints / 2 - 2, label1.Location, StringFormat.GenericDefault);
        
            //Setting the Smoothing mode
            g.SmoothingMode = SmoothingMode.HighQuality;
            g.FillPath(brush, DrawTextOnGlass);

            //Disposing Objects
            g.Dispose();
            DrawTextOnGlass.Dispose();
            brush.Dispose();
So now you should end up with an event similar to this.

Code: Select all

        private void button1_Click(object sender, EventArgs e)
        {
            this.Refresh();
            //Create Graphics
            Graphics g = this.CreateGraphics();
            //Creating a Graphics Path
            GraphicsPath DrawTextOnGlass = new GraphicsPath();
            //Creating a Solid White Brush
            SolidBrush brush = new SolidBrush(Color.White);

            //Adding text to DrawTextOnGlass
            DrawTextOnGlass.AddString(label1.Text, this.label1.Font.FontFamily, Convert.ToInt32(this.label1.Font.Style), label1.Size.Height - label1.Font.SizeInPoints / 2 - 2, label1.Location, StringFormat.GenericDefault);
        
            //Setting the Smoothing mode
            g.SmoothingMode = SmoothingMode.HighQuality;
            g.FillPath(brush, DrawTextOnGlass);

            //Disposing Objects
            g.Dispose();
            DrawTextOnGlass.Dispose();
            brush.Dispose();
        }
Now when you Debug, you will see the text appear correctly.

Image

That is the First method. Now you might want to have an elliptic region behind the text. To do this, you need to follow the next section.

Section 2: Adding Ellipse Behind Text

1) Go to Button 2's Click event and add this code:

Code: Select all

            this.Refresh();
            //Referencing Label 1 and it's Point and Location to make it easier to edit
            Label nl = new Label();
            nl = label1;
            Point NewPoint = new Point(nl.Location.X - 5, 
                nl.Location.Y);
            Size NewSize = new Size(nl.Width, 
                Convert.ToInt32(nl.Font.SizeInPoints + 10));

So now you have this:

Code: Select all

        private void button2_Click(object sender, EventArgs e)
        {
            this.Refresh();
            //Referencing Label 1 and it's Point and Location to make it easier to edit
            Label nl = new Label();
            nl = label1;
            Point NewPoint = new Point(nl.Location.X - 5, 
                nl.Location.Y);
            Size NewSize = new Size(nl.Width, 
                Convert.ToInt32(nl.Font.SizeInPoints + 10));
        }
3) Add this code:

Code: Select all

            //Create Graphics
            Graphics g = this.CreateGraphics();
            //Creating a Graphics Path
            GraphicsPath path = new GraphicsPath();
            //Creating a Font Path
            GraphicsPath fontpath = new GraphicsPath();

Now you should have this:

Code: Select all

        private void button2_Click(object sender, EventArgs e)
        {
            this.Refresh();
            //Referencing Label 1 and it's Point and Location to make it easier to edit
            Label nl = new Label();
            nl = label1;
            Point NewPoint = new Point(nl.Location.X - 5, 
                nl.Location.Y);
            Size NewSize = new Size(nl.Width, 
                Convert.ToInt32(nl.Font.SizeInPoints + 10));

            //Creating Eliptic Region Rectangle
            Rectangle rect = new Rectangle(NewPoint, NewSize);


            //Create Graphics
            Graphics g = this.CreateGraphics();
            //Creating a Graphics Path
            GraphicsPath path = new GraphicsPath();
            //Creating a Font Path
            GraphicsPath fontpath = new GraphicsPath();
        }

4) Add another set of code:

Code: Select all

            fontpath.AddString(label1.Text, label1.Font.FontFamily,
                Convert.ToInt32(label1.Font.Style),
                label1.Size.Height - label1.Size.Height / 4, label1.Location,
                StringFormat.GenericDefault);

            //Adding Elipse
            path.AddEllipse(rect);

            //Creating Path Gradient Brush
            PathGradientBrush Pgb = new PathGradientBrush(path);

And once again you should have this:

Code: Select all

        private void button2_Click(object sender, EventArgs e)
        {
            this.Refresh();
            //Referencing Label 1 and it's Point and Location to make it easier to edit
            Label nl = new Label();
            nl = label1;
            Point NewPoint = new Point(nl.Location.X - 5, 
                nl.Location.Y);
            Size NewSize = new Size(nl.Width, 
                Convert.ToInt32(nl.Font.SizeInPoints + 10));

            //Creating Eliptic Region Rectangle
            Rectangle rect = new Rectangle(NewPoint, NewSize);


            //Create Graphics
            Graphics g = this.CreateGraphics();
            //Creating a Graphics Path
            GraphicsPath path = new GraphicsPath();
            //Creating a Font Path
            GraphicsPath fontpath = new GraphicsPath();

            fontpath.AddString(label1.Text, label1.Font.FontFamily,
                Convert.ToInt32(label1.Font.Style),
                label1.Size.Height - label1.Size.Height / 4, label1.Location,
                StringFormat.GenericDefault);

            //Adding Elipse
            path.AddEllipse(rect);

            //Creating Path Gradient Brush
            PathGradientBrush Pgb = new PathGradientBrush(path);
        }
5) And finally add this final set of code:

Code: Select all

            //Setting the Color
            Color[] c = { (Color.Transparent) };

            //Setting the Smoothing mode
            g.SmoothingMode = SmoothingMode.HighQuality;
            //Setting the Center Color to white
            Pgb.CenterColor = Color.FromArgb(255, Color.White);
            //Setting the Surrounding Color to Color c
            Pgb.SurroundColors = c;
            //Adding the Elipse to rect
            g.FillEllipse(Pgb, rect);
            //Adding the Text to g
            g.FillPath(Brushes.Black, fontpath);

You should now have this:

Code: Select all

        private void button2_Click(object sender, EventArgs e)
        {
            this.Refresh();
            //Referencing Label 1 and it's Point and Location to make it easier to edit
            Label nl = new Label();
            nl = label1;
            Point NewPoint = new Point(nl.Location.X - 5, 
                nl.Location.Y);
            Size NewSize = new Size(nl.Width, 
                Convert.ToInt32(nl.Font.SizeInPoints + 10));

            //Creating Eliptic Region Rectangle
            Rectangle rect = new Rectangle(NewPoint, NewSize);


            //Create Graphics
            Graphics g = this.CreateGraphics();
            //Creating a Graphics Path
            GraphicsPath path = new GraphicsPath();
            //Creating a Font Path
            GraphicsPath fontpath = new GraphicsPath();

            fontpath.AddString(label1.Text, label1.Font.FontFamily,
                Convert.ToInt32(label1.Font.Style),
                label1.Size.Height - label1.Size.Height / 4, label1.Location,
                StringFormat.GenericDefault);

            //Adding Elipse
            path.AddEllipse(rect);

            //Creating Path Gradient Brush
            PathGradientBrush Pgb = new PathGradientBrush(path);

            //Setting the Color
            Color[] c = { (Color.Transparent) };

            //Setting the Smoothing mode
            g.SmoothingMode = SmoothingMode.HighQuality;
            //Setting the Center Color to white
            Pgb.CenterColor = Color.FromArgb(255, Color.White);
            //Setting the Surrounding Color to Color c
            Pgb.SurroundColors = c;
            //Adding the Elipse to rect
            g.FillEllipse(Pgb, rect);
            //Adding the Text to g
            g.FillPath(Brushes.Black, fontpath);
        }
Now set up your label anyway you want. It will stretch the ellipse correctly.

Image

Now Go ahead and have fun! Thanks for reading this, and Goodbye.
Image
Top
Post Reply

Return to “Tutorials”