מדריך Windows Phone – הצגת תמונה וקטע וידאו

שני מרכיבים חשובים באפליקציה גרפית היא היכולת לשלב תמונות וקטעי וידאו בתוך האפליקציה. בSilverlight הוספת תמונה או קטע וידאו נעשה בצורה מאוד פשוטה באמצעות הפקדים Image ו MediaElement.

הוספת תמונה באמצעות הפקד Image

הוספת תמונה לאפליקציית Windows Phone נעשית באמצעות שימוש בפקד Image. פקד זה יודע להציג מגוון רחב של תמונות כולל כל הסטנדרטיים הנפוצים כיום.

כדי להציג תמונה כל מה שצריך לעשות הוא להגדיר פקד Image במקום שבו נרצה את התמונה שלנו, ולקבוע לו את תכונת ה Source. להלן דוגמא:

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  >:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  >:local="clr-namespace:PhoneDemo"
  mc:Ignorable="d"
  d:DesignWidth="480"
  d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  Orientation="Portrait"
  SupportedOrientations="Portrait">
  <Grid>
    <Image
      Source="/PhoneDemo;component/Images/Koala.jpg" />
  </Grid>
</phone:PhoneApplicationPage>

בדוגמא זו הוספנו תמונה לפרויקט וקבענו את ה Build Action שלה להיות מסוג Resource. נעיר כי במקרים בהם התמונה נמצאת במקומות אחרים (ליד קובץ הריצה ולא בתוכו) הסינטקס לגשת לתמונה הוא קצת שונה.

התוצאה:

הוספת קטע וידאו באמצעות הפקד MediaElement

הוספת קטע וידאו לאפליקציית Windows Phone נעשית באמצעות שימוש בפקד MediaElement. פקד זה יודע להציג מגוון סוגי וידאו נפוצים.

כדי להציג קטע וידאו כל מה שצריך לעשות הוא להגדיר פקד MediaElement במקום שבו נרצה את הקטע, ולקבוע לו את תכונת ה Source. ניתן לשלוט על התנהגות הווידאו באמצעות פונקציות המאפשרות שליטה על הרצת הווידאו מתוך הקוד.

להלן דוגמת המציגה סרטון ווידאו בעת פתיחת האפליקציה:

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  >:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  >:local="clr-namespace:PhoneDemo"
  mc:Ignorable="d"
  d:DesignWidth="480"
  d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  Orientation="Portrait"
  SupportedOrientations="Portrait">
  <Grid>
    <MediaElement
      Source="/Video/Bear.wmv" />
  </Grid>
</phone:PhoneApplicationPage>

נעיר כי בדוגמא זו קובץ הווידאו אינו מוכל בתוך קובץ הריצה ולכן הגדרת תכונת ה Source נראית שונה.

התוצאה: