Netika Technologies
Demos Downloads Community

Change the Look of a NTKLabel and a NTKButton

Download the Silverlight sample project

Download the Flash sample project

Introduction

By default, the controls provided with GOA WinForms Professional for Silverlight and GOA WinForms Professional for Flash have a Windows XP look and feel.

This QuickStart topic describes how to change the look of a NTKLabel and a NTKButton control using the LayoutSettings property of these controls.

Prerequisites:

If you are using GOA WinForms for Flash:

If you are using GOA WinForms for Silverlight:

  • Microsoft Silverlight 2.0 Beta 2
  • Microsoft Visual Studio 2008
  • Microsoft Silverlight Tools Beta 2 for Visual Studio 2008
  • GOA WinForms Professional for Silverlight (available from the NETiKA Technologies site)

UIElement:

The UI of all the controls of the GOAToolkit is made of UIElements. The UIElement is the smallest undivisible part of the interface of a NTKControl.

UIElement.jpg

A UIElement is subdivided in several sub elements:

  • BackColor: the background of the UIElement.
  • Text: a text displayed in the UIElement.
  • Image: an image displayed in the UIElement.

  • Border: the border element is also subdivided into sub elements

    • External Border.
    • Outside Border.
    • Inside Border.
    • Border Body: between the outside border and the inside border.

A sub element of an UIElement can be customized through a set of properties. For instance, the corners of the borders can be rounder or not; the BackColor can display a gradient or not; the image can be located at top, bottom or center...

The UI of a control is made of one or several UIElements. The UI of a NTKLabel or a NTKButton is made of a single UIElement. On the opposite, the UI of the NTKGroupingPane (Navigation Bar) is made of a lot of UIElements.

Customizing the look of a control through the LayoutSettings of its UIElements is slightly less powerfull than using the skinning model. Nevertheless, the LayoutSettings model gives serveral advantages over the skinning model:

  • You can easily make a small change to the way a control is displayed. For instance, if you want to change color of the border of a button, you just have to change one property value.
  • A designer can be build (and will be provided in a next release of the product) on top of the layout settings model allowing to modify the look of a control through a graphical interface.

Create a Form with two NTKLabels

In order to be able to see the changes we are going to make, we are first going to create a form holding two labels.

  • Start Visual Studio and create a new GOA Professional Application project. Name your project LabelLayoutSettings.

    If you do not know how to create a new GOA project, please read the Create a "Hello World" Application with GOA WinForms for Silverlight or the Create a "Hello World" Application with GOA WinForms for Flash QuickStart on this site.

    Note for Silverlight users:

    • When creating the new project, be careful to select the GOA WinForms Professional Application template and not the GOA WinForms Application template.
    • Do not forget to link the SkinChange Silverlight project to a Web Project. Click here to see how to do.

  • Check that the GOAToolkit assembly (or library) is referenced by your project. If not, right click the References node in the Solution Explorer, click the Add Reference... item in the drop down menu and select the GOAToolkit library.

  • When the project has been created, a new form holding a button has also automatically been created. Start editing the form file (Form1.ccs or MyForm.cs)

  • Replace the button, with 2 NTKLabels:

    using System; 
  using System.Drawing; 
  using System.Collections; 
  using System.ComponentModel; 
  using System.Windows.Forms; 
  using NETiKA.Toolkit.Forms; 
   
  namespace LabelLayoutSettings 
  {
     public class MyForm : System.Windows.Forms.Form 
     { 
       private NTKLabel label1; 
       private NTKLabel label2; 
       
       private System.ComponentModel.Container components = null; 
     
       public MyForm() 
       { 
         InitializeComponent(); 
       } 
     
       protected override void Dispose(bool disposing) 
       { 
         if (disposing) 
         { 
           if (components != null) 
           { 
             components.Dispose(); 
           } 
         } 
         base.Dispose(disposing); 
       } 
     
       private void InitializeComponent() 
       { 
         this.label1 = new NTKLabel(); 
         this.label2 = new NTKLabel(); 
         
         this.SuspendLayout(); 
         
         // 
         // label1 
         // 
         this.label1.Location = new System.Drawing.Point(50, 20); 
         this.label1.Text = "label1"; 
         
         // 
         // label2 
         // 
         this.label2.Location = new System.Drawing.Point(50, 60); 
         this.label2.Text = "label2"; 
         
         // 
         // Form1 
         // 
         this.Controls.Add(this.label1); 
         this.Controls.Add(this.label2); 
       
         this.Text = "Form1"; 
         this.ResumeLayout(false); 
       } 
       
       public static void Main() 
       { 
         Application.Run(new MyForm()); 
       } 
     } 
  }

  • Click Start on the Debug menu or press F5. A form displaying two standard labels is displayed.

Change the look of a NTKLabel

We are going to change the look of the top label of the form by using its LayoutSettings property

The new look will have the following features:

  • The background is a vertical gradient from blue to dark blue.
  • The border of the label is dark blue.
  • The text of the label is white and bold.
  • The text of the label is displayed at 7 pixels from the left border.

The display settings of the UIElements of the UI of a NTKControl can be modified through the LayoutSettings property of the control.

A label is made of a single UIElement. In order to apply the new look, we are going to modify the BackColor, Border and Text settings of the UIElement

  • Start editing the form file (Form1.ccs or MyForm.cs) and add the following code in the InitializeComponent method: 
    private void InitializeComponent() 
  { 
    this.label1 = new NTKLabel(); 
    this.label2 = new NTKLabel(); 
   
    this.SuspendLayout(); 
   
    // 
    // label1 
    // 
    this.label1.Location = new System.Drawing.Point(50, 20); 
    this.label1.Text = "label1"; 
  
    //CODE TO ADD BEGIN
    PlainLayoutSettings layoutSettings = this.label1.LayoutSettings;
 
    UIElementBackColorSettings backColorSettings = layoutSettings.StandardLayoutSettings.BackColorSettings;
    backColorSettings.BackColor = Color.Blue;
    backColorSettings.BackColor2 = Color.DarkBlue;
    backColorSettings.BackGradientStyle = GradientStyle.Vertical;
 
    UIElementBorderLineSettings outsideBorderLineSettings = layoutSettings.StandardLayoutSettings.BorderSettings.OutsideBorderLineSettings;
    outsideBorderLineSettings.BorderLineColor = Color.DarkBlue;
    outsideBorderLineSettings.ShowBorderLine = true;
 
    UIElementTextSettings textSettings = layoutSettings.StandardLayoutSettings.TextSettings;
    textSettings.Font = new Font(FontFamily.GenericSansSerif, 11, FontStyle.Bold, GraphicsUnit.Point);
    textSettings.ForeColor = Color.White;
 
    layoutSettings.StandardLayoutSettings.Margins = new UIElementMargins(7, 1, 1, 1);
   
    //CODE TO ADD END
 
    // 
    // label2 
    // 
   
    . . .

  • Click Start on the Debug menu or press F5. The form is displayed. The top label is now displayed using a new look.

Change the Look of the two Labels of the Form

The next step is to apply the same display settings to the other label of the form without having to write the same code twice.

We can acheive this by passing the layout settings to the constructor of the label.

  • Open the form file (Form1.ccs or MyForm.cs) and change the code in the InitializeComponent method as follow: 
    private void InitializeComponent() 
  { 
     
     PlainLayoutSettings layoutSettings = LabelSettingsHelper.GetDefaultPlainLayoutSettings();
 
     UIElementBackColorSettings backColorSettings = layoutSettings.StandardLayoutSettings.BackColorSettings;
     backColorSettings.BackColor = Color.Blue;
     backColorSettings.BackColor2 = Color.DarkBlue;
     backColorSettings.BackGradientStyle = GradientStyle.Vertical;
 
     UIElementBorderLineSettings outsideBorderLineSettings = layoutSettings.StandardLayoutSettings.BorderSettings.OutsideBorderLineSettings;
     outsideBorderLineSettings.BorderLineColor = Color.DarkBlue;
     outsideBorderLineSettings.ShowBorderLine = true;
 
     UIElementTextSettings textSettings = layoutSettings.StandardLayoutSettings.TextSettings;
     textSettings.Font = new Font(FontFamily.GenericSansSerif, 11, FontStyle.Bold, GraphicsUnit.Point);
     textSettings.ForeColor = Color.White;
 
     layoutSettings.StandardLayoutSettings.Margins = new UIElementMargins(7, 1, 1, 1);
     
     this.label1 = new NTKLabel(layoutSettings); 
     this.label2 = new NTKLabel(layoutSettings); 
     
     this.SuspendLayout(); 
     
     // 
     // label1 
     // 
     this.label1.Location = new System.Drawing.Point(50, 20); 
     this.label1.Text = "label1"; 
   
     // 
     // label2 
     // 
     this.label2.Location = new System.Drawing.Point(50, 60); 
     this.label2.Text = "label2"; 
   
     // 
     // Form1 
     // 
     this.Controls.Add(this.label1); 
     this.Controls.Add(this.label2); 
   
     this.Text = "Form1"; 
     this.ResumeLayout(false); 
  }

  • Click Start on the Debug menu or press F5. The form is displayed. Both labels are now displayed using the new look.

Note: Each control of the GOAToolkit library has an associated SettingHelper which provides default LayoutSettings for the control: LabelSettingsHelper, ButtonSettingsHelper, GroupBoxSettingsHelper...

Change the Look of a NTKButton

Introduction

The way to change the look of a NTKButton is very similar to the way we followed to change the look of a NTKLabel. Nevertheless, the look of a button is dynamic. For instance, the look of the button is not the same when it is clicked than when its is not.

There are four parameters that can impact the look of a button:

  • Default: is the button the default button of the form?
  • Focused: is the button focused or not?
  • Activated: is the user clicking the button?
  • HotTracked: is the mouse over the button?

These four parameters are combined togheter to impact the look of the control. Nevertheless, some combinations are not interesting. For instance, the combination Hottracked and Activated is not really interesting. We can suppose that an activated button is also hottracked.

If we do not take into account the focused and the default parameters, there are tree basic states for the button.

  • Standard: the button is not hottracked and not activated.
  • HotTracked: the button is hottracked but it is not activated.
  • Activated: the button is activated.

Adding the focus parameter, we have three more states:

  • Focused.
  • FocusedHotTracked.
  • FocusedActivated.

Finally, we have to take into account the fact that the button can be the default button of the form and six more states can be listed:

  • Default.
  • DefaultHotTracked.
  • DefaultActivated.
  • FocusedDefault.
  • FocusedDefaultHotTracked.
  • FocusedDefaultActivated.

Therefore, we have 12 possible states:

The settings of these states can be accessed through the LayoutSettings property of the NTKButton:
  myButton.LayoutSettings.ActivatedLayoutSettings
  myButton.LayoutSettings.DefaultActivatedLayoutSettings
  myButton.LayoutSettings.DefaultHotTrackedLayoutSettings
  myButton.LayoutSettings.DefaultLayoutSettings
  myButton.LayoutSettings.FocusedActivatedLayoutSettings
  myButton.LayoutSettings.FocusedDefaultActivatedLayoutSettings
  myButton.LayoutSettings.FocusedDefaultHotTrackedLayoutSettings
  myButton.LayoutSettings.FocusedDefaultLayoutSettings
  myButton.LayoutSettings.FocusedHotTrackedLayoutSettings
  myButton.LayoutSettings.FocusedStandardLayoutSettings
  myButton.LayoutSettings.HotTrackedLayoutSettings
  myButton.LayoutSettings.StandardLayoutSettings

If you would like that the border color of the button is displayed in red when the button is hottracked, you would have to write the following code: 

myButton.LayoutSettings.StandardLayoutSettings.BorderSettings.OutsideBorderLineSettings.BorderLineColor = Color.Red;

Fortunately, we do not have to define the layout settings for each state one after the other. All the states share common settings values. They will differ from each other only on a few settings.

The settings that are shared between several states can be set through a LayoutSetter. Therefore, using the LayoutSetter of the button, you can set the value of a setting for all the states. For instance, if you would like that the border color of the button is displayed in red for all the states of the button, you would have to write the following code: 

buttonLayoutSettings.LayoutSetter.BorderSetter.OutsideBorderLineSetter.BorderLineColor = Color.Red;

Display Four Buttons on a Form

In order to be able to see the changes we are going to make, let's first create an application with four buttons

  • Start Visual Studio and create a new GOA Professional Application project. Name your project NTKButtonLayoutSettings.

    If you do not know how to create a new GOA project, please read the Create a "Hello World" Application with GOA WinForms for Silverlight or the Create a "Hello World" Application with GOA WinForms for Flash QuickStart on this site.

    Note for Silverlight users:

    When creating the new project, be carful to select the GOA WinForms Professional Application template and not the GOA WinForms Application template.

  • Check that the GOAToolkit assembly or library is referenced by your project. If not, right click the References node in the Solution Explorer, click the Add Reference... item in the drop down menu and select the GOAToolkit library.

  • When the project has been created, a new form holding a button has also automatically been created. Start editing the form file (Form1.ccs or MyForm.cs)

  • Add the following using statement: 

    using NETiKA.Toolkit.Forms;

  • At the beginning of the file, replace the button field with a NTKButton field and add 3 new NTKButton fields:

    private NTKButton button1; 
private NTKButton button2; 
private NTKButton button3; 
private NTKButton button4;

  • In the InitializeComponent method of the form, add the code needed to create and display the 4 buttons on the form:

    private void InitializeComponent() 
  { 
    this.button1 = new NTKButton(); 
    this.button2 = new NTKButton(); 
    this.button3 = new NTKButton(); 
    this.button4 = new NTKButton(); 
 
    this.SuspendLayout(); 
 
    // 
    // button1 
    // 
    this.button1.Location = new System.Drawing.Point(50, 20); 
    this.button1.Text = "button1"; 
    this.button1.Height = 30; 
    this.button1.Width = 70; 
 
    // 
    // button2 
    // 
    this.button2.Location = new System.Drawing.Point(50, 60); 
    this.button2.Text = "button2"; 
    this.button2.Height = 30; 
    this.button2.Width = 70; 
 
    // 
    // button3 
    // 
    this.button3.Location = new System.Drawing.Point(50, 100); 
    this.button3.Text = "button3"; 
    this.button3.Height = 30; 
    this.button3.Width = 70; 
 
    // 
    // button4 
    // 
    this.button4.Location = new System.Drawing.Point(50, 140); 
    this.button4.Text = "button4"; 
    this.button4.Height = 30; 
    this.button4.Width = 70; 
    this.button4.Enabled = false; 
 
    // 
    // Form1 
    // 
    this.Controls.Add(this.button1); 
    this.Controls.Add(this.button2); 
    this.Controls.Add(this.button3); 
    this.Controls.Add(this.button4); 
    this.Text = "Form1"; 
    this.ResumeLayout(false); 
  }

  • Click Start on the Debug menu or press F5. A form displaying four standard buttons is displayed. The four buttons have a Windows XP look and feel

Change the Look of the Buttons

The new look will be very simple and have the following features:

  • The button will be drawn as a light blue rectangle with a black border and with a black text.
  • If the mouse is over the button, the border of the rectangle will become red.
  • If the button has the focus, the background of the rectangle will become cyan.
  • If the button is down, the background of the rectangle will become dark blue and the text will become white.
  • If the button is disabled, the background of the rectangle will be gray and the text color will be dark gray.

Let's apply this look to the four buttons.

  • Open the form file (Form1.ccs or MyForm.cs) and add a GetCustomButtonLayoutSettings method: 
    private ButtonLayoutSettings GetCustomButtonLayoutSettings() 
   { 
     //Get the default button layout settings 
     ButtonLayoutSettings buttonLayoutSettings = ButtonSettingsHelper.GetDefaultButtonLayoutSettings(); 
     
     //buttonLayoutSettings holds the layout settings that display a button having a Windows XP look. 
     //We must change the settings to have our custom. 
     
     //Get the layout setter 
     UIElementLayoutSetter layoutSetter = buttonLayoutSettings.LayoutSetter; 
     
     //Define the border settings that are shared between all the states of the button 
     UIElementBorderSetter borderSetter = layoutSetter.BorderSetter; 
     
     borderSetter.BorderStyle = NTKBorderStyle.Single; 
     borderSetter.RoundedCorners = false; 
     borderSetter.BorderBodySetter.ShowBorderBody = false; 
     borderSetter.InsideBorderLineSetter.ShowBorderLine = false; 
     
     //Define the back color settings that are shared between all the states of the button 
     UIElementBackColorSetter backColorSetter = layoutSetter.BackColorSetter; 
     backColorSetter.BackGradientStyle = GradientStyle.None; 
     backColorSetter.BackColor = Color.LightBlue; 
     backColorSetter.BackColorDisabled = Color.Gray; 
     
     //Define the text settings that are shared between all the states of the button 
     buttonLayoutSettings.LayoutSetter.TextSetter.ForeColorDisabled = Color.DarkGray; 
     
     //if the button is activated, it will have a dark blue background, a red border and white text 
     UIElementLayoutSetter activatedLayoutSetter = buttonLayoutSettings.ActivatedLayoutSetter; 
     activatedLayoutSetter.BackColorSetter.BackColor = Color.DarkBlue; 
     activatedLayoutSetter.BorderSetter.OutsideBorderLineSetter.BorderLineColor = Color.Red; 
     activatedLayoutSetter.TextSetter.ForeColor = Color.White; 
     
     UIElementLayoutSetter defaultActivatedLayoutSetter = buttonLayoutSettings.DefaultActivatedLayoutSetter; 
     defaultActivatedLayoutSetter.BackColorSetter.BackColor = Color.DarkBlue; 
     defaultActivatedLayoutSetter.BorderSetter.OutsideBorderLineSetter.BorderLineColor = Color.Red; 
     defaultActivatedLayoutSetter.TextSetter.ForeColor = Color.White; 
     
     //If the button is hottracked, it will have a red border 
     buttonLayoutSettings.HotTrackLayoutSetter.BorderSetter.OutsideBorderLineSetter.BorderLineColor = Color.Red; 
     buttonLayoutSettings.DefaultHotTrackedLayoutSetter.BorderSetter.OutsideBorderLineSetter.BorderLineColor = Color.Red; 
     
     //If the button is focused, it will have a cyan backcolor 
     buttonLayoutSettings.FocusedStandardLayoutSettings.BackColorSettings.BackColor = Color.Cyan; 
     buttonLayoutSettings.FocusedHotTrackedLayoutSettings.BackColorSettings.BackColor = Color.Cyan; 
     buttonLayoutSettings.FocusedDefaultLayoutSettings.BackColorSettings.BackColor = Color.Cyan; 
     buttonLayoutSettings.FocusedDefaultHotTrackedLayoutSettings.BackColorSettings.BackColor = Color.Cyan;      
     
     return buttonLayoutSettings; 
   }

    Note that we have used the ActivatedLayoutSetter, DefaultActivatedLayoutSetter, HotTrackLayoutSetter and DefaultHotTrackedLayoutSetter. Such LayoutSetters allow to define the value of a setting for a state and the corresponding focused state. For instance, if you set a value to a property of the ActivatedLayoutSetter, you set it for ActivatedLayoutSettings and FocusedActivatedLayoutSettings.

  • Change the begining of the InitializeComponent method and pass the layoutSettings to the constructors of the buttons: 
    private void InitializeComponent() 
  { 
    ButtonLayoutSettings buttonLayoutSettings = GetCustomButtonLayoutSettings(); 
    this.button1 = new NTKButton(buttonLayoutSettings); 
    this.button2 = new NTKButton(buttonLayoutSettings); 
    this.button3 = new NTKButton(buttonLayoutSettings); 
    this.button4 = new NTKButton(buttonLayoutSettings); 
     
    this.SuspendLayout(); 
     
    ...

  • Click Start on the Debug menu or press F5. The form is displayed. The four buttons are now displayed using the new look

Download the Silverlight sample project

Download the Flash sample project
Community
QuickStarts
Blogs
Forums
FAQ
Documentation