[译]Windows Phone的Expression Blend 4

By robot-v1.0

本文链接 https://www.kyfws.com/applications/expression-blend-4-for-windows-phone-zh/

01月01日, 0001 - 8 分钟阅读 - 3938 个词 阅读量 0

[译]Windows Phone的Expression Blend 4

原文地址：https://www.codeproject.com/Articles/84843/Expression-Blend-4-for-Windows-Phone

原文作者：Somnath Mondal

译文由本站 robot-v1.0 翻译

前言

An important thing in Blend for Windows Phone is that it is pretty much the same as in Silverlight with Blend. All the features work in the same way…

Windows Phone的Blend中的重要一点是,它与Silverlight with Blend中的几乎相同.所有功能都以相同的方式工作…

下载应用程序-232.17 KB(Download application - 232.17 KB)

介绍(Introduction)

Windows Phone的Expression Blend 4提供了与Windows Phone完全相同的简化开发工作流程,该工作流程以前仅适用于Silverlight和.NET应用程序,包括行为,示例数据和可视状态管理器等功能.(Expression Blend 4 for Windows Phone provides exactly the same streamlined development workflow for Windows Phone that was previously only available for Silverlight and .NET applications, including features such as behaviors, sample data, and the visual state manager.)

Blend基本上是一种用于用户体验的合成系统,它可用于在单个环境中进行内容创建,样式,布局,动画,数据设计和构建交互性.这也是一个非常紧密的工作流解决方案,与Visual Studio紧密集成在一起,为设计人员和开发人员提供了很好的工作流,因此您可以在Visual Studio和Blend中打开相同的解决方案,并在无需转换内容的情况下一起处理相同的内容.更重要的是,我们在Blend中也拥有正确的抽象,可为设计人员和开发人员提供正确的接口,以使其协同工作,例如自定义控件,样式化控件之类的概念(例如行为数据接口)和数据模型,这些数据使开发人员能够创建可以针对其进行设计的模型非常有效.我们还将内容管道与Adobe Creative Suite工具集成在一起.我们有一个非常强大的Photoshop导入器,可让您导入Photoshop图形.您可以通过多种方式将Blend集成到有效的工作流程中.(Blend is basically compositing system for user experiences, it can be used for content creation, styling, layout, animation, designing with data and building interactivity in one single environment. It is also very much a workflow solution that is very tightly integrated with Visual Studio that provides very good designers and developers workflow so that you can open the same solution in Visual Studio and Blend and work together on the same content without having to convert things. More importantly, we have also right abstraction in Blend to give designer and developers right interface to work together for example concept such as custom control, styled control things like behavior data interface and data model that enables developers to create the model which you can design against very efficiently. We also have content pipeline integration with Adobe creative suite tools. We have a very powerful Photoshop importer that lets you import Photoshop graphics; there are many ways that you can integrate Blend into efficient workflow.)

最后,Blend还附带了SketchFlow,这是Blend中内置的原型系统,允许任何人使用手绘组件快速演示想法,应用程序流程和屏幕布局.在SketchFlow播放器中查看已完成的SketchFlow项目,该播放器允许客户或团队成员在原型的上下文中添加反馈. SketchFlow项目可以是独立的原型,也可以直接转换为可运行的应用程序,从而缩短了开发时间.(Finally, Blend also comes with SketchFlow which is a prototyping system built into Blend that allows anyone to quickly demonstrate ideas, application flows, and screen layouts using hand-drawn components. Completed SketchFlow projects are viewed within a SketchFlow player which allows clients or team members to add feedback in the context of the prototype. SketchFlow projects can either be independent prototypes or converted directly to working applications, thereby shortening development time.)

Windows Phone预览2的Expression Blend 4在Expression Blend 4 Release Candidate中增加了对Windows Phone项目的支持.要完全启用此功能,您将需要安装:(Expression Blend 4 for Windows Phone Preview 2 adds support for Windows Phone projects to Expression Blend 4 Release Candidate. To fully enable this functionality, you will need to install:)

关于该项目(About the Project)

我创建了一个数据驱动的应用程序,它将列出一些电影信息.当用户从列表框项目中选择一个项目时,它还将显示详细信息.为了显示详细视图,我创建了状态转换来移动列表框以创建一些空间.通过"状态"面板,您不仅可以控制状态的外观,还可以控制状态之间的转换. Blend中的可视状态功能允许您添加状态组,并且可以在其中创建其他状态. Blend完全支持在设计模式下测试过渡;您可以看到在实际的应用程序中,不同状态之间的转换是如何发生的.(I have created a data driven application which will list some movie information. It will also display the details when user selects an item from listbox item. To show the detail view, I have created state transition to move the listbox to create some space. The States panel allows you to control not only the appearance of states, but the transition between them. Visual state feature in Blend allows you to add stategroup and within that, you can create a different state. Blend has full support to test the transition in design mode; you can see how the transition will happen in the real application between different states.)

我还使用行为添加了一些交互性.行为基本上是预先打包好的交互性的构建基块,您作为设计师可以拖放应用,开发人员可以编写自定义行为. Blend附带了您作为设计者可以在您的应用程序中使用的一些默认行为,但是总是编写自定义内容以提供设计人员可以使用的自己的行为,而无需编写实际代码.(I also added some interactivity using behaviors. Behaviors are basically prepackaged building blocks of interactivity that you as a designer can just apply as drag and drop, developers can write custom behaviors. Blend ships with some default behaviors that you as a designer can use in your application but it is always to write custom things to provide your own behaviors that designer can use without writing the actual code.)

