Produits VirtuelsBest GPS

Visual Styles

Visual Styles

Postby Admin on Sat May 18, 2013 5:13 pm

Visual Styles

This project demonstrates how to create a Visual Styles screen so users can set their own colours and fonts. This is the same concept as skins or themes used in other software. This project is being created using Visual Basic .NET 2010.

1. First we start with a blank form...

Image

2. Then we start adding controls to the form...

Image

3. And some more controls...

Image

4. And some more controls and text so that we have a sample screen for the user to work with.

Image

To be continued... check back here later.

Kwame the Webmaster
Admin
Site Admin
 
Posts: 50
Joined: Sat Jun 21, 2008 3:55 pm

Understanding COLORS in VB.NET

Postby Admin on Sat May 18, 2013 8:09 pm

Understanding COLORS in VB.NET

Before proceeding, I think it is timely to explain how colours are implemented in Visual Basic .NET. Because the programming language uses the spelling COLOR (as opposed to COLOUR) I will stick to that spelling here because I am dealing with language specific concepts in this section.

DEFINITION OF COLORS

First of all, every color is represented by a combination of three numbers, and these three numbers represent Red, Green and Blue. They are therefore referred to as RGB color codes.

Red is a number in the range 0 to 255 that represents the intensity of the red component of the color.

Green is a number in the range 0 to 255 that represents the intensity of the green component of the color.

Blue is a number in the range 0 to 255 that represents the intensity of the blue component of the color.

In older versions of Visual Basic, a particular color could therefore be represented as RBG(135, 206, 250).

In Visual Basic 2010, this same color would be defined as Color.FromArgb(135, 206, 250)

http://msdn.microsoft.com/en-us/library/cce5h557.aspx

Visual Basic also makes life easy by having a large collection of named colors, such as Color.Black, Color.Red, Color.Gainsboro, Color.PaleGreen, Color.LightGreen, Color.Yellow, Color.MediumPurple, Color.MistyRose, etc. You can see the full list at the link below. Notice that even named colors have an RGB equivalent.

http://condor.depaul.edu/sjost/it236/documents/colorNames.htm

Please note that there is also a named color for transparent, called Color.Transparent, which can be used to create some very cool visual effects.

APPLYING COLORS

If you look at the images shown in the first section of this post, you will see various screen elements (or controls).

In Visual Basic, as a general rule, every screen and every element on it will have two colors: a BackColor which represents the background color, and a ForeColor which represents the text color. There are some special controls which have more than two colors, and there may also be a few which have a BackColor but no ForeColor because they never display any text.

Where there is a text box called txtID, for example, the BackColor and ForeColor would be set as follows...

txtID.BackColor = Color.White

txtID.ForeColor = Color.Black


or...

txtID.BackColor = Color.FromArgb(255, 255, 255)

txtID.ForeColor = Color.FromArgb(0, 0, 0)


When screens are designed, the programmer sets the colors he/she prefers. They can be set by coding the RGB colors directly, or by coding the named colors, but by far the easiest method is to use the Properties window of the Visual Basic form designer, which looks like this...

5. Properties Window

Image

6. Properties window with dropdown list of named colors displayed

Image

7. Properties window showing a custom color.

Image

When the BackColor of a component is set to Color.Transparent, it will use the same background color as the screen (or component) on which it is placed.

Now that you understand the basics of how this technology works, I can continue the process of showing you how it will be used to allow users to set their own colors.

Kwame the Webmaster.
Admin
Site Admin
 
Posts: 50
Joined: Sat Jun 21, 2008 3:55 pm

Adding the Colour Setting Controls

Postby Admin on Sat May 18, 2013 10:13 pm

Adding the Colour Setting Controls

The next step is to add the controls which will set the colours for the components. First we will need a section of the screen where they will be displayed, and I have added a control called a panel for this, docked on the right side of the screen.

8. Panel for colour controls

Image

On this panel I will place a dropdown list which will display the named colors. For the custom colors I will use a button which when clicked on will display the built-in Color Dialog window which comes with VB.NET.

9. Dropdown list for named colours and button for custom colours.

Image

10. Dropdown list of named colours activated.

Image

11. Color dialog window activated by clicking on the custom colours button.

Image

With these components added, the next step is to link them to the color settings of the sample screen and sample elements.

To be continued...

Kwame the Webmaster.
Admin
Site Admin
 
Posts: 50
Joined: Sat Jun 21, 2008 3:55 pm

