SlideShare a Scribd company logo
1 of 21
Windows Phone 7 Li Jingnan / Wang Tao 2011-7-15 1
2 days 2
about anytao| Ethos <ethos:Member    id = “Wang Tao”    msn = anytao@live.com weibo = http://weibo.com/anytao runat = “Senior System Architect” /> Jason | Ethos <ethos:Member    id = “Li Jingnan”    msn = zengnami@hotmail.com weibo= http://weibo.com/jn1981 runat = “SE” />
about http://book.anytao.net
03 application bar Wang Tao / 2011-07-15
session outline application bar navigation overview frame & page application bar overview page navigation methods query string goback
navigations 7
frame & page PhoneApplicationFrame Top Container: PhoneApplicationFrame Including: Page control System Tray Application Bar PhoneApplicationPage Fill content of Frame Page inherit from PhoneApplicationPage Including: Title Application Bar 8
ApplicationBar use ApplicationBar instead of creating you own menu system ApplicationBarIconButton up to 4buttons don’t fill all 4 slots if not need size: 48×48 ApplicationBarMenuItem up to 5 menus avoid long text 9
Application Bar in xaml 10
ApplicationBar and Landscope 11
Application Bar opacity 12
page navigation 13 Silverlight on Windows Phone Similar like web page Navigate by URI Stateless private void hyperlinkButton1_Click (object sender, RoutedEventArgs e) {  NavigationService.Navigate(               new Uri("/SecondPage.xaml",        UriKind.RelativeOrAbsolute));  }
navigation method OnNavigatingFrom OnNavigatedFrom OnNavigatedTo 14
query string send query string private void passParam_Click(object sender, RoutedEventArgs e) { NavigationService.Navigate(new Uri("/SecondPage.xaml?msg=" + 				    textBox1.Text, UriKind.Relative)); } get query string protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { base.OnNavigatedTo(e);   string msg = string.Empty;         if (NavigationContext.QueryString.TryGetValue("msg", out msg)) 	textBlock1.Text = msg;            } 15
go back private void button1_Click (object sender, RoutedEventArgs e) {  NavigationService.GoBack();  } 16
navigate in UserControl 17
demo 18 / app bar / app bar menu / landscape  / navigation service 02 application bar
practice 19 build your context menu
20 thank youwww.anytao.com
21

More Related Content

Similar to 03 wp7 application bar

01 wp7 introduction
01 wp7   introduction01 wp7   introduction
01 wp7 introductionTao Wang
 
Making mobile apps with web technology
Making mobile apps with web technologyMaking mobile apps with web technology
Making mobile apps with web technologyManyoung Cho
 
Making mobile apps with web technology (revised)
Making mobile apps with web technology (revised)Making mobile apps with web technology (revised)
Making mobile apps with web technology (revised)Manyoung Cho
 
Seam Introduction
Seam IntroductionSeam Introduction
Seam Introductionihamo
 
Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsRicardo Varela
 
Developing Application in WP7
Developing Application in WP7Developing Application in WP7
Developing Application in WP7Kunal Chowdhury
 
Component and Event-Driven Architectures in PHP
Component and Event-Driven Architectures in PHPComponent and Event-Driven Architectures in PHP
Component and Event-Driven Architectures in PHPStephan Schmidt
 
USC Yahoo! BOSS, YAP and YQL Overview
USC Yahoo! BOSS, YAP and YQL OverviewUSC Yahoo! BOSS, YAP and YQL Overview
USC Yahoo! BOSS, YAP and YQL OverviewJonathan LeBlanc
 

Similar to 03 wp7 application bar (8)

01 wp7 introduction
01 wp7   introduction01 wp7   introduction
01 wp7 introduction
 
Making mobile apps with web technology
Making mobile apps with web technologyMaking mobile apps with web technology
Making mobile apps with web technology
 
Making mobile apps with web technology (revised)
Making mobile apps with web technology (revised)Making mobile apps with web technology (revised)
Making mobile apps with web technology (revised)
 
Seam Introduction
Seam IntroductionSeam Introduction
Seam Introduction
 
Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile Widgets
 
Developing Application in WP7
Developing Application in WP7Developing Application in WP7
Developing Application in WP7
 
Component and Event-Driven Architectures in PHP
Component and Event-Driven Architectures in PHPComponent and Event-Driven Architectures in PHP
Component and Event-Driven Architectures in PHP
 
USC Yahoo! BOSS, YAP and YQL Overview
USC Yahoo! BOSS, YAP and YQL OverviewUSC Yahoo! BOSS, YAP and YQL Overview
USC Yahoo! BOSS, YAP and YQL Overview
 

