Silverlight入门:第六部分 美化用户界面的样式与模板

我们已经有了一个功能完备但还可以锦上添花的应用程序。让我们使搜索结 果模板更漂亮一些。我们准备在Search.xaml的数据模板中为ItemControls做一 些修改。

这些修改就像我们已经使用过的编辑模板功能一样可以在Blend中完成。应用 了新的用户界面样式看起来会像这样:

我们可以注意到模板风格更精致了,却没有影响到原来的代码。虽然最后它 将会输出大量的代码,但是我可以给你指出最终项目中的样式的位置。

应用样式和模板与绑定数据和模板很相像。如果我们观察一下ScrollViewer 的状态:

1 <ScrollViewer Style="{StaticResource  scrollViewerStyle}" ...
2 ...

注意到相似的语法了吗?通过将{Binding}替换为{StaticResource}可以指向 文档或App.xaml中已有的资源。在这个例子中,样式被保存在App.xaml中(查看 文件底部的scrollViewerStyle和scrollBarStyle节点)。

我们也刚刚对模板中包含的样式颜色做了微小的改动。在Blend中编辑样式和 模板,你大多不用担心修改你的.NET代码。我们可以在不改变代码的情况下改变 控件的可视化布局和主题。

更多使用Expression Blend的资源:

Adam Kinney的博客 (Blend讲师) :http://www.adamkinney.com/

样式和皮肤控制: http://visitmix.com/labs/Rosetta/eyesofblend/skinning/

在这个阶段如果能有一个UI设计师朋友那会是非常有帮助的。实际上,你很 有可能在很早的时候就已经定义完成这个用户界面了。因为Blend与Visual Studio共享项目结构,所以你可以用任一工具很容易地打开项目而不是松散的文 件。

看一看已完成的项目中的Assets/Styles.xaml文件,理解样式和模板是如何 工作的。

下一步:通过使应用程序脱离浏览器运行来完成它。

Powered By D&J (URL:http://www.cnblogs.com/Areas/)
原文地址:https://www.cnblogs.com/Areas/p/2169796.html