Display Section List, Named Colours List Activated

Postby Admin on Sun May 19, 2013 11:38 am

Display Section List, Named Colours List Activated

On the control panel I have now added a list of the display sections, allowing the user to choose which section to set the colours for. Colors for most sections can now be changed using the named colours list.

12. Display Section list

Image

13. Background colour changed to pink using dropdown colour list.

Image

To be continued...

Kwame the Webmaster.
Admin
Site Admin
 
Posts: 50
Joined: Sat Jun 21, 2008 3:55 pm

Progressing Beautifully

Postby Admin on Sun May 19, 2013 6:38 pm

Things are progressing beautifully!

14. Display section modified to show selected colours.

Image

15. Closeup. Display section modified to show selected colours.

Image

Kwame the Webmaster.
Admin
Site Admin
 
Posts: 50
Joined: Sat Jun 21, 2008 3:55 pm

Visual Styles - DESIGN MODIFICATION

Postby Admin on Mon May 20, 2013 10:18 pm

The design has been modified due to some display problems and as a result I've got an improved layout. Here's what's been done since the last update...

16. A new list of display sections replaces the previous grid. This list is longer and resizes with the screen. What I mostly wanted was the colour cues, those little squares showing the selected colours for each display section, and with this switch they are displaying and refreshing perfectly.

Image

17. The dropdown list allowing the user to select a named colour.

Image

18. Closeup of the color control panel.

Image

19. Closeup of the color control panel, with the colour list dropped down.

Image

20. Background colour changed to Thistle using the dropdown colour list.

Image

21. Custom button clicked to display the custom colour dialog window. I've added code so that it automatically displays the current colour setting of Thistle.

Image

22. Colour dialog selecting a custom colour.

Image

23. Background changed to custom colour.

Image

This is working perfectly!

Next step: The list of display sections needs to be tidied up and expanded.

To be continued...

Kwame the Webmaster.
Admin
Site Admin
 
Posts: 50
Joined: Sat Jun 21, 2008 3:55 pm

Visual Styles - Border Control

Postby Admin on Sat May 25, 2013 11:47 am

BORDER CONTROL

Today I have my guns aimed at borders, and I'm going to show you some simple techniques to overpower Visual Basic .NET's rebellious default borders and bring them under the domination of your realm.

The humble border is a simple linear property which demarks the outer edges of a screen element. For the majority of the standard screen elements (or controls) which come with Visual Basic, there is a BorderStyle property which you are allowed to set to one of three choices: None, FixedSingle or Fixed3D. the image below shows three list boxes, each one with a different borderstyle. Though you can change the forecolor (text colour), backcolor (background colour) and BorderStyle of the listbox control, like many other standard controls which come with Visual Basic, you cannot change the border colour from the gray/black colours imposed by Microsoft.

Image

For this reason and others I have been using an alternative set of free controls from Qios DevSuite, which offer much more in terms of configuration and options than the standard VB.NET controls.

http://www.qiosdevsuite.com

While Qios DevSuite adds great value to my application, it does not have replacements for all the controls found in VB.NET, particularly the all-powerful grid (DataGridView) and convenient list box (ListBox) controls which are critical components to practially any sort of application which interacts with database records. In short, they are indispensible. But... they don't allow you to set a border colour.

WHY IS SETTING A BORDER COLOUR IMPORTANT?

For radical and fanatical programmers who are unrelentless about having the same look and feel across their applications, Microsoft's border colour limitations can bean unacceptable and unholy blot. Borders are often used to send colour cue signals to users... most often when a control has the focus (had been clicked on or selected). In my case, I have been using CadetBlue for my default border colours, and changing this to DarkOrange when the using moves to a selected field. This technique lends itself to visual ease of use. It becomes spoilt if the border colour of a control cannot be changed and therefore cannot conform with the master plan of the visual style. Border colours can also be used for other purposes, such as setting a red border for any field which is required and cannot be left blank. Once the user fills the field, the border can then revert to the standard "safe" colour.

SOLUTION: THE PANEL TECHNIQUE

One solution to this problem is to place the troublesome control inside a bordered control, and is documented at this link...

http://stackoverflow.com/questions/161513/winforms-color-datagridview-border

IT SUGGESTS: "Instead you could try turning off the border setting and then placing the DataGridView inside a Panel. Where the DataGridView is set to Dock.Fill and the Panel has a Padding of 1 pixel on all edges. Then setting the background color of the Panel will show as a border around the contained DataGridView."

