Discussion on Windows Phone 7 development on the 31st day-5th: System topic

By Jeff Blankenburg

This article is about Windows Phone 7 development on the 31st day"5th day of the series.

Yesterday, I explained the device direction and how users adapt to these changes when changing their device direction. Today, let's see what we should do after they have changed their phone subject and color.

Dark and Light themes

If you haven't seen it yet, you can change the topic of your phone from deep to light and set an emphasis color. Let's take a look at the same application.ProgramTwo different themes are used:

Emphasis color

You can set a system-level emphasis color. The operating system provides 10 bright colors to choose from. These colors not only make full use of the phone's Start screen, but also for your applications. Let's take a look at these colors:

Default Value

When creating an application, it often changes the color of something. I am very supportive of this approach. This is your choice. But the more you change, the more you wantAll Content. I do not recommend that you use dark text (or the opposite) on a white background ). I mean, if you want to make something white, you need to carefully consider what it will look like if the phone Subject turns white (maybe not ). Fortunately, there is a simple way to deal with it, called expression blend 4.

Expression blend 4Device tags in

First, open the project in expression blend. The simplest way is to right-click the project in Visual Studio and select "open in expression blend ..."

After opening, there is a tag named "device" in the blend UI, which looks like this:

This label allows you to preview different themes and strong colors in the design layer on the right. This is very important when we start to use these colors in the program. For example, I want to use a background with a color in my program. The color is specified by the user. To do this, I used another outstanding feature of expression blend 4: Color resource tag.

Color Resource

Before youArticleWhy do I have to use expression blend? I am a developer !" Let me tell you before such a comment:All of this can be done with Visual Studio 2010.But that is very, very difficult. I am more inclined to implement it in a simple way when complicated methods are adopted that will not bring more benefits.

Windows Phone 7 uses a default color set when you do not overwrite them. In many cases, it is helpful to know these colors. In the image below, we can see that phoneaccentcolor and phonebackgroundcolor are changed based on the theme and strong color selected in the device tag. The first is deep/blue, and the second is light/orange.

After these colors are selected in the program, it allows us to bind them to specific system values. When the user changes his mind, the program can quickly reflect the changes. In the followingCodeYou will see that I have added a rectangle with progressive colors in the program to transition from phonebackgroundcolor to phoneaccentcolor. I also set the title of the application and used the highlighted color of the phone.

Code < Grid X: Name = "Layoutroot" Background = "Transparent" >

<Grid. rowdefinitions>

<RowdefinitionHeight= "Auto"/>

<RowdefinitionHeight= "*"/>

</Grid. rowdefinitions>

<! --Titlepanel contains the name of the application and page title-->

<RectangleStroke= "Black"Grid. rowspan= "2">

<Rectangle. Fill>

<LineargradientbrushEndpoint= "0.5, 1"Startpoint= "0.5, 0">

<GradientstopColor="{Staticresource phonebackgroundcolor}"Offset= "0"/>

<GradientstopColor="{Staticresource phoneaccentcolor}"Offset= "1"/>

</Lineargradientbrush>

</Rectangle. Fill>

</Rectangle>

<! --Titlepanel contains the name of the application and page title-->

<StackpanelX: Name= "Titlepanel"Grid. Row= "0"Margin=">

textblock X: Name =" applicationtitle " text =" blankensoft " style =" {staticresource phonetextnormalstyle} " />

<TextblockX: Name= "Pagetitle"Text= "System theming"Margin= "9,-7, 0, 0"Style="{Staticresource phonetexttitle1style}">

<Textblock. Foreground>

<SolidcolorbrushColor="{Staticresource phoneaccentcolor}"/>

</Textblock. Foreground>

</Textblock>

</Stackpanel>

<! --Contentpanel-place additional content here-->

<GridX: Name= "Contentpanel"Grid. Row= "1"Margin= "12, 0, 12, 0">

< Textblock Height = "601" Textwrapping = "Wrap" Horizontalalignment = "Left" Margin = "0, 6, 0, 0" X: Name = "Textblock1" Text = "Lorem ipsum dolor sit Amet, consectetur adipiscing elit. curabitur mollis turpis sit Amet diam elementum molestie. CRAs Quis massa ante. morbi sit Amet arcu quam, non dignissim nibh. nunc lectus Leo, ornare Quis imperdiet ID, Fringilla vel diam. proin vitae augue non SEM sollicitudin imperdiet ut Quis diam. nulla vitae nulla Eros. curabitur mauris Justo, eleifend EU sodales AC, blandit vitae mauris. pellentesque erat lorem, euismod at sodales eget, sollicitudin sed Velit. praesent est Sapien, hendrerit Tempor tincidunt Quis, posuere AC nunc. NAM Odio nisl, feugiat eget blandit sit Amet, dapibus ID Tellus. sed blandit nisi nunc. aliquam fermentum Justo tristique risus Porta sollicitudin. aenean aliquam congue ornare. curabitur blandit mi Quis Odio convallis adipiscing."Verticalalignment = "TOP" Width = "468"   />

</Grid>

</Grid>

This is the interface of the above two programs (the two have no difference except the subject and color ):

Download Sample Code

Download this example and use expression blend to open it. Use color resource adjustment. Preview changes using device tags. This will make your life easier.

Address: http://www.jeffblankenburg.com/post/31-Days-of-Silverlight-7c-Day-5-System-Theming.aspx