Create a custom Windows Phone style (2)-mango implementation

Source: Internet
Author: User

The topic settings for earlier versions of Mango are visible in the previous article.Article:Create a custom WP7 topic-simple theme implementation

I recently started mango development and found that the previous custom theme method won't work here (thanks @. net), the main problem is whether to overwrite the system default style.

To compare two projects, first create a 7.0 project.

Mainpage. XAMLCodeAs follows:

<Grid X: Name = "layoutroot" background = "Transparent"> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "*"/> </grid. rowdefinitions> <! -- Titlepanel contains the name of the application and page title --> <stackpanel X: Name = "titlepanel" grid. row = "0" margin = ","> <textblock X: name = "applicationtitle" text = "my application" style = "{staticresource phonetextnormalstyle}"/> <textblock X: name = "pagetitle" text = "Page name" margin = "9,-7,0, 0" style = "{staticresource phonetexttitle1style}"/> </stackpanel> <! -- Contentpanel-place additional content here --> <grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0"> </GRID>

Run the command without modifying anything.Program, As follows:

To modify the topicC: \ Program Files (x86) \ microsoft sdks \ Windows Phone \ v7.0 \ DesignCopy themeresource. XAML to the project and add it to app. XAML.

 
<Application. Resources> <resourcedictionary. mergeddictionaries> <resourcedictionary source = "mthmtheme/themeresources. XAML"/>
 
</Resourcedictionary. mergeddictionaries> </resourcedictionary> </application. Resources>

Open themeresource. XAML to find the style definition of the default textblock.

<Style X: Key = "phonetextnormalstyle" targettype = "textblock" basedon = "{staticresource phonetextblockbase}"/> <style X: key = "phonetextblockbase" targettype = "textblock"> <setter property = "fontfamily" value = "{staticresource phonefontfamilynormal}"/> <setter property = "fontsize" value = "{staticresource detail} "/> <setter property =" foreground "value =" {staticresource phoneforegroundbrush} "/> <setter property =" margin "value =" {staticresource phonehorizontalmargin} "/> </style> <solidcolorbrush X: key = "phoneforegroundbrush" color = "{staticresource phoneforegroundcolor}"/> <color x: Key = "phoneforegroundcolor"> # ff000000 </color>

Then modify the font color,

Changed:

 
<! -- 100 percent white --> <color x: Key = "phoneforegroundcolor"> # ff2fcc2f </color>

Others remain unchanged. Run the program again

You can see the effect after the change. Note that I did not add a new style here, but directly modified the style of the key that has been defined by the system, and the custom style will be implemented.

However, in the mango version, this method was identified by Microsoft as a bug, so it was fixed in version 7.1.

I changed the properties of the project and changed the taget Windows Phone version to 7.1. At this time, I opened mainpage. XAML and found that the design view did not change, but after running, I found that the font was white again.

The above is a change found. In addition, you can still create your own style.

In addition, because 7.1 of Silverlight for Windows Phone is based on sl4, an implicit style is added, that is, when the style is declared, no key is specified, and only one targettype exists.

In the previous example, we will redefine a style;

 
<Style targettype = "textblock" basedon = "{staticresource phonetextblockbase}"> <setter property = "foreground" value = "# ff2fcc2f"/> </style>

In addition, modify textblock in mainpage. XAML to cancel displaying the specified style;

<Stackpanel X: Name = "titlepanel" grid. row = "0" margin = ","> <textblock X: Name = "applicationtitle" text = "my application"/> <textblock X: name = "pagetitle" text = "Page name" margin = "9,-7,0, 0"/> </stackpanel>

Run the program again at this time. The effect is as follows:

In addition, if you think that the specified topic in XAML is too rigid and want to dynamically change it through the background code, you can use the following method:

 
VaR dictionaries = resources. Events; dictionaries. Clear (); var themestyles = new resourcedictionary {source = new uri (customeme, urikind. Relative)}; dictionaries. Add (themestyles );
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.