WP7-Expression Blend 设计wp7应用程序用户界面

转自：http://www.devdiv.com/thread-36212-1-1.html     

你用可以使用Expression Blend设计基于桌面的富客户端网络应用程序，你也可是设计出Windows phone 的基于Silverlight的应用程序。 Expression Blend for Windows Phone

允许你创建基于XAML接口的Windows Phone 应用程序，它的事件行为可以在Visual Studio中设置。
         Expression Blend for Windows Phone被包含在Windows Phone开发工具中了。
         
        例子一：用Expression Blend创建一个自定义的Button
        
                一般情况下，Silverlight控件用模板将界面和逻辑分开。一个ControlTemplate指定一个控件的可视化的结构和可视化的行为。你能修改它们的默认的ControlTemplate
        的设置来自定义大部分控件的显示状态。允许你在不修改控件对应函数功能的情况下修改控件的显示状态。例如，你能将你的应用程序中的方块按钮修改成圆形按钮，而原
        先得按钮事件Click仍然保留。
                
                在这个例子中，你用 Expression Blend 打开在前面练习中创建的HelloPhone的Visual Studio工程、修改程序中按钮的ControlTemplate的设置，改变按钮的外观。
        因为你在XAML中在ControlTemplate，你能不写任何代码的情况下修改控件的外观。
                                                                 
                                                                                图一： 改变控件的外观和体验
                                                                                
                1. 用Visual Studio 2010打开前面创建的工程 HelloPhone.
                
                2. 现在用 Expression Blend 打开当前的项目。方法是：在Visual Studio中，选择MainPage.xaml单击右键，选择 Open in Expresssion Blend.
                   如果有警告提示，选择Yes忽略它.
                                                          
                                                                         图二： 用Express Blend打开项目工程
                3. 在Expression Blend中，确定打开了MainPage.xaml，如果有必要的话，双击Project面板打开它- 当前的的workspaces被设置为Design. 去看当前的workspaces
                   在Windows菜单中确定Design选项被选中。
                                                         
                                                                    图三： 在Expression Blend中，选择当前workspace
                
                4. 在设计窗口，右击"Click Me"按钮，选择Edit Template，在选择Create Empty.
                
                5. 在Create ControlTemplate Resource对话框中，设置Name为FancyButton,保持当前的"This document"在Define in选项下，点击Ok.
                                                        
                                                                         图四： 创建一个空的按钮控件模板
                                                                         
                         注意： 资源提供了一个简单的方法重用已经被定义的通用对象和值.你能定义一些通用的item,比如控件的模板、样式、画刷、颜色、和动画效果，并且
                                                         将他们存储在资源字典中。一个资源字典是有关键字对象的字典。它能用在XAML和代码中。你能在你的应用程序构架中创建你的资源字典的使用
                                                         范围，是页面内部使用合适整个应用程序都使用。上面的对话框给你一种选择定义全局Application范围的控件模板，在那例子中它被存放在
                                                         App.xaml中，这样你能在整个应用程序中使用这个模板，或者你也能将它存在This document这样你只能在同一页面内使用这个控件模板。
                                                         
                6. 如果object and Timeline面板不可见，选择菜单Window 在选在Objects and Timeline，这样就可以看到这个面板了。如果有必要你能重置workspace到
                         到软件的默认状态。
                         
                         注意：当你创建一个新的模板时，Expression Blend输入一个模型，在这个模型上你可以查看和修改为新的模板。在Object and Timeline面板内，word
                               面板在在新的元素数的根部，指示你编辑控件的模板的适用范围。
          
          7. 改变当前模板的根不具容器.在Object and TimeLine面板中，在模板里面右击Grid， 指向Change Layout Type，然后选择Border。
                                              
                                                              图五： 改变模板的根布局容器
                          注意：当你创建一个ControlTemplate时，你合并FrameworkElement对象为一个单独的控件.一个ControlTemplate必须有一个FrameworkElement作为
                                它的根元素。根元素通常包括其他的FramewrokElement对象.合并在一起的对象由控件的可见框架构成的。
                                
          8. 在Object and TimeLine面板上，Border被选中后，在Properties面板下的Appearance中，设置BorderThickness属性边的值为2，然后设置CornerRadius
             在属性值为15。
                                                       
                                                                 图六： 配置border元素的外观
                                                     
          9. 现在，在Brushes选项中，选择Background属性并且点Gradient brush选项，然后点击the left gradient stop（下图的最下边左边用红色圆圈括住的控件）,
                  选择后设置颜色值，例如： #FFADADAD。 接着设置select the right gradient stop的颜色值为 #FF0A0A0A（下图的最下边右边用红色圆圈括住的控件）.
                                                                  
                                                             图七：为按钮背景配置一个渐变颜色的画刷
                                                                                  
          10. 然后，在Brushes 选项中，选择BorderBrush属性，选择一个Solid color brush 选择一个浅灰色的值，例如#FFC0C0C0.
                                                         
                                                            图八：为按钮边框配置一个solid brush
                                                                                  
          11. 一旦你创建了按钮的背景，下一步就是增加一个标题。第一，确定Border在Object and Timeline面板中仍然被选中。
          
          12. 然后，转换到Assets面板，选择Controls目录，在下拉框中选择TextBlock控件。然后双击它，就将他插入到Border元素中。
                                                       
                                                          图九： 从工具箱中插入一个TextBlock控件
                                                                   
                                                          图十： 在Object and Timeline下显示，在Border元素中插入一个TextBlock
                                                                                  
          13. 现在，在Tools面板中，点击Selection tool最上面的图标或者选择键盘V，重新恢复选择模式。
                          
                                  注意：插入TextBlock后，设计者仍然是在插入模式下你能继续增加其他的TextBlock元素，直到你退出这个模式。
          
          15. 在Objects and Timeline面板下，选择新增加的Textblock元素。然后再属性面板内，打开Brushes目录，设置Foreground画刷为前颜色，例如： #FFFFFFFF.
                                                          
                                                              图十一： 设置按钮的foreground颜色
             
          16. 下一步，打开Layout目录，设置 HorizontalAlignment 和 VerticalAlignment 属性值为Center. 然后设置Margin属性值为10为左右两边，设置顶部和底部
              的值为4。
                                                 
                                                            图十二： 配置标题的页面距和布局属性
                                                                      
          17. 设置TextBox控件的Text属性到按钮模板控件的Content属性值。方法如下：
                          
                          1. 打开Common Properties目录
                          2. 点击Advanced property options- 在属性值旁边的一个方块图标，如下图中被红色标框提示。
                          3. 选择Template Binding展示属性列表，这些属性能被绑定。
                          4. 从列表中选择Content属性
                                                 
                                                                      图十三： 绑定Text属性到模板上
              
          18. 点击CTRL+5保存更新的文件。
                          你现在能测试新的自定义的按钮。 Expression Blend for Windows Phone允许在手机上或者模拟器上运行你的应用程序。注意如果你打开Device模板，
                          你选择在那个上面测试你的应用程序。默认情况下使用模拟器来运行应用程序。
                                                    
                                                                           图十四：绑定Text属性刀模板上
                                                                           
          19. 点检F5运行测试程序。在文本框中输入字符串，然后点击按钮。
                                                       
                                                                          图十五： 从 Expression Blend for Windows Phone从启动一个应用程序
                          
                          注意：即使点击触发了期望的行为事件，但是没有显示按钮是焦点或者什么时候它被按下。在下边的例子中，你将更新你的模板，根据状态来改变按钮的状态。
        
        例子二：在按钮上增加状态的变化
                
                在这个例子中，你将修改你的模板，点击按钮时，按钮显示焦点，然后再非按钮区域点击时，按钮会取消焦点。
                
                1. 在Object and Timeline面板下，选择Border控件。
                
                2. 现在，转到State面板，查看按钮的可用状态。
                                                           
                                                                        图十六：状态面板显示可用的状态
                                                                                
                        注意：State状态显示所有的可用的控件状态。在这个状态下，你自定义模板区定义基本的显示。然后每一个状态你改变模板来和你的状态向匹配，例如
                                                在焦点状态下，按钮周围有包围框。
                                                
                3. 在ForcusStates目录下，选择Unfocused状态，这时按钮在没有焦点情况下的显示。
                                                            
                                                                         图十七：状态记录
                                                                         
          4. 隐藏按钮的包围框，当按钮失去焦点时：
             
             1. 在Object and Timeline面板下选择Border
             2. 在Properties面板下，打开Brushes目录选择BorderBrush属性
             3. 点击Show advanced properties图标，设置Opacity属性值为0
                                                 
                                                     
                                                             图18：当失去焦点时，按钮的包围框透明
                                                             
          5. 转到States面板选择Pressed状态，保存鼠标点击时的状态变化。
          
          6. 在Properties面板下，打开Transform目录，选择Translate。设置X和Y的值为2。这样当按钮被点击时，就稍微的改变了按钮的位置，去表明他被按下了。
          
                                              
                                                          图19： 在按下后按钮移动
                                                                  
          7. 最后，在States面板中，选择Base模板区关闭记录模式。
          
          8. 保存更新
          
          9. 运行程序，测试效果。注意观察下面情况；
                          
                          1. 在文本框中输入文字，点击Tab是按钮获得焦点
                          2. 注意，当按钮获得焦点后，包围框包围了按钮，说明他被激活了
                          3. 现在，点击按钮看他的位置是怎么改变的来表明它被按下