Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Styling a Button

This walkthrough will guide you through the process of creating a Style Library, styling a button, and saving that Style Library. By the end of this step-by-step tutorial you should have a good understanding of AppStylist for Windows Forms and how it functions.

You will need the following images saved to your hard drive in order to take full advantage of this walkthrough. Right-click each image and select Copy from the shortcut menu. Paste the images into your favorite image editing application (Microsoft® Paint will work just fine) and use the suggested filename from the following table:

Image Save As
Standard button

Button.png
HotTracked button

Button_HotTracked.png
Pressed button

Button_Pressed.png

  1. Create a new Style Library

    1. From the File menu, click New Style Library. A new Style Library is created.

Note
Note

If you would like for your new style to be applied only to the WinButton control, you will need to create a new StyleSet targeted at WinButton. See Styling a Specific Component Type for more information on targeting specific components. For this walkthrough, however, we will use the Default StyleSet.

  1. Set Component Role Settings for UltraButton.

    1. Click the Roles tab in the Style Explorer.

    2. Expand the Component Role Settings node.

    3. Expand the Infragistics Components node.

    4. Select UltraButton.

    5. Under Common Component Properties, set UseFlatMode to True and UseOsThemes to False.

Common Component Properties panel

  1. Navigate to the Normal state for the Button UI Role.

    1. In the Style Explorer, expand the UI Roles node.

    2. Expand the Base node.

    3. Select the Button UI Role.

Showing the Button UI Role in the Style Explorer.

  1. Make sure that the Normal state under the Common States tab is selected in the Role Editor.

Shows the Normal state tab selected under the Common States tab.

  1. Style the Button UI Role’s Normal state.

    1. Set both the background fill and border color to Transparent.

Shows the Background and Border panel with the background fill and border color set to Transparent.

  1. In the Background pane, click Image and select File from the drop-down list.

  2. Navigate to where you saved the three button images and open Button.png.

Note
Note

Depending on which canvas is being displayed, you may see buttons change appearance immediately. An ideal canvas on which to view changes is the Editors Canvas. Switch to the Editors canvas now by clicking the Editors tab at the top of the canvas area. If you need assistance displaying canvases, see the Canvas topic.

  1. In the Background pane, click Layout Mode and select Stretched from the drop-down list. A Margins button will appear below the Layout Mode button.

  2. Click Margins. The Stretch Margins Editor appears.

Shows the Stretch Margins Editor

  1. Set the left, top, right, and bottom margins to 5, 4, 5, 4, respectively.

Note
Note

If you would like to test the margins, click the Preview tab. You will then be able to stretch the image manually with the currently set stretch margins.

  1. Click OK.

You will notice that several buttons on the canvas don’t have the expected appearance. The Show SpellCheck Dialog button looks different from the DropDownButton with Slider button. This is because we set UseFlatMode on the UltraButton component only, but styled the Button UI Role. The Button UI Role affects every button in your application, not just the UltraButton component. Since other components use the Button UI Role, you will need to go back to the Component Role Settings node in the Roles tab of the Style Explorer and select All Components. Now set UseFlatMode to True and UseOsThemes to False. Every button in your application will now look the same.

  1. Style the Button UI Role’s HotTracked state.

    1. In the Properties Panel, click the HotTracked tab.

Shows the HotTracked tab selected in the Properties Panel.

  1. Perform step 4, but substitute the Button_HotTracked.png image for the Button.png image.

  1. Style the Button UI Role’s Pressed state.

    1. In the Properties Panel, click the Pressed tab.

Shows the Pressed tab selected in the Properties Panel.

  1. Perform step 4, but substitute the Button_Pressed.png image for the Button.png image.

  1. Save your Style Library.

    1. From the File menu, click Save Style Library… The Save Style Library dialog box appears.

    2. Use Button.isl for the file name.

    3. Click Save.

Your Style Library is now ready to be used in an application. In order to use the Style Library, you need to add a line of code to the Main method of the application. Refer to "Loading a Style Library" in the "Developer’s Guide" section of the Ultimate UI for Windows Forms help for more information on loading Style Libraries.