I modified and refined this technique using a Qios DevSuite QPanel control, with the border width of the QPanel set to 1, the padding (left, top, right, bottom) set to (0, 0, 0, 0) and the background set to transparent (optional). The control was then dragged inside the QPanel, and I set the dock for the control to Fill and its Borderstyle to None. This worked perfectly when displayed, and by changing the border colour of the QPanel, it gave the desired appearance of the control having its own border.

Here are two controls with cadet blue borders...

Image

And here they are with dark orange borders...

Image

There was only one small problem from the forms designer. If I wanted to move or resize the control, I had to select its container control, the QPanel, which was visible only as the very thin 1 pixel margin and therefore not easy to click on. Some smart thinking resolved that easily. From the forms designer I set the padding of the QPanel to a thick and hefty (10, 10, 10, 10) allowing it to be easily clicked on. Then, in the program code, when the screen loaded, I added some lines that would automatically change the QPanel padding back to (0, 0, 0, 0). That particular code is tailored to change only those QPanels which are used as border controls, leaving any other QPanels untouched.

Before...

Image

After...

Image

The Visual Basic code which automatically resets the border padding...

Image

With borders secured, it's on to the next objective in the Visual Styes battle.

To be continued...

Kwame the Webmaster.
Admin
Site Admin
 
Posts: 50
Joined: Sat Jun 21, 2008 3:55 pm

Coding continues...

Postby Admin on Sat May 25, 2013 5:22 pm

Coding continues...

Image

To be continued...

Kwame the Webmaster.
Admin
Site Admin
 
Posts: 50
Joined: Sat Jun 21, 2008 3:55 pm

Visual Styles - On The Verge of Completion

Postby Admin on Mon May 27, 2013 3:36 pm

All the fine work has been done and this section of the project is now on the verge of completion.

Here's what it looks like now, with colour customisation completed for 33 individual screen elements...

Image

The program code which automatically applies these settings to all other windows in the project has already been completed, and only needs to be turned on.

What remains to be done is adding the ability to save/load the user's colour selections, and adding font settings.

Kwame the Webmaster.
Admin
Site Admin
 
Posts: 50
Joined: Sat Jun 21, 2008 3:55 pm

Visual Styles - Some Possible Preset Colour Schemes

Postby Admin on Tue May 28, 2013 1:45 am

It's now easy to play around with the settings and show you some possible preset colour schemes.

This is the default based on a soft blue background...

Image

This is a soft green...

Image

Here's a white background version...

Image

This is a style I like to refer to as black-lit, featuring a black background which cuts down on screen glare, especially when working at night...

Image

And this is lilac...

Image

As these examples clearly show, the user has an unlimited choice of colours to choose from.

Kwame the Webmaster.
Admin
Site Admin
 
Posts: 50
Joined: Sat Jun 21, 2008 3:55 pm

Visual Styles about to be Outdoored

Postby Admin on Sun Jun 09, 2013 8:55 pm

Last week was a demanding one, with a number of customer appointments which took time away from work on the PayPak Professional 4.0 project. I used this weekend to resurge my efforts to complete the Visual Styles section, and I'm mighty pleased with the progress. The past 48 hours have been full of coding, reviewing, changing and fine-tuning. It is working beautifully and I'm presently completing the aesthetics and finalising the task of reviewing the colours chosen for the seven standard colour schemes. The only part of it remaining to be done is the fonts, and I don't see that being any Herculean undertaking.

I can therefore safely say that the Visual Styles screen will soon be granted its YouTube video and be outdoored perhaps as soon as tomorrow.

This is a major set piece in the production of our new generation of software products, and is a revolutionary advancement in the design and functionality of the graphical user interface in our applications.

Here are the 7 standard Visual Styles:

BLACK

Image

BLUE

Image

BROWN

Image

GREEN

Image

ORANGE

Image

VIOLET

Image

WHITE

Image

Kwame the Webmaster
Admin
Site Admin
 
Posts: 50
Joined: Sat Jun 21, 2008 3:55 pm

COMPLETED: See YouTube Video

Postby Admin on Sun Jul 07, 2013 9:52 pm

It's completed at last.

Here's the YouTube video...



Kwame the Webmaster.
Admin
Site Admin
 
Posts: 50
Joined: Sat Jun 21, 2008 3:55 pm


Return to Twi

Who is online

Users browsing this forum: No registered users and 1 guest