Get ready for Windows Phone 7.5 – Part 8.1 – Live Tiles

December 26, 2011

live-tilesבפוסט הקודם הראתי כיצד לבצע שאילתה אל מול ה- Calendar והדגמתי פיסת קוד קטנה שמציגה רשימה דומה לרשימת ה- Agenda שבמכשיר.
בפוסט זה אציג מה חדש בגירסת מנגו בנושא Live Tiles, כיצד ניתן לעדכן Tiles מתוך האפליקציה וכיצד ליצור Tiles מישניים לאותה אפליקציה.
 
מבוא
למי שלא מכיר, Tile הינו סוג של Icon מיוחד דינאמי, כזה שמייצג את האפליקציה שלכם במסך הראשי ויודע להתעדכן מעת לעת, גם בעזרת Push Notification. שימוש ב- Tiles מאפשר לכותב האפליקציה להציג נתונים עדכניים שרלוונטיים לאפליקציה, כגון מזג אוויר נוכחי, מצב המניה בבורסה, תמונות אחרונות שצפיתם בהם או כל סטטוס אחר של האפליקציה.
 
 
אם כבר יצא לכם לפתח אפליקציות עבור Windows Phone, בטוח שנתקלתם באפשרות עדכון של ה- Tile שמייצג את האפליקציה במסך הראשי בעזרת Push Notification או בצורה מתוזמנת.
 
בגירסת מנגו הוסיפו API’s חדשים שמאפשרים לעדכן את ה- Tile באופן יזום ופשוט מקוד האפליקציה וללא כל צורך ב- Push Notification. בנוסף, כותב האפליקציה יכול להוסיף Tiles מישניים ל- Tile הראשי כך שלחיצה עליהם מובילה לדף מחושב באפליקציה, לא רק לדף הראשי. בנוסף ישנה אפשרות לעדכן את צידו האחורי של ה- Tile. אם שמתם לב, במנגו ה- Tiles מתהפכים מעת לעת ומציגים את צידם האחורי.
 
עדכון Tile קיים
כדי לעדכן Tile קיים, צריך קודם לקבל רפרנס לאובייקט שמייצג אותו. ניתן לעשות זאת בעזרת מחלקת העזר ShellTile בצורה הבאה:
 
Code Snippet
  1. // Application Tile is always the first Tile, even if it is not pinned to Start.
  2. var applicationTile = ShellTile.ActiveTiles.First();
 
ניתן למצוא את ה- Tile של האפליקציה תמיד, בין אם הוא Pinned למסך הראשי ובין אם לא. כעת נותר לעדכן את נתוני ה- Tile עם הנתונים החדשים על בסיס מצב האפליקציה, ולעדכן את ה- Tile עצמו. ונעשה זאת בצורה הבאה:
 
Code Snippet
  1. // Update the Application Tile.
  2. applicationTile.Update(TileData);
 
כאשר, TileData בדוגמה הינו property שיצרתי, מסוג StandardTileData, עליו אני מבצע Binding ישירות מה- View:
 
Code Snippet
  1. <TextBlock Text=”Front Title” />
  2. <TextBox Text=”{Binding Title, Mode=TwoWay}” />
  3. <TextBlock Text=”Front Image” />
  4. <ListBox SelectedItem=”{Binding BackgroundImage, Mode=TwoWay}” ItemsSource=”{Binding TileImages}” />
  5. <TextBlock Text=”Count” />
  6. <Slider Minimum=”0″ Maximum=”99″ Value=”{Binding Count, Mode=TwoWay}” />
  7. <TextBlock Text=”Back Title” />
  8. <TextBox Text=”{Binding BackTitle, Mode=TwoWay}” />
  9. <TextBlock Text=”Back Image” />
  10. <ListBox SelectedItem=”{Binding BackBackgroundImage, Mode=TwoWay}” ItemsSource=”{Binding TileImages}” />
  11. <TextBlock Text=”Back Content” />
  12. <TextBox Text=”{Binding BackContent, Mode=TwoWay}” />
 
כפי שניתן לראות, StandardTileData שבעזרתו אנו מעדכנים את ה- Tile מכיל את ה- Properties הבאים:
 
Title – כיתוב בתחתית ה- Tile.
BackgroundImage – כתובת Uri לתמונת רקע קידמית בגודל 173×173, המוגדרת כ- Content בפרוייקט או כתובת לתמונה ב- Web.
Count – מספר בין- 1-99 (או אפס לאיפוס) שמופיע בראש ה- Tile.
BackTitle – כיתוב בתחתית ה- Tile האחורי.
BackBackgroundImage – כתובת Uri לתמונת רקע אחורית בגודל 173×173, המוגדרת כ- Content בפרוייקט או כתובת לתמונה ב- Web.
BackContent – כיתוב בראש ה- Tile האחורי.
 
* ניתן לעדכן Tile באותו אופן בעזרת Background Task.
 
 
שימו לב: כדי לראות תוצאות, צריך לנעוץ את ה- Tile למסך הראשי ע”י לחיצה ארוכה על הצלמית הקטנה של האפליקציה ברשימת האפליקציות, לאחר שהותקנה, ואז “pin to start”.
 
SNAGHTML5ac70e3SNAGHTML5ac9081[4]SNAGHTML5acd6b2SNAGHTML5ad6e2fSNAGHTML5ad8d11SNAGHTML5ada184
 
מה בפוסט הבא?
בפוסט הבא אציג כיצג ניתן ליצור Tile מישניים עבור אותה אפליקציה.
 
Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*