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

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

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

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

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

<Window x:Class="ImageDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
  <Grid>
    <Image Source="/ImageDemo;component/Images/Koala.jpg" />
  </Grid>
</Window>

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

התוצאה:

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

הוספת קטע וידאו לאפליקציית WPF נעשית באמצעות שימוש בפקד MediaElement. פקד זה יודע להציג כל סוג וידאו שתוכנת ה Media Player המגיעה עם Windows יודעת להציג. למעשה, מאחר ומדובר באותה מערכת, גם אם תוסיפו Codec חדש, הפקד MediaElement ידע להשתמש בו כמו Media Player.

כדי להציג קטע וידאו כל מה שצריך לעשות הוא להגדיר פקד MediaElement במקום שבו נרצה את הקטע, ולקבוע לו את תכונת ה Source. ניתן לשלוט על התנהגות הווידאו בעת פתיחת התוכנית באמצעות התכונה LoadedBehavior שמקבלת ערכים כגון: Play, Pause, Manual וכו'. בנוסף לפקד זה יש פונקציות המאפשרות שליטה על הרצת הווידאו מתוך הקוד.

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

<Window x:Class="VideoDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
  <Grid>
    <MediaElement LoadedBehavior="Play"
                  Source="pack://siteoforigin:,,,/Video/Bear.wmv" />
  </Grid>
</Window>

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

התוצאה: