Blend 3.0入门之SketchFlow详解(下)

简介: 接上一篇Blend 3.0入门之SketchFlow详解(上),因发布限制,所以分为两篇,不好意思啊:-) 你可以通过三种方式浏览各个页面a. 通过Navigate导航,下面的滑块控制页面大小。这个里面包含了很好的层次结构,当然,也包括并不直观的控件页嵌套b.通过Map导航右上角的是放大在右侧View中。

接上一篇Blend 3.0入门之SketchFlow详解(上),因发布限制,所以分为两篇,不好意思啊:-)

  1. 你可以通过三种方式浏览各个页面
    a. 通过Navigate导航,下面的滑块控制页面大小。这个里面包含了很好的层次结构,当然,也包括并不直观的控件页嵌套
    clip_image002
    b.通过Map导航
    clip_image004
    右上角的是放大在右侧View中。
    clip_image006
    c.最后一种当然就是通过你在程序中为各个控件设定的NavigateTo来导航了
    clip_image008
    单击数据项可以跳转到DetailProducts页面,但是问题也来了
    clip_image010
    为什么会是空白呢?这其实是数据绑定的问题,需要通过代码解决。但是客户可不是这么认为的,他要做出一些FeedBack(反馈)以提示你这边应该显示数据。Blend SketchFlow很好的考虑了这一点
    clip_image012clip_image014
    点击FEEDBACK ,选择画笔(有粗细两种),另外一个是Eraser(橡皮擦),选择某颜色,然后就像做批注一样
    clip_image016
    有人问灯泡干嘛用的?是用来隐藏页面上批注的,注意是隐藏不是清除。
  2. 好的,现在客户审批完了,需要把反馈结果发送给项目部,所以我们要把结果导出,点击那个文件夹
    clip_image018 clip_image020 clip_image022
  3. 当你的项目部门收到客户反馈后,必须把它导入到原有工程中,才能根据要求开会作出讨论并修改
    clip_image024
    按加号导入反馈文件,点亮旁边的灯泡,看到如下图
    clip_image026
    一切搞定,现在按客户要求作出整改,至于怎么修复Bug,有很多方法,这里简要介绍下
    将下面的代码
    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Collection[0], Source={StaticResource SampleDataSource}}" >
            <local:Head Height="108" Margin="36,4,39,0" VerticalAlignment="Top" d:IsPrototypingComposition="True"/>
            <Grid Margin="51,123,37,89" Background="#FFD8DEF8" >
    替换修改下
    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}" >
            <local:Head Height="108" Margin="36,4,39,0" VerticalAlignment="Top" d:IsPrototypingComposition="True"/>
            <Grid Margin="51,123,37,89" Background="#FFD8DEF8" d:DataContext="{Binding Collection[0]}">
    将与Name属性绑定的TextBlock删除
    从控件库中拖动一个ComBox_Sketch到白板,注意不要拖进蓝色Grid区域中(此Grid被默认绑定到对象,不接受集合类型的控件
    然后拖动Data面板中的Name属性到ComBox,绑定完成。现在将其拖入区域中合适位置(此时是使用相对坐标,而不是层嵌套,所以Blend会提示你按下Alt键才能把元素嵌入Grid)。
    clip_image028
    但现在还不能实现将选中项的数据对象绑定到各个控件。
    我们选择蓝色区域的Grid,更改其数据绑定
    clip_image030
    点击右边的小正方形按钮,选择黄色DataBinding
    clip_image032
    最后,打开项目面板中DetailProducts.xaml.cs文件,在页面初始化函数之后加上一句代码:
    public Screen_1_4()
    {
                // Required to initialize variables
                InitializeComponent();
                this.comboBox.Loaded +=(s,e)=>this.comboBox.SelectedIndex = 0;
    }
  4. OK,再次运行我们的程序。
    clip_image034
    点击我们的列表项后自动跳转到详细页,Ok,数据也自动绑定好了,带可以让用户自由选择。
    clip_image036
    clip_image038
    clip_image040
  5. 关于更改样式
    先自己做个客户自定义样式,至于怎么做,请参考Blend 2 的相关教程,网上有很多,这里不详细介绍
    我的样式已经做好,是一个ButtonStyle
    clip_image042
    clip_image044
    clip_image046
    在需要应用样式的按钮上右击Edit Template –> Apply Resource –> ButtonStyle 勾选。
    样式更改其实很简单,而且这样一来,逻辑架构设计和样式设计可以并行处理,从而真正的高效率地开发项目。
    最后一睹完整的页面
    image

 

所有关于SketchFlow的介绍到此结束,若有遗漏或者疏忽,请多多交流。

 

作者 :双宇
本文系原创文章,转载请注明出处,谢谢!

目录
相关文章
|
8月前
|
前端开发
前端必看的8个HTML+CSS技巧 (七)混合模式(Blend)
前端必看的8个HTML+CSS技巧 (七)混合模式(Blend)
SwiftUI极简教程09:Gradient渐变色的使用
SwiftUI极简教程09:Gradient渐变色的使用
789 0
SwiftUI极简教程09:Gradient渐变色的使用
Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)
原文:Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)   平时我们所看到的雪花(Falling Snow)飘飘的效果实际上也是一个动画,是由许多的动画对象共同完成的一个界面效果。
971 0
|
C# 内存技术
Expression Blend学习动画基础
原文:Expression Blend学习动画基础 什么是动画(Animation)? 动画就是时间+换面的组合,画面跟着时间变化。最常见的是flash的动画,还有GIF动态图片。 动画的主要元素 时间线(Timeline):定义了值随着时间的变化方式。
696 0
|
内存技术
零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下)
原文:零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下) 抱歉久等了!!!! 终於到了动画MenuBar的...
1388 0
|
内存技术
零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上)
原文:零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上) 一直以来都有人拿Flash的动画问我Blend可不...
1385 0
|
内存技术
零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中)
原文:零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中) 我们接着进行动画MenuBar的制作 接续着上一...
1421 0