Click here to Skip to main content
15,867,594 members
Articles / Programming Languages / C# 4.0

Expression Blend 4 for Windows Phone

Rate me:
Please Sign up or sign in to vote.
4.53/5 (13 votes)
31 May 2010CPOL5 min read 43K   766   23   6
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...

Introduction

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.

Image_01.png

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.

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.

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

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.

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.

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.

In this tutorial, you will create a simple Windows Phone application to display a list of movies.

  • With Expression Blend 4 open, choose File > New Project. Change the project name as appropriate and click on the OK button.

    Image_02.png

  • Blend will open a new screen. At this point, we will configure the data source.

    Image_03.png

  • 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. You can find the XML file under SampleData folder in the source file also.
    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>
  • Select the Data tab. Click on Create sample data dropdown option. Click Import Sample Data from XML option under Data tab.

    Image_04.png

  • Name data source name as SampleMovieDataSource and click browse button to choose the XML file you saved using Notepad. Click OK button.

    Image_05.png

  • Your data tab will be displayed with the following information:

    Image_06.png

  • Now change the text property value for the following control:
    Control NameTypeNew Text
    textBlockPageTitleTextBlockBookMyShow
    textBlockListTitleTextBlockBook Movie Ticket Instantly
  • Now we will add a ListBox and also we will edit its item style to get the following effect.

    Image_07.png

  • Drag the infoCollection 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.

    Image_08.png

  • Design the Item Template hierarchy as follows:

    Image_09.png

  • The generated XML looks like:
    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>
  • We will add a grid, textBlock and image to display the movie detail screen.

    Image_10.png

  • The generated XML looks like:
    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>
  • 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.

    Image_11.png

  • Name the state as list and create another name as Detail. Select the detail state. Click on listbox. Change the Transform property as follows:

    Image_12.png

  • 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:

    Image_13.png

  • Press F5 to run the project. Blend has the feature to run your application on emulator or on the actual phone device.

Summary

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralQuestions Pin
Rohan Madtha12-Dec-10 13:37
Rohan Madtha12-Dec-10 13:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.