Expression Blend 4 for Windows Phone

• 下载应用程序 - 232.17 KB

引言

Expression Blend 4 for Windows Phone 为 Windows Phone 提供了与之前仅适用于 Silverlight 和 .NET 应用程序相同的精简开发工作流程，包括行为、示例数据和可视化状态管理器等功能。

Blend 本质上是一个用户体验的组合系统，可以在一个环境中用于内容创建、样式设置、布局、动画、使用数据设计和构建交互性。它也是一个与 Visual Studio 紧密集成的流程解决方案，为设计人员和开发人员提供了非常好的工作流程，这样您就可以在 Visual Studio 和 Blend 中打开同一个解决方案，并在不进行转换的情况下协同处理相同的内容。更重要的是，Blend 还提供了正确的抽象，为设计人员和开发人员提供了正确的工作接口，例如自定义控件、样式控件、行为数据接口和数据模型等概念，使开发人员能够创建可以高效设计的模型。我们还具有与 Adobe Creative Suite 工具的内容管道集成。我们有一个非常强大的 Photoshop 导入器，可以导入 Photoshop 图形；有许多方法可以将 Blend 集成到高效的工作流程中。

最后，Blend 还附带了 SketchFlow，这是一个内置于 Blend 中的原型系统，允许任何人使用手绘组件快速演示想法、应用程序流程和屏幕布局。完成的 SketchFlow 项目将在 SketchFlow 播放器中查看，该播放器允许客户或团队成员在原型上下文中添加反馈。SketchFlow 项目可以是独立的原型，也可以直接转换为可用的应用程序，从而缩短开发时间。

Expression Blend 4 for Windows Phone Preview 2 为 Expression Blend 4 Release Candidate 添加了对 Windows Phone 项目的支持。要完全启用此功能，您需要安装

• Expression Blend 4 Release Candidate (RC)
• Microsoft Expression Blend Add-in Preview 2 for Windows Phone
• Microsoft Expression Blend Software Development Kit Preview 2 for Windows Phone
• Windows Phone 开发人员工具

关于项目

我创建了一个数据驱动的应用程序，它将列出一些电影信息。当用户从列表框项中选择一项时，它还将显示详细信息。为了显示详细信息视图，我创建了一个状态转换，以便为列表框腾出一些空间。状态面板不仅可以控制状态的外观，还可以控制它们之间的过渡。Blend 中的可视化状态功能允许您添加状态组，并在其中创建不同的状态。Blend 完全支持在设计模式下测试过渡；您可以看到过渡在不同状态之间的实际应用程序中将如何发生。

我还通过行为添加了一些交互性。行为本质上是可重用的交互性构建块，您作为设计人员可以像拖放一样应用它们，开发人员可以编写自定义行为。Blend 附带了一些默认行为，您作为设计人员可以在应用程序中使用它们，但编写自定义内容以提供您自己的行为供设计人员使用而无需编写实际代码总是有益的。

Blend for Windows Phone 的一个重要之处在于，它与 Blend for Silverlight 基本相同。所有功能都以相同的方式工作。您可以以相同的方式创建控件，进行就地编辑，并且可以访问所有控件，例如，您可以创建按钮、复选框、滑块等。默认情况下，Blend for phone 会显示适合 Windows Phone 的界面，但您可以根据需要创建自己的自定义样式。

在本教程中，您将创建一个简单的 Windows Phone 应用程序来显示电影列表。

• 打开 Expression Blend 4，选择“文件”>“新建项目”。根据需要更改项目名称，然后单击“确定”按钮。

  

• Blend 将打开一个新屏幕。此时，我们将配置数据源。

  

• 下一步是从 XML 文件创建示例数据。为此，请打开记事本，复制以下文本并粘贴到编辑器中，然后将文件保存为SampleMovieData.xml。您可以在源文件中的SampleData文件夹下找到 XML 文件。

  <?xml version='1.0' encoding='utf-8'?>
  <records >
      <info>
        <name>You Again</name>
        <title>Andy Fickman</title>
        <imageurl>http://trailers.apple.com/trailers/disney/youagain/
  	images/poster.jpg
        </imageurl>
        <description>
          No matter how old you are, you never get over high school. 
  	Successful PR pro Marni (KRISTEN BELL) heads home for her older brother’s 
  	(JIMMY WOLK) wedding and discovers that he’s marrying her high school arch 
  	nemesis (ODETTE YUSTMAN), who’s conveniently forgotten 
  	all the rotten things she did so many years ago. 
  	Then the bride’s jet—setting aunt 
  	(SIGOURNEY WEAVER) bursts in and Marni’s not—so—jet—setting mom 
  	(JAMIE LEE CURTIS) comes face to face with her own high school rival. 
  	The claws come out and old wounds are opened in this crazy comedy about 
  	what happens when you’re reunited with the one person you’d like to forget.
        </description>
      </info>
      <info>
        <name>Love Ranch</name>
        <title>Taylor Hackford</title>
        <imageurl>http://trailers.apple.com/trailers/independent/
  	loveranch/images/poster.jpg
        </imageurl>
        <description>
          LOVE RANCH is a bittersweet love story that turns 
  	explosive when the players 
  	in a romantic triangle lose control and cross the line. 
  	Set in the late–1970s, 
  	depicting larger than life personalities living on the edge, 
  	LOVE RANCH stars 
  	Helen Mirren and Joe Pesci as Grace Bontempo and Charlie Bontempo, 
  	the husband and wife team who own and 
  	run Nevada’s first legalized brothel. 
  	Their lives are suddenly altered when Armando Bruza, a husky, 
  	world famous heavy weight boxer from South America, 
  	played by hot up–and–coming Spanish actor Sergio Peris–Mencheta, 
  	is brought to the Ranch to train as part of Charlie’s ever–expanding 
  	entrepreneurial empire. Plans quickly go awry when Bruza comes between 
  	Grace and Charlie as an unforeseen love triangle develops that erupts 
  	into uncontrollable passion and murder.
        </description>
      </info>
      <info>
        <name>Charlie St. Cloud</name>
        <title>Burr Steers</title>
        <imageurl>
  	http://trailers.apple.com/trailers/universal/charliestcloud/images/
  	poster.jpg
        </imageurl>
        <description>Based on an acclaimed novel, Charlie St. Cloud is a 
  	romantic drama starring Zac Efron as a young man who survives an accident 
  	that lets him see the world in a unique way. In this emotionally 
  	charged story, he begins a romantic journey in which he embraces 
  	the dark realities of the past while discovering the 
  	transformative power of love. Accomplished sailor 
  	Charlie St. Cloud (Efron) has the adoration of mother Claire 
  	(Oscar® winner Kim Basinger) and little brother Sam 
  	(newcomer Charlie Tahan), as well as a college scholarship 
  	that will lead him far from his sleepy 
  	Pacific Northwest hometown. But his bright future is cut short when a 
  	tragedy strikes and takes his dreams with it. 
  	After his high–school classmate 
  	Tess (Amanda Crew) returns home unexpectedly, Charlie grows torn between 
  	honoring a promise he made four years earlier 
  	and moving forward with newfound 
  	love. And as he finds the courage to let go of the past for good, Charlie 
  	discovers the soul most worth saving is his own.
        </description>
      </info>
      <info>
        <name>Step Up 3D</name>
        <title>Jon M. Chu</title>
        <imageurl>http://trailers.apple.com/trailers/touchstone/stepup3d/
  	images/poster.jpg
        </imageurl>
        <description>
          New York’s intense street dancing underground comes alive in eye–popping 
  	Digital 3D as a tight–knit group of street dancers 
  	(RICK MALAMBRI, SHARNI VINSON) 
  	team up with Moose (ADAM SEVANI) and find themselves pitted against 
  	the world’s best hip hop dancers in a high–stakes 
  	showdown that will change 
  	their lives forever.</description>
      </info>
    <info>
      <name>Secretariat</name>
      <title>Randall Wallace</title>
      <imageurl>http://trailers.apple.com/trailers/disney/secretariat/
  	images/poster.jpg
      </imageurl>
      <description>
        Against all odds, housewife and mother Penny Chenery 
  	(DIANE LANE)—with the help 
  	of veteran trainer Lucien Laurin (JOHN MALKOVICH)—navigates 
  	the male–dominated horseracing business, ultimately taking Secretariat 
  	on a spectacular journey to become the first Triple Crown 
  	winner in 25 years and perhaps the greatest racehorse of all time.
      </description>
    </info>
    <info>
      <name>Splice</name>
      <title>Vincenzo Natali</title>
      <imageurl>http://trailers.apple.com/trailers/wb/splice/images/poster.jpg
      </imageurl>
      <description>
        Superstar genetic engineers Clive (Adrien Brody) and Elsa (Sarah Polley) 
  	specialize in splicing together DNA from different animals to create 
  	incredible new hybrids. Now they want to use human DNA in a hybrid that 
  	could revolutionize science and medicine. 
  	But when the pharmaceutical company 
  	that funds their research forbids it, 
  	Clive and Elsa secretly conduct their 
  	own experiments. The result is Dren, an amazing, 
  	strangely beautiful creature 
  	that exhibits uncommon intelligence and an array of unexpected physical 
  	developments. And though, at first, Dren exceeds their wildest dreams, 
  	she begins to grow and learn at an accelerated rate——and threatens to 
  	become their worst nightmare.
      </description>
    </info>
    <info>
      <name>Countdown to Zero</name>
      <title>Lucy Walker</title>
      <imageurl>
  	http://trailers.apple.com/trailers/magnolia/countdowntozero/
  	images/poster.jpg
      </imageurl>
      <description>
        COUNTDOWN TO ZERO traces the history of the atomic bomb 
  	from its origins to the present state of global affairs: 
  	nine nations possessing nuclear weapons 
  	capabilities with others racing to join them, with the world held in a 
  	delicate balance that could be shattered by an act of terrorism, 
  	failed diplomacy, or a simple accident. Written and directed by acclaimed 
  	documentarian Lucy Walker (The Devil’s Playground, Blindsight), 
  	the film features an array of important international statesmen, 
  	including President Jimmy Carter, Mikhail Gorbachev, Pervez Musharraf 
  	and Tony Blair. It makes a compelling case for worldwide 
  	nuclear disarmament, an issue more topical than ever with the 
  	Obama administration working to revive this goal today. 
  	The film was produced by Academy Award® winner and 
  	current nominee Lawrence Bender (Inglourious Basterds, 
  	An Inconvenient Truth) and developed, financed and executive 
  	produced by Participant Media, 
  	together with World Security Institute. Participant collaborated with 
  	Magnolia on last year’s Food, Inc., 
  	recently nominated for an Academy Award®, and the upcoming 
  	CASINO JACK and the United States of Money. Jeff Skoll, Diane 
  	Weyermann, Bruce Blair and Matt Brown are the film’s executive producers.
      </description>
    </info>
  </records>

