Version

Applying a Resource to a State

You can quickly style different states by creating a Resource with the Style you want to apply.

To create a resource:

  1. Click the Resources tab in the Style Explorer

  2. Click Add New. A new Resource is added.

  3. Change the name of the Resource to BlueWhite.

  4. Change the background style to Gradient. Change the first color to White and the second color to Blue. Change the Gradient style to BackwardDiagonal.

The Background panel shown for the new Resource.

The Preview panel is an important tool when creating resources. It is the only way to preview what the style will look like since the Resource is not attached to a UI Role that you can view in the Canvas area. If the Preview is enabled in the UI Role Editor, it will look like this:

The Preview Panel that allows you to see what the Resource's style will look like.

  1. Create another Resource by following steps 1 through 4 again, but this time, change the name of the Resource to RedWhite, and instead of Blue, change the second color in the gradient to Red. You should now have two Resources: BlueWhite and RedWhite.

To apply a resource to a state:

  1. Click the Roles tab in the Style Explorer.

  2. Under the UI Roles node, expand Base and then select the Cell UI Role.

Selecting the Cell UI Role under the UI Roles node in the Style Explorer.
Note
Note

In order to see changes made to the Cell UI Role, make sure the Grid canvas or another canvas that includes the Cell UI Role is displayed.

  1. Add the BlueWhite Resource to the Cell UI Role’s Normal state.

Shows the setting of the Resource to the Cell UI Role's Normal state.

  1. Add the RedWhite Resource to the Cell UI Role’s HotTracked state.

If you are viewing the Grid canvas, you will notice that every cell has the Blue/White gradient applied to it. Hover your mouse over any of the cells and whichever cell the mouse pointer is over will appear with the Red/White gradient.

Shows the mouse hovering over a Cell in the Grid Canvas to show the Resource that was applied to the HotTracked state of the Cell UI Role.