Styles
A style is a collection of attributes which affect how a Control or form will look, such as the font to use, background and foreground colours, bold or italic text etc. Once you have created a style, you can apply it to a Control or to the form to give that Control or form the look specified in the style. You can apply the same style to multiple items allowing you to easily provide a consistent look and feel to your app, without having to individually configure each aspect of each item separately. If you want to change the look of your app, you can simply change your styles and the changes will automatically be applied to all items using your modified styles.
When you add a new form or add a Control to a form in the App Studio's Workspace, it is automatically assigned a Style called '(default)'. You can edit the default Style or create new Styles to give your app the look you want.
When you create a new Control Style, you can either first select a Control, or Controls, you want to apply the Style to, in which case the Style will automatically be assigned to the selected Control when it is created, or you can create the Style without assigning it to a Control by clicking outside the form on the form window's yellow background to deselect all items.
From the Styles group on the Ribbon's Home tab, choose Edit Style → New.
Enter a name for the style e.g. "Standard Button".
Without changing the Control selection, configure the Font Face, Font Size, Style, Justification, Foreground colour, Background colour and Border options from the Edit Style menu.
- The Font Face list in App Studio displays fonts installed within Windows on your development PC. These fonts may not be available on the actual device itself. At runtime your apps can only use fonts which have been installed on the device. If a selected font isn't available on the device a default font will be used instead. When changing font faces, if you are not sure whether a particular font is available on the device, you will need to check what the final effect will be on an actual device.
The style will be saved automatically and your changes will be reflected within the selected Control(s) as you make them. In addition, a sample of your Style will be added to the Styles Gallery, which you can find to the left of the Edit Style button. If the Styles Gallery isn't visible, either try increasing the width of the App Studio window or click on the Display Styles button to display it.
-
Not all Style Properties are relevant to all Controls and, even if you set or change the Properties, they will have no effect within such Controls. For example, background colour is not supported for Picture & Video Controls, except on the iOS Platform, because generally the background will be the image contained within the Control.
If you set a background colour for a Radio Button or Check Box, the colour will be applied to the Radio Button or the Check Box itself and not the Control's label, except on the Android Platform where background colour is not supported with these Controls.
For a ListView Control, if you want to change the appearance of the control, you do this within the Template used to define the row structure rather than by applying a style to the control itself. If you want to change the background colour for the control's containing rectangle, you can do this by setting a background colour for the Template form. If you want to display a border around the whole list, however, you do this by applying a style, which has the Border option set to Yes, to the ListView Control itself.
There are various differences between the Target Platforms:
AndroidOn the Android Platform, you can only change the background colour on Static Text, Edit, Combo Box (both types) and List Box Controls.
Button, Date Picker, Slider and Progress Controls don't support either background or foreground colours although the Slider Control does use the foreground colour for the text displaying the currently selected value within the Control.
Borders are only supported on ListView, Picture & Video, Ink Picture, Static and List Box Controls and if ON always display in black rather than the current foreground colour.
Radio Buttons and Check Boxes do not support text justification. Labels will always be left-justified, whatever the justification setting specified.
iOSOn the iOS Platform, borders are not supported on Edit, Button and Date Picker Controls. You can, however, change the background colour for Picture & Video and Ink Picture Controls.
Windows DesktopOn the Windows Desktop Platform, you can't change the colours or add a border for a Slider Control. Borders are also not supported with Radio Button and Check Box Controls.
Windows Universal PlatformOn the Windows Universal Platform, you can't change the colours or add a border for a Slider or Progress Control. Borders are also not supported on Radio Button and Check Box Controls.
Click on the background area of the form, so that the selection rectangle appears around the edge.
From the Styles group of the Ribbon's Home tab, choose Edit Style → New.
Enter a name for the style e.g. "HomePage".
Without changing the selection, configure the relevant attributes from the Edit Style menu. Your style will be saved automatically and changes will be reflected in your form as you make them. Not all attributes are relevant to forms and any changes you make to these will be ignored.
As with Controls, if you don't want to apply your new Style to the form immediately, deselect all items before creating the Style by clicking outside the form on the form window's yellow background.
Select the Control(s) or form as usual.
Pick a new Style from the Styles Gallery. When you move your mouse over a Style sample in the Gallery, you will see the Control change to that Style, so that you can preview how the Control will look with that style applied. Click on a Style sample to apply that Style to the Control or form.
Alternatively, you can select a Control or form and then pick a new Style from the drop-down list in the item's Style Property.
To edit an existing Style you can start by selecting a Control or a form which has the required Style currently applied or alternatively make sure no Control or form is selected by clicking in the yellow border outside the form's boundaries.
Choose Edit Style from the Styles group on the Ribbon's Home tab, and make the required change to one of the Font Face, Font Size, Style, Justification, Foreground colour, Background colour and Border options. Drop down the menu again if you want to make another change.
Your changes will be saved automatically and applied immediately to any items which already have the modified Style applied.
Cloning a Style means to create a new Style by copy an existing Style. This is useful where you want the new Style to be similar to the original Style since the new Style will have exactly the same configuration as the original Style. You can then edit the new Style as required to make it different from the original Style.
If you want your new Style to be applied to specific items immediately, select the Control(s) or the form that you want it to be applied to before creating the new Style. Alternatively, you can create your new Style and then apply it to Controls and forms later. If one or more items are currently selected, you can deselect all items by clicking on the yellow border outside the form's boundaries before you create the new Style.
Select a Style from the Styles Gallery.
From the Styles group of the Ribbon's Home tab, choose Edit Style → Clone….
Enter a name for this Style.
Edit the style settings as described above under Create Styles for Controls.
Select the Style in the Styles Gallery.
From the Styles group of the Ribbon's Home tab, choose Edit Style → Delete. Any forms or Controls using that Style will be set back to the '(default)' Style.