More from Tao Wang

团队高效沟通的秘密
团队高效沟通的秘密团队高效沟通的秘密
团队高效沟通的秘密Tao Wang
 
高效团队的秘密
高效团队的秘密高效团队的秘密
高效团队的秘密Tao Wang
 
Worktile 更好用的企业协作平台
Worktile   更好用的企业协作平台Worktile   更好用的企业协作平台
Worktile 更好用的企业协作平台Tao Wang
 
Hello, Worktile Pro
Hello, Worktile ProHello, Worktile Pro
Hello, Worktile ProTao Wang
 
09 wp7 multitasking
09 wp7   multitasking09 wp7   multitasking
09 wp7 multitaskingTao Wang
 
08 wp7 push notification
08 wp7   push notification08 wp7   push notification
08 wp7 push notificationTao Wang
 
08 wp7 push notification
08 wp7   push notification08 wp7   push notification
08 wp7 push notificationTao Wang
 
07 wp7 application lifecycle
07 wp7   application lifecycle07 wp7   application lifecycle
07 wp7 application lifecycleTao Wang
 
06 wp7 isolation storage
06 wp7   isolation storage06 wp7   isolation storage
06 wp7 isolation storageTao Wang
 
03 wp7 application bar
03 wp7   application bar03 wp7   application bar
03 wp7 application barTao Wang
 
05 wp7 launchers and choosers
05 wp7   launchers and choosers05 wp7   launchers and choosers
05 wp7 launchers and choosersTao Wang
 
04 wp7 pivot and panorama
04 wp7   pivot and panorama04 wp7   pivot and panorama
04 wp7 pivot and panoramaTao Wang
 
02 wp7 building silverlight applications
02 wp7   building silverlight applications02 wp7   building silverlight applications
02 wp7 building silverlight applicationsTao Wang
 
Azure 迁移之道
Azure 迁移之道Azure 迁移之道
Azure 迁移之道Tao Wang
 
01 windows azure platform overview
01 windows azure platform overview01 windows azure platform overview
01 windows azure platform overviewTao Wang
 
Facebook and its development
Facebook and its developmentFacebook and its development
Facebook and its developmentTao Wang
 
What is silverlight?
What is silverlight?What is silverlight?
What is silverlight?Tao Wang
 

More from Tao Wang (17)

团队高效沟通的秘密
团队高效沟通的秘密团队高效沟通的秘密
团队高效沟通的秘密
 
高效团队的秘密
高效团队的秘密高效团队的秘密
高效团队的秘密
 
Worktile 更好用的企业协作平台
Worktile   更好用的企业协作平台Worktile   更好用的企业协作平台
Worktile 更好用的企业协作平台
 
Hello, Worktile Pro
Hello, Worktile ProHello, Worktile Pro
Hello, Worktile Pro
 
09 wp7 multitasking
09 wp7   multitasking09 wp7   multitasking
09 wp7 multitasking
 
08 wp7 push notification
08 wp7   push notification08 wp7   push notification
08 wp7 push notification
 
08 wp7 push notification
08 wp7   push notification08 wp7   push notification
08 wp7 push notification
 
07 wp7 application lifecycle
07 wp7   application lifecycle07 wp7   application lifecycle
07 wp7 application lifecycle
 
06 wp7 isolation storage
06 wp7   isolation storage06 wp7   isolation storage
06 wp7 isolation storage
 
03 wp7 application bar
03 wp7   application bar03 wp7   application bar
03 wp7 application bar
 
05 wp7 launchers and choosers
05 wp7   launchers and choosers05 wp7   launchers and choosers
05 wp7 launchers and choosers
 
04 wp7 pivot and panorama
04 wp7   pivot and panorama04 wp7   pivot and panorama
04 wp7 pivot and panorama
 
02 wp7 building silverlight applications
02 wp7   building silverlight applications02 wp7   building silverlight applications
02 wp7 building silverlight applications
 
Azure 迁移之道
Azure 迁移之道Azure 迁移之道
Azure 迁移之道
 
01 windows azure platform overview
01 windows azure platform overview01 windows azure platform overview
01 windows azure platform overview
 
Facebook and its development
Facebook and its developmentFacebook and its development
Facebook and its development
 
What is silverlight?
What is silverlight?What is silverlight?
What is silverlight?
 

Recently uploaded

Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 

Recently uploaded (20)

Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 

