IT tutorials
 
Mobile
 

Windows Phone 8 : Designing with Blend

12/15/2012 5:55:13 PM
- Windows 10 Product Activation Keys Free 2019 (All Versions)
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

To offering an Express version of Visual Studio the Windows Phone SDK includes an Express version of Expression Blend specifically for use in developing phone applications. You can launch Blend by looking for the shortcut key, or you can open it directly with Visual Studio. If you right-click on the MainPage.xaml file you will get a context menu like the one shown in Figure 1.

Figure 1. Opening Blend directly in Visual Studio

Image

When you select Open in Expression Blend, Blend will open the same solution in the Expression Blend tool with the selected XAML file in the editor, as shown in Figure 2. You should save your project before going to Blend to make sure Blend loads any changes (Ctrl-Shift-S).

Figure 2. The Blend user interface

Image

Although Expression Blend is thought of as purely a design tool, designers and developers alike can learn to become comfortable with it. And although Visual Studio and Expression Blend share some of the same features, both developers and designs will want to use Blend to build their designs. 

Like Visual Studio, Blend consists of a number of panes that you will need to get familiar with.

Note

Blend and Visual Studio both open entire solutions, not just files. This is a significant difference from typical design tools.

The first pane (labeled #1 in Figure 2) contains multiple tabs that give you access to several types of functionality. By default, the first tab (and the one in the foreground) is the Projects tab (though you could be showing a different tab by default). This tab shows the entire solution of projects. The format of this tab should look familiar; it’s showing the same information as the Solution Explorer in Visual Studio. The next pane (#2) is the editor pane. This pane contains tabs for each opened file (only one at this point). MainPage.xaml should be the file currently shown in the editor. Note that the editor shows the page in the context of the phone so that you can better visualize the experience on the phone. On the right-hand side of the Blend interface is another set of tabs (#3) that contain information about selected items in the design surface. The selected tab should be the Properties tab. This tab is similar to the Properties window in Visual Studio but is decidedly more designer-friendly. As you select items on the design surface, you’ll be able to edit them in the Properties tab here. Finally, the Objects and Timeline pane (#4) shows the structure of your XAML as a hierarchy.

Let’s make some changes with Blend. First (as shown in Figure 3) select the “hello world” text in the designer.

Figure 3. Selecting an object in Blend

Image

Once it’s selected, you can see that eight squares surround the selection. These are the handles with which you can change the size or location of the TextBlock. While this object is selected, the Objects and Timeline pane shows the item selected in the hierarchy; as well, the item is shown in the Properties tab so that you can edit individual properties (as shown in Figure 4).

Figure 4. Selecting an object to edit in the Properties pane

Image

If you type “text” into the search bar of the Properties pane, the properties that have that substring in them will appear (to temporarily reduce the number of properties in the Properties pane). You can change the title by changing the Text property, as shown in Figure 5.

Figure 5. Updating a property in Blend

Image

Once you’re done changing the text, you may want to click the “X” in the Search bar to clear the search criteria. This will remove the search and show all the properties of the TextBlock again.

Selecting items and changing properties seems similar to what you can do in Visual Studio, but that’s just where the design can start. Let’s draw something. Start by selecting a container for the new drawing. In the Objects and Timeline pane, choose the ContentPanel item. This will show you that it is a container that occupies most of the space below our “hello world” text on the phone’s surface.

We can draw a rectangle in that container by using the left-hand toolbar. On the toolbar you’ll see a rectangle tool (as shown in Figure 6). Select the tool and draw a rectangle in the ContentPanel to create a new rectangle (also shown in Figure 6). If you then select the top arrow tool (or press the V key) you’ll be able to modify the rectangle.

Figure 6. Drawing in a container

Image

The rectangle you created has eight control points (the small squares at the corners and in the middle of each side). In addition, the rectangle has two small control points in the upper-left side (outside the surface area of the rectangle). These controls are used to round the corners of rectangles. Grab the top one with your mouse and change the corners to be rounded slightly, as shown in Figure 7.

Figure 7. Rounding the corners

Image

Now that you have rounded the corners you can use the Properties pane to change the colors of the rectangle. In the Properties pane is a Brushes section showing how the different brushes for the rectangle are painted. The rectangle contains two brushes: a fill brush and a stroke brush. Selecting one of these brushes will allow you to use the lower part of the brush editor to change the look of that brush. Below the selection of brush names is a set of tabs for the different brush types, as shown in Figure 8.

Figure 8. Editing brushes

Image

The first four tabs indicate different options for brushes. These include no brush, solid color brush, gradient brush, and tile brush. Select the stroke brush, and then select the first tab to remove the stroke brush from the new rectangle. Now select the fill brush, and change the color of the brush by selecting a color within the editor, as shown in Figure 9.

Figure 9. Picking a color

Image

Now let’s put some text in the middle of our design to show some data. More specifically, let’s put a TextBlock on our design. Go back to the toolbar and double-click the TextBlock tool (as shown in Figure 10). Although we drew our rectangle, another option is to double-click the toolbar, which will insert the selected item into the current container (in this case, the ContentPanel). The inserted TextBlock is placed in the upper left of our ContentPanel, as also shown in Figure 10.

Figure 10. Inserting a TextBlock

Image

Once the new TextBlock is inserted, you can simply type to add some text. You should use the mouse to click on the Selection tool (the top arrow on the toolbar) so that you can edit the new TextBlock. You could use the mouse to place the TextBlock exactly where you like, but you could also use the Properties pane to align it. In the Properties pane, find the Layout section and select the horizontal center alignment and vertical bottom alignment, as shown in Figure 11. You might need to set your margins to zero as well to achieve the effect (as Blend may put a margin on your item depending on how you draw it).

Figure 11. Centering the TextBlock

Image

Next you can edit the font and size of the TextBlock using the Text section of the Properties pane. You will likely need to scroll down to reach the Text section. From there you can change the font, font size, and text decoration (e.g., bold, italic, etc.). Change the font size to 36 points and make the font bold, as shown in Figure 12.

Figure 12. Changing the text properties

Image

At this point our application does not do much, but hopefully you have gotten your first taste of the basics of using Blend for design. To get our first application to do something, we will want to hook up some of the elements with code. So we should close Blend and head back to Visual Studio.

When you exit Blend you will be prompted to save the project. Upon returning to Visual Studio your changes will be noticed by Visual Studio; allow Visual Studio to reload the changes.

 
Others
 
- Iphone Application : Implementing Location Services - Creating a Location-Aware Application (part 2) - Implementing the Location Manager Delegate
- Iphone Application : Implementing Location Services - Creating a Location-Aware Application (part 1)
- Iphone Application : Implementing Location Services - Understanding Core Location
- Windows Phone 8 : Creating a New Project (part 2) - XAML
- Windows Phone 8 : Creating a New Project (part 1) - Visual Studio
- Developing BlackBerry Tablet Applications : Permissions and Configuration Settings
- Developing BlackBerry Tablet Applications : Permissions
- Introducing Windows Phone 8 : The Marketplace
- Introducing Windows Phone 8 : Application Lifecycle, Driving Your Development with Services, Live Tiles
- Introducing Windows Phone 8 : Input Patterns
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS