Expression Blend for Silverlight 超丑数据加载效果

效果图: imageExpression Blend for Silverlight 超丑数据加载效果 imageimageExpression Blend for Silverlight 超丑数据加载效果 imageimageimageExpression Blend for Silverlight 超丑数据加载效果 imageimageimageimageExpression Blend for Silverlight 超丑数据加载效果 imageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果
在线演示地址:http://www.cnwp7.net/demo/dataloading/
在数据加载时各位是否考虑过效果,如果有需要在数据加载时显示一个加载过程的效果,那么请继续往下看(别光看哦,打开神器(Blend)照着做)。
1.打开神器-新建一个 Silverlight Application。
2.单击imageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果按钮,在 Controls 中找到 DataGrid,拖入设计器,Objects and Timeline 窗口中的树结构应如下图: imageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果
3.在 Objects and Timeline 窗口中选中 DataGrid 对象,在 Properties 窗口中找到 Layout,在 Layout 窗口中找到 Margin 属性,单击 Margin 属性右侧imageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果按钮,选择imageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果菜单,将属性值重置。
4.单击 Data 窗口,新建示例数据,如下图: imageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果 弹出新建示例数据窗口,单击“OK“ 按钮。此时 Data 窗口应如下图: imageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果
3.单击 Property2 右侧下拉按钮,将 Type 值更改为 String,如下图: imageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果
4.单击 Collection 右侧下拉按钮,单击”Add Sample Property“菜单,如下图: imageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果 重复此步骤,当出现 Property4为止。单击 Property4 右侧下拉按钮,将 Type 值更改为 Number。
5.单击 Collection 右侧imageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果按钮,在弹出的 Edit Samply Values 窗口中将 Property4 属性一列的值更改为100、200、300……每向下修改一行加100,如下图(这一步是必须要做的,否则不会有效果的,切忌): imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果
6.在 Data 窗口中选中 Collection,按住鼠标左键,将其拖到设计器中(也可以拖到 Objects and Timeline 窗口中的 DataGrid 对象)。
7.在 Objects and Timeline 窗口中依次展开 DataGrid-Columns,选中 Columns 节点下的所有列,如下图: imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果 在 Properties 窗口中找到 Layout 窗口,将 Width 属性右侧的 Auto 值更改为 Start,如下图: imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果
8.在 Objects and Timeline 窗口中选中 DataGrid 对象右键-Edit Additional Templates-Edit RowStyle-Edit a Copy…,如下图: imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果 弹出 Create Style Resource 窗口,单击”OK“按钮。
9.在 Objects and Timeline 窗口中选中 Root 对象,选中 Properties 窗口,按照下图更改属性值: imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果 imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果
10.选中 States窗口,在 States 窗口中单击imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果(Add state group)按钮,在新添加的 VisualStateGroup 上单击imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果(Add state)按钮,此时 States 窗口应如下图: imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果
11.在 Objects and Timeline 窗口中选中 Root 对象,选中 Properties 窗口,按照下图更改属性值: imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果 imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果
12.在 States 窗口中的找到 VisualStateGroup,单击 VisualStateGroup 右侧的 imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果(Turn _disibledevent=>imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果 单击 States 窗口中的”Base“。
14.在 Assets 窗口中选中 Behaviors,在右侧找到GoToStateAction,如下图: imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果 按下鼠标左键将其拖到 Objects and Timeline 窗口中的 Root 对象上,此时 Objects and Timeline 窗口应如下图: imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果
15.在 Objects and Timeline 窗口中选中 GoToStateAction 对象,在 Properties 窗口中找到 Trigger 窗口,在 TriggerType 属性右侧单击”New“按钮,在弹出的 Select Object 窗口中选择 TimerTrigger,单击”OK“按钮。在 MillisecondsPerTick 属性右侧,单击imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果按钮,选择”Data Binding…”菜单,如下图: imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果 在弹出的 Create Data Binding 窗口中,选择 Data Context 选项卡,在 Fields 列表中选择 Collection 下的 Property4属性,单击”OK“按钮,如下图: imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果 在 Common Properties 窗口中将 StateName 属性值设置为 VisualState,此时属性窗口应如下图: imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果
所有步骤已经完成,应该可以 ctrl+F5了。 imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果 imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimageExpression Blend for Silverlight 超丑数据加载效果
效果蛮酷吧?其实其他效果也是同样的原理,万变不离其宗,留给你们当家庭作业了,哈哈。
最后还是那句,10分钟,你学会没有?
源码下载
Tags: 

延伸阅读

最新评论

发表评论