Several years ago I published the Caramel theme for Silverlight controls. Also there are Cherry, Lime and Pale themes. Well, it’s nice time to update them and I decided to start with the Caramel theme. So we have such changes in comparison with the previous version:
Separating resources for all controls
All colors, shadows, general margins moved to the Colors.xaml file. Besides that, each control has his own resource file and linked to Colors.xaml (don’t forget it!).
A new XAML code
XAML code for all controls was rewrote. The glass effect was optimized for stretching horizontally and vertically.
Convenient names for colors
Names of color resources were renamed.
Shifting accents
Common and other states were changed so only buttons, tab headers and scrollbars have a convex glass effect. Highlighting for input controls is flat and without border color animation.
Scrollbar styles
Scrollbars don’t have up and down buttons. The width of the vertical scrollbar and the height of the horizontal scrollbar were reduced. The background of scrollbars is flat now.
Compact views
All controls are more compact now with less unnecessary elements.
Line height
All input controls (TextBox, PasswordBox, ComboBox, ListBox) and buttons have a 24px line height so look more smooth and done carefully. You can place the Button control in one line with the TextBox.
Default margins
The 3px MarginDefault resource was added to all controls so they look good in the grid and other layouts.
The Focused state
Thought a lot about the Focus state for all controls. The dark border color was moved from the Normal state to the Focused.
New controls were added
DatePicker and TabControl were added to this theme.
Demo
Download the Caramel theme
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5
Sketched ideas and detailed static mockups look fine on paper, but need interactivity and animation when transferred to the computer. You can scan all the best ideas and import them into SketchFlow projects. Dynamic prototypes enable you to navigate between screens and states, generate sample data, add hand-sketched controls, and interact with the application. The following picture shows the Am7 Guitars image scanned into a SketchFlow project, with working controls added.
SketchFlow tips: segregate different ideas and create branches in your project
Just segregate your different ideas and create several branches in the SketchFlow Map panel. Add several navigation screens connected to the Start screen in the SketchFlow Map panel. Mark your different ideas with color visual tags. The example below shows one project with several branches. Then, interact with your team members. Show them your ideas and the implemented branches of your prototype. Choose the best idea in the end.
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5
A small lesson - how to draw the cloud button by using Expression Design.
1. On the File menu, click New.
2. Click OK in the New Document dialog box.
3. Select the Ellipse tool from the Toolbox panel and drag it to the center of your document.
4. If they’re not already unlinked, unlink the width and height sliders on the Action Bar for the ellipse. Set the width to 50, the height to 50, the horizontal position of the pivot point (X) to 300, and the vertical position of the pivot point (Y) to 200.
By default Expression Design draws your ellipse with the last-used background and stroke parameters.
5. Set the Fill color to #0096FF and the Stroke color to None in the Appearance category of the Properties panel.
6. From the Edit menu, select Copy, or press CTRL+C. Also from the Edit menu, select Paste In Front, or press CTRL+F.
Expression Design creates a second ellipse in front of the first.
7. Set this second ellipse’s width to 60, height to 60, the horizontal position of the pivot point (X) to 330 and the vertical position of the pivot point (Y) to 190.
8. Press CTRL+C and then CTRL+F to create a third ellipse. Set the horizontal position of the pivot point (X) to 360 and the vertical position of pivot point (Y) to 200 for this third ellipse.
9. Press CTRL+C and then press CTRL+F once more. Set the width of this fourth ellipse to 50, the height to 50, X to 350 and Y to 215.
10. Press CTRL+C and then press CTRL+F to create a fifth ellipse. Set its X position to 320, its Y position to 220.
After this operation you should have five ellipses arranged in a cloudlike shape.
11. Select all the objects by pressing Ctrl+A, or click All on the Select menu. Choose the Unite option from the Path operations of the Action Bar panel. The selected objects become one united object.
12. Click the Fill tab of the Appearance category in the Properties panel.
13. Click the Gradient 
swatch in the Fill Type section. At the bottom of the Color Picker, click the black gradient stop to select the gradient bar and set its Hex value to #00B6FF.
14. Click the white gradient stop to select the gradient bar and set its Hex value to #B6EAFF.
The colors of your cloud object become more natural and less toy-like.
Next you will transform the gradient filling of the cloud.
15. In the Toolbox, select the Gradient Transform 
tool. Position the pointer near the top part of the cloud object, which will be the gradient's starting point. Drag it to the bottom part of the object and release the mouse button. This will be the gradient's ending point.
The cloud will fill with a vertical gradient.
TIP Hold down the SHIFT key when you drag so the angle is constrained to a vertical angle.
16. Press CTRL+C and then press CTRL+F with the cloud object selected to copy it.
17. Select Scale as Percentage from the Transform Options menu to display the width and height parameters as a percentage of the object.
The Transform Options menu provides options on how information is displayed on the actions you take.
18. Set the width and height to 90% so your second cloud object becomes a little bit smaller.
19. Change the gradient filling for this object so it ranges from #FFFFFF (white) to #FFFFFF (white).
20. With the right gradient stop still selected, adjust the transparency at this point of the gradient to 5% by using the Stop Alpha slider.
This gradient stop point becomes almost completely transparent.
21. Select the Ellipse tool in the Toolbox and drag it to the center of your document.
22. Unselect Scale as Percentage from the Transform Options menu.
23. Set the width to 150, the height to 130 for the newly created ellipse, and then set its X to 355 and Y to 265.
24. Hold down the SHIFT key and click the smaller cloud object to select it. You now have two objects selected.
25. Choose the Back Minus Front option from the Path operations of the Action Bar panel.
The shape of the front object is cut out of the back-most object.
26. In the Toolbox, select the Gradient Transform tool. Position the pointer near the top part of the offcut cloud object, drag it vertically to the bottom part of the object and release the mouse button.
The fill looks like glass now.
27. Select the back cloud object. Press CTRL+C and then press CTRL+F.
28. Select Scale as Percentage from the Transform Options menu and set the width to 80%, height to 10% and the Y position to 270.
The form of this object looks like a shadow under the cloud, but you’ll want to set a better color for the shadow.
29. Change the gradient filling for this object to solid and set its Hex value to #2B5574 and Opacity to 30%.
30. Click All on the Select menu to select all objects.
31. On the Arrange menu, click Group, or press CTRL+G to group the selected objects.
32. Double-click the name of this group in the Layers panel. Type the new name cloud and then press Enter.
33. On the File menu, click Save. Type the file name Cloud in the dialog and then click the Save button.
You have finished your cloud button. You can export your art objects to Expression Blend by using the Export dialog from Expression Design.
Currently rated 5.0 by 4 people
- Currently 5/5 Stars.
- 1
- 2
- 3
- 4
- 5