03 wp7 application bar

  • 1. Windows Phone 7 Li Jingnan / Wang Tao 2011-7-15 1
  • 3. about anytao| Ethos <ethos:Member id = “Wang Tao” msn = anytao@live.com weibo = http://weibo.com/anytao runat = “Senior System Architect” /> Jason | Ethos <ethos:Member id = “Li Jingnan” msn = zengnami@hotmail.com weibo= http://weibo.com/jn1981 runat = “SE” />
  • 5. 03 application bar Wang Tao / 2011-07-15
  • 6. session outline application bar navigation overview frame & page application bar overview page navigation methods query string goback
  • 8. frame & page PhoneApplicationFrame Top Container: PhoneApplicationFrame Including: Page control System Tray Application Bar PhoneApplicationPage Fill content of Frame Page inherit from PhoneApplicationPage Including: Title Application Bar 8
  • 9. ApplicationBar use ApplicationBar instead of creating you own menu system ApplicationBarIconButton up to 4buttons don’t fill all 4 slots if not need size: 48×48 ApplicationBarMenuItem up to 5 menus avoid long text 9
  • 13. page navigation 13 Silverlight on Windows Phone Similar like web page Navigate by URI Stateless private void hyperlinkButton1_Click (object sender, RoutedEventArgs e) { NavigationService.Navigate( new Uri("/SecondPage.xaml", UriKind.RelativeOrAbsolute)); }
  • 14. navigation method OnNavigatingFrom OnNavigatedFrom OnNavigatedTo 14
  • 15. query string send query string private void passParam_Click(object sender, RoutedEventArgs e) { NavigationService.Navigate(new Uri("/SecondPage.xaml?msg=" + textBox1.Text, UriKind.Relative)); } get query string protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { base.OnNavigatedTo(e); string msg = string.Empty; if (NavigationContext.QueryString.TryGetValue("msg", out msg)) textBlock1.Text = msg; } 15
  • 16. go back private void button1_Click (object sender, RoutedEventArgs e) { NavigationService.GoBack(); } 16
  • 18. demo 18 / app bar / app bar menu / landscape / navigation service 02 application bar
  • 19. practice 19 build your context menu
  • 21. 21

Editor's Notes

  1. 所有应用程序必须要有一个根Phone Frame可以从它继承自定义
  2. 在创建之前一定要先在Reference里加入Microsoft.Phone.shell,并且在xaml页面加上xmlns:shell=”clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell”.菜单栏设计最佳实践在设计菜单栏时要考虑的有以下几点:* 利用系统提供的菜单栏而非自己创建的菜单系统。这样能够使设备上所有应用程序保持统一的用户体验。而且系统提供的菜单栏支持动画和屏幕变换。* 用系统默认的主题而非自定义的颜色。使用自定义颜色会影响图标按钮和菜单动画的效果,而且在某些显示设置下会更耗电。* 菜单栏的透明度可以任意调整,但这里推荐只使用0,0.5和1。* 如果菜单栏的透明度小于1,当前显示页面大小会和屏幕大小一样,菜单栏会遮在它上面。如果透明度为1,显示页面会自动改变大小以适应未被菜单栏遮住的区域。图标按钮设计最佳实践* 用作图标的图片应该是使用了a通道的图片,其背景色为透明,前景色为白色。菜单栏会根据系统主题样式来改变图标的颜色。如果使用了带有背景色的图片,会导致不可预知的问题。* 图标按钮上的圆圈是在运行时由菜单栏加上去的,不需要在源图片里添加圆圈。* 用作图标的图片大小应该是48x48像素。图片内容的大小应该不超出26x26像素的范围,这样才不会被菜单栏加上的圆圈遮住。* 不要设置后退按钮。因为设备上的后退按钮就是专门指定用于页面后退的。* 把最常用的功能设置在图标按钮上。如果某些功能用图标不容易理解,就考虑用菜单项。* 图标按钮上的图片退便在转屏时不要有歧义。* 可以直接用于你的程序中的图标可以从这里下载。 菜单项设计最佳实践* 避免使用超过5个的菜单项,否则用户必须滚动屏幕才能看到。* 在单个菜单项中避免使用过长的文字,否则会引起截断。推荐菜单项内容长度为14到20个英文字符之间。* 为保证良好的用户体验,所有的菜单项和图标按钮的文字都会被变成小写字符。
  3. Silverlight on Windows Phone基于页面导航模型与Web页面模型相似通过URI标识每个页面每个页面是无状态的
  4. 当Page1切换到Page21.Page1执行OnNavigatingFrom2.Page1执行OnNavigatedFrom3.Page2执行OnNavigateToOnNavigatingFrom当Page不再是活动页面前OnNavigatedFrom当Page不再是活动页面时OnNavigatedTo当Page被激活时