Using FormStyleEditor

But what's the point of having a style manager when you couldn't edit the styles. So my other task was creating the FormStyleEditor. And here it is:

FormStyleEditor.png

The editor is designed not as separate application as one might expect, but as a component that you embedd inside of your own application. This has such advantage that when you design your style you can immediately see how it applies to your application. The editor comes packaged as a component that you drop on your form. Later you can lunch the editor (from some button, magic key combination or simply in form's Load event) by calling the ShowFormEditor method.

The editor window shows contents of currently loaded style library so if you loaded one already you would see something like on the screen above, but if not you need first to add a new FormStyle which the Add Style button. Starting from left: New button clears the contents of current style library, Open loads style library from file, and Save of course stores your work on disk (I've choose the .fsl extension as it simply stands for Form Style Library).

As said before the library can contain more then one FormStyle. For example you can design different skins for the main window and for the dialogs or tool windows. Each style is identified by its Name that you can later reference using FormStyleName property on any class inheriting from CustomBorderForm. To select which style to edit you use the drop down list next to Active Style label. Add Style button will create additional styles, and Delete Style button of course removes currently selected style from the library.

Below you have two panels: the tree on the left show hierarchy of elements of the active style and the property grid on the right lets you edit the properties of currently selected element. The hierarchy of elements starts on the FormStyle which has following properties:

Property Description
Name Name used to identify this style in the library
ClientAreaPadding Padding of the client rectangle relative to window bounds
IconPadding Padding of icon rectangle relative to top-left corner of title bar
TitlePadding Padding of the title rectangle relative to rectangle of title bar
TitleFont Font used to paint window title
TitleColor Color used to paint window title
TitleShadowColor Color used to draw drop shadow behind window title
SizingBorderWidth Offset from window border where window can be sized using a mouse horizontally or vertically
SizingCornerOffset Offset from window corner where form can be sized in both directions
NormalState Image used to paint background on forms non client area
CloseButton Style for window close button
MinimizeButton Style for window minimize button
MaximizeButton Style for window maximize button
RestoreButton Style for window restore button
HelpButton Style for window help button



The FormButtonStyle class defines appearance for the Close, Minimize, Maximize, Restore and Help buttons of the form and has following properties:

Property Description
Size Size of the button rectangle
Margin Margin around the button rectangle relative to title bar
NormalState Image used to paint button in normal state
ActiveState Image used to paint button in active state
HoverState Image used to paint button in hover state
DisabledState Image used to paint button in disabled state


Last thing that changes with this release is the way the images that are drawn on the border are assembled. Earlier the image drawn in background had to be cut into 9 pieces and specified one by one. Now you can use single image and instead you specify the stretch margins for the images. These margins specify how this image should be cut into pieces theater would be then used to fill the given screen area. Perhaps this image will better explain how it works:

StretchMargins.png

The red lines represent the StretchMagins for this image. The idea here is that the four pieces cut from the corners are painted exactly the same size as in ther source image, whereas the pieces between the corners running along the horizontal and vertical borders are stretched to fill the remaining space. Also worth noting is that the StretchMargins for the Form don't have to be the same as the ClientAreaPadding (like in this example it is slightly bigger to accommodate for the round corners on top).

The same technique is used for painting the form background and all form buttons and it is configured by the SerializableImage class that has following properties:

Property Description
Image The actual image used to paint the corresponding element.
SizeMode Sizing technique used to draw the image. Available values are Centered, Stretched and Tiled.
StretchMargins Specifies the rules of dividing image into pieces for the Stretched SizeMode.

Last edited Aug 2, 2006 at 11:53 AM by kobush, version 5

Comments

No comments yet.