Windows Phone的Blend中一个重要的事情是,它与Silverlight with Blend几乎相同.所有功能都以相同的方式工作.您可以用相同的方式创建控件,进行就地编辑,并且可以访问所有控件,例如,可以创建按钮,复选框和滑块等.默认情况下,Blend for phone将显示适合Windows Phone的界面,但是您可以创建自己喜欢的自定义样式.(An important thing in Blend for Windows Phone is that it is pretty much same as in Silverlight with Blend. All the features work in the same way. You can create the control in the same way, you have in place editing, and you have access all the controls, for e.g., you can create button, checkbox, and slider and so on. By default, Blend for phone displays the interface which is appropriate to Windows phone, but you can go and create your own custom style that you like to do.)

在本教程中,您将创建一个简单的Windows Phone应用程序以显示电影列表.(In this tutorial, you will create a simple Windows Phone application to display a list of movies.)

打开Expression Blend 4,选择"文件">“新建项目”.根据需要更改项目名称,然后单击"确定"按钮.(With Expression Blend 4 open, choose File > New Project. Change the project name as appropriate and click on the OK button.)
Blend将打开一个新屏幕.至此,我们将配置数据源.(Blend will open a new screen. At this point, we will configure the data source.)
下一步是从XML文件创建示例数据.为此,请打开记事本,然后将以下文本粘贴复制到编辑器中,然后将文件另存为(The next step is to create sample data from XML file. To do that, open Notepad and copy the following text paste in editor, save the file as)SampleMovieData.xml(SampleMovieData.xml).您可以在下面找到XML文件(. You can find the XML file under)**样本数据(SampleData)**文件夹也位于源文件中.(folder in the source file also.)
选择数据标签.单击创建样本数据下拉选项.单击"数据"选项卡下的"从XML导入样本数据"选项.(Select the Data tab. Click on Create sample data dropdown option. Click Import Sample Data from XML option under Data tab.)
将数据源名称命名为(Name data source name as) SampleMovieDataSource 然后单击浏览按钮以选择使用记事本保存的XML文件.单击确定按钮.(and click browse button to choose the XML file you saved using Notepad. Click OK button.)
您的数据标签将显示以下信息:(Your data tab will be displayed with the following information:)
现在,更改以下控件的text属性值:(Now change the text property value for the following control:)|控制名称(Control Name)|类型(Type)|新文字(New Text)| |-|-|-| | textBlockPageTitle | TextBlock | BookMyShow | | textBlockListTitle | TextBlock |立即预订电影票(Book Movie Ticket Instantly)|
现在我们将添加一个(Now we will add a) ListBox 并且我们将编辑其项目样式以获得以下效果.(and also we will edit its item style to get the following effect.)
拖动(Drag the) infoCollection 数据选项卡下的元素添加到设计图面. Blend将自动创建一个(element under Data tab to the design surface. Blend will automatically create a) listbox 为了你.单击以下选项更改项目模板.(for you. Click on the following option to change the item template.)
设计项目模板层次结构,如下所示:(Design the Item Template hierarchy as follows:)
生成的XML如下所示:(The generated XML looks like:)
我们将添加一个网格,(We will add a grid,) textBlock 和图像以显示电影详细信息屏幕.(and image to display the movie detail screen.)
生成的XML如下所示:(The generated XML looks like:)
现在,我们将向项目"列表"和"详细信息"添加两个状态.列表状态将设法显示(Now we will add two states to the project List and Detail. List State will manage to display the) ListBox 然后"细节状态"将使用"混合变换"功能显示选定的电影细节.单击可视状态组下的添加状态选项.(and Detail State will display the selected movie detail using Blend Transform feature. Click on Add State option under Visual State Group.)
将状态命名为列表,并创建另一个名称为Detail.选择详细状态.点击(Name the state as list and create another name as Detail. Select the detail state. Click on) listbox .改变(. Change the) Transform 属性如下:(property as follows:)
现在,我们将行为添加到(Now we will add behavior to the) ListBox 控制.如果用户要从列表中选择电影名称,我们希望将视图更改为详细信息模式.为此,请选择"资产"选项卡,然后选择"行为"选项.拖动(control. If user will select a movie name from the List, we want to change the view to detail mode. To do that, select the Asset tab and choose Behaviors options. Drag) GoToStateAction 列表中的行为并将其放到电影中(behavior from the list and drop it on the movie) listbox 控制.如下更改其属性:(control. Change its property as follows:)
按F5键运行项目. Blend具有在模拟器或实际电话设备上运行应用程序的功能.(Press F5 to run the project. Blend has the feature to run your application on emulator or on the actual phone device.)

概要(Summary)

为Windows Phone数据驱动的应用程序设计确实很容易.作为设计师,您可以真正地开始像对事物进行模拟和修饰,按照所需方式对其进行样式设置.(It is really easy to design for Windows phone data driven application. As a designer, you can really begin like mocking up things and making them up, style them the way you need.)

许可

本文以及所有相关的源代码和文件均已获得The Code Project Open License (CPOL)的许可。

C# C#4.0 C#3.0 .NET4 .NET Silverlight Design Architect 新闻翻译