The Artima Developer Community
Sponsored Link

.NET Buzz Forum
Translucent Gel Buttons in VG.net

0 replies on 1 page.

Welcome Guest
  Sign In

Go back to the topic listing  Back to Topic List Click to reply to this topic  Reply to this Topic Click to search messages in this forum  Search Forum Click for a threaded view of the topic  Threaded View   
Previous Topic   Next Topic
Flat View: This topic has 0 replies on 1 page
Frank Hileman

Posts: 95
Nickname: frankhil
Registered: May, 2004

Frank Hileman is the lead developer for VG.net, a fast vector graphics system for .net developers.
Translucent Gel Buttons in VG.net Posted: May 26, 2004 5:53 PM
Reply to this message Reply

This post originated from an RSS feed registered with .NET Buzz by Frank Hileman.
Original Post: Translucent Gel Buttons in VG.net
Feed Title: Frank Hileman's Blog
Feed URL: http://weblogs.asp.net/frank_hileman/rss?containerid=13
Feed Description: Vector Graphics with VG.net, MyXaml, and Visual Studio Integration
Latest .NET Buzz Posts
Latest .NET Buzz Posts by Frank Hileman
Latest Posts From Frank Hileman's Blog

Advertisement

Translucent Buttons Built with VG.net

Download the TransparentButton executable (source code in next public release).

In this article, I explain how to create a translucent (or transparent) gel button component in VG.net. This gel button is pure vector graphics; no bitmaps are used.

Gel buttons are easy. The hard part is the artistry – how to get the right “look.” I used the Picture designer integrated in Visual Studio .NET to create this button.

First, we add a Picture to the project, called TransparentButton. Then we add each visual component of the button to the Picture, and style each one. Finally, we add custom properties and behavior.

There are three rounded rectangles in TransparentButton:

  • background: the body, containing the most color, and the text displayed.
  • highlight: provides a light gradient from the top down.
  • shine: a shiny reflection of the light sources near the top.

The background rectangle delimits the bounds of the TransparentButton:

Background

The highlight provides some of the lighting effect. You can do this with a Path, but a rectangle works well enough. The highlight has the same corner radius as the background, but is much smaller vertically, and offset slightly from the upper left corner of the background. Fill the rectangle with a gradient that fades to transparent at the bottom:

Highlight

The shine is the most “artsy” part. It is even smaller than the highlight, and offset even further from the upper left. It also fades to transparent:

Shine

Each component has a corresponding Style object defined. To change the look when the mouse hovers over the button, we define a Style named “HoverBackground”. A Style named “DownBackground” is used when the mouse is pressed down on the button:

Styles

Here is the mouse event code to change Styles:

Button Event Handlers

To enable a TransparentButton user to change the button text, we provide a Text property:

Button Text Property

We do not want a TransparentButton to be scaled when it is resized in the designer. We can override the new function, SetBoundsCore, to provide a custom resizing algorithm. Note that this function is not available in beta 1.7:

SetBoundsCore Function

A close-up of the complete TransparentButton:

Complete Button

Read: Translucent Gel Buttons in VG.net

Topic: Pluralsight live! Previous Topic   Next Topic Topic: May Whidbey Technical Preview

Sponsored Links



Google
  Web Artima.com   

Copyright © 1996-2019 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use