[Translated] Silverlight Getting Started: Part 6-beautifying User Interface styles and templates

This is the sixth part of the Silverlight getting started series. Click here to view the directories of this series.You can downloadC #OrVisual BasicVersion of this example applicationProgram.

We already have an application with complete functionality but icing on the cake. Let's make the search result template more beautiful. We are going to modify itemcontrols in the Data Template of search. XAML.

These modifications can be completed in blend just like the template editing function we have used. The new user interface style will look like this:

We can note that the template style is more refined, but it does not affect the originalCode. Although it will output a lot of code at the end, I can show you the position of the style in the final project.

The application style and template are similar to the bound data and template. If we observe the status of scrollviewer:

1 < Scrollviewer Style = "{Staticresource scrollviewerstyle }" ... 2 ...

Have you noticed similar syntaxes? By replacing {binding} with {staticresource}, you can point to existing resources in the document or app. XAML. In this example, the style is saved in APP. XAML (view the scrollviewerstyle and scrollbarstyle nodes at the bottom of the file ).

We have just made minor changes to the style color in the template. You do not have to worry about modifying your. Net code when editing styles and templates in blend. We can change the visual layout and topic of the control without changing the code.

More resources using expression Blend:

Adam Kinney's blog (blend instructor)

Style and skin Control

At this stage, it would be very helpful to have a UI Designer friend. In fact, it is very likely that you have defined this user interface very early. Because blend shares the project structure with Visual Studio, you can use any tool to easily open projects rather than loose files.

Take a look at the assets/styles. XAML file in the completed project to understand how styles and templates work.

Next step: run the application out of the browser.