• 选择“数据”选项卡。单击“创建示例数据”下拉选项。在“数据”选项卡下，单击“从 XML 导入示例数据”选项。

  

• 将数据源名称命名为SampleMovieDataSource，然后单击浏览按钮选择您使用记事本保存的 XML 文件。单击“确定”按钮。

  

• 您的“数据”选项卡将显示以下信息

  

• 现在更改以下控件的文本属性值

  控件名称	类型	新文本
  textBlockPageTitle	TextBlock	BookMyShow
  textBlockListTitle	TextBlock	立即预订电影票

• 现在我们将添加一个ListBox，并且还将编辑其项样式以获得以下效果。

  

• 将“数据”选项卡下的infoCollection元素拖到设计表面。Blend 将自动为您创建一个listbox。单击以下选项更改项模板。

  

• 将项模板层次结构设计如下

  

• 生成的 XML 如下所示

  <StackPanel>
      <Grid >
      	<Grid.RowDefinitions>
      	    <RowDefinition Height="Auto"/>
      	    <RowDefinition Height="Auto"/>
      	    <RowDefinition Height="Auto"/>
      	    <RowDefinition Height="Auto"/>
      	    <RowDefinition Height="Auto"/>
      	</Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
      	    <ColumnDefinition Width="78"/>
      	    <ColumnDefinition Width="*"/>
           </Grid.ColumnDefinitions>
           <Border Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" 
  		BorderThickness="0.25" Margin="2">
                <StackPanel Orientation="Vertical">
                    <Image x:Name="imgMoviePoster" Source="{Binding imageurl}" 
  	             Width="78" Height="78"  Stretch="Fill" 
  	             HorizontalAlignment="Left" Margin="0,0,0,0" />
                </StackPanel>
          </Border>
          <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0" 
  		Grid.RowSpan="2" 
  		Margin="15,5,5,5" VerticalAlignment="Center" 
  		HorizontalAlignment="Left">
              <TextBlock x:Name="txtMovieName" TextAlignment="Left" 
  	         Text="{Binding name}"  TextWrapping="Wrap" 
  		Height="25" Margin="0" Width="500" />
              <TextBlock x:Name="txtMovieDirector" Text="{Binding director}" 
  	         TextWrapping="Wrap" Height="42" Margin="0,5,0,0" 
  		FontSize="18.667" Style="{StaticResource PhoneTextNormalStyle}" 
  	         Width="500"/>
   	</StackPanel>
      </Grid>
  </StackPanel>

• 我们将添加一个网格、一个textBlock和一个图像来显示电影详细信息屏幕。

  

• 生成的 XML 如下所示

  <Grid x:Name="DetailGrid" Margin="20,30,0,-30"  >
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="78"/>
          <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>
          <Border Grid.Column="0" Grid.Row="0" 
          Grid.RowSpan="5" BorderThickness="0.25" Margin="2,9,2,-5.2">
      <StackPanel Orientation="Vertical">
          <Image x:Name="imgMoviePoster2" Source="{Binding imageurl}" 
          Width="78" Height="78"  Stretch="Fill" 
          HorizontalAlignment="Left" Margin="0,0,0,0" />
      </StackPanel>
      </Border>
          <StackPanel Orientation="Vertical" Grid.Column="1" 
          Grid.Row="0" Grid.RowSpan="2" Margin="15,5,0,5" 
             VerticalAlignment="Center" HorizontalAlignment="Left">
          <TextBlock x:Name="movieName" TextAlignment="Left" 
          	   Text="{Binding name}"  TextWrapping="Wrap" 
              Height="25" Margin="0" 
              Style="{StaticResource PhoneTextNormalStyle}" 
              HorizontalAlignment="Left" Width="500" />
          <TextBlock x:Name="movieDirector" Text="{Binding title}"  
              TextWrapping="Wrap" Height="42" Margin="0,5,0,0" 
              FontSize="18.667" Style="{StaticResource PhoneTextSubtleStyle}" 
              HorizontalAlignment="Left" Width="500"/>
          </StackPanel>
          <TextBlock x:Name="movieDescription" Grid.Row="4" 
              Grid.Column="0" Grid.ColumnSpan="2"   
              Text="{Binding description}" TextWrapping="Wrap" 
              HorizontalAlignment="Left" 
              Margin="2,2,5,2" Padding="0" VerticalAlignment="Top" 
              Style="{StaticResource PhoneTextSmallStyle}" Height="400"/>
  </Grid>

• 现在我们将为项目添加两个状态：列表（List）和详细信息（Detail）。列表状态将管理ListBox的显示，详细信息状态将使用 Blend 变换功能显示选定的电影详细信息。单击“可视化状态组”下的“添加状态”选项。

  

• 将状态命名为 list，再创建一个名为 Detail 的。选择详细信息状态。单击listbox。将Transform属性更改为以下内容

  

• 现在我们将向ListBox控件添加行为。如果用户从列表中选择一个电影名称，我们希望将视图更改为详细模式。为此，请选择“资产”选项卡并选择“行为”选项。将GoToStateAction行为从列表中拖动并将其放置在电影listbox控件上。将其属性更改为以下内容

  

• 按 F5 运行项目。Blend 具有在模拟器或实际手机设备上运行应用程序的功能。

摘要

为 Windows Phone 数据驱动的应用程序设计非常容易。作为设计人员，您可以真正开始模仿和创建事物，并按照您需要的方式设置样式。