פקד התמונה

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

<Image Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />

התוצאה תראה כך:

התכונה Source (מקור), בה השתמשנו בדוגמה הזו כדי לציין מהי התמונה שצריכה להיות מוצגת, היא כנראה התכונה החשובה ביותר של הפקד הזה, אז בואו נצלול לתוך הנושא הזה תחילה.

התכונה Source (מקור)

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

כמו שכבר ידוע לך כנראה, ניתן להוסיף קובץ משאב (resource) לפרוייקט שלך - הם יכולים להתקיים בתוך פרוייקט ויז'ואל סטודיו הנוכחי שלך וניתן לראות אותם ב Solution Explorer בדיוק כמו כל קובץ אחר שקשור ל WPF (חלונות, פקדי משתמש וכו'.) דוגמה רלוונטית לקובץ משאב היא תמונה, שניתן פשוט להעתיק לתוך התיקיה הרלוונטית בפרוייקט שלך, או להכליל אותה, ואז היא תשתתף בתהליך ההידור (compile) ותיכלל בתוך היישום (אלא אם כן ביקשת באופן מפורש מויז'ואל סטודיו לא לעשות זאת) וניתן יהיה לגשת אליה בעזרת פורמט ה URL למשאב. כך שאם יש לך תמונה הנקראת google.png בתוך תיקיה הנקראת Images (תמונות), התחביר (syntax) יראה כך:

<Image Source="/WpfTutorialSamples;component/Images/google.png" />

הקישורים הללו, URI (מזהה משאב אחיד), הנקראים לרוב "Pack URI's", הם נושא כבד עם הרבה יותר פרטים, אבל כרגע, בואו רק נבחין בכך שהם באופן בסיסי עשויים משני חלקים:

• החלק הראשון (/WpfTutorialSamples;component), היכן שהשם של האסמבלי (WpfTutorialSamples ביישום שלי) משולב עם המילה "component"
• החלק השני, היכן שמציינים מהו הנתיב היחסי של המשאב: /Images/google.png

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

<Image Source="/Images/google.png" />

טעינה דינמית של תמונות (קוד-מאחור)

ציון מקור התמונה ישירות בקובץ XAML יעבוד בהרבה מקרים, אבל לפעמים צריך לטעון את התמונה באופן דינמי, למשל לפי בחירת המשתמש. ניתן לעשות זאת מהקוד-מאחור. כך ניתן לטעון תמונה שנמצאת במחשב של המשתמש, בהתאם לבחירה שלהם מחלון פתיחת קובץ OpenFileDialog:

private void BtnLoadFromFile_Click(object sender, RoutedEventArgs e)
{
    OpenFileDialog openFileDialog = new OpenFileDialog();
    if(openFileDialog.ShowDialog() == true)
    {
    Uri fileUri = new Uri(openFileDialog.FileName);
    imgDynamic.Source = new BitmapImage(fileUri);
    }
}

שימו לב איך יצרתי מופע של BitmapImage, שאליו העברתי אובייקט של Uri, בהתבסס על הנתיב הנבחר מחלון בחירת הקובץ. אפשר להשתמש בדיוק באותה טכניקה כדי לטעון תמונה הכלולה ביישום כמשאב:

private void BtnLoadFromResource_Click(object sender, RoutedEventArgs e)
{
    Uri resourceUri = new Uri("/Images/white_bengal_tiger.jpg", UriKind.Relative);
    imgDynamic.Source = new BitmapImage(resourceUri);        
}

אנחנו משתמשים באותו נתיב יחסי שבו השתמשנו באחת הדוגמאות הקודמות - רק וודאו להעביר את הערך UriKind.Relative כשיוצרים את המופע של ה Uri, כדי שהוא ידע שהנתיב שהוא מקבל הוא לא נתיב מוחלט. הנה מקור ה XAML, וגם צילומי מסך, של הדוגמה שלנו לקוד-מאחור:

<Window x:Class="WpfTutorialSamples.Basic_controls.ImageControlCodeBehindSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfTutorialSamples.Basic_controls"
    mc:Ignorable="d"
    Title="ImageControlCodeBehindSample" Height="300" Width="400">
    <StackPanel>
    <WrapPanel Margin="10" HorizontalAlignment="Center">
        <Button Name="btnLoadFromFile" Margin="0,0,20,0" Click="BtnLoadFromFile_Click">Load from File...</Button>
        <Button Name="btnLoadFromResource" Click="BtnLoadFromResource_Click">Load from Resource</Button>
    </WrapPanel>
    <Image Name="imgDynamic" Margin="10"  />
    </StackPanel>
</Window>

תכונת ה Stretch (מתיחה)

אחרי תכונת המקור Source, שהיא חשובה מסיבות מובנות מאליהן, נראה לי שהתכונה השניה הכי מעניינת של פקד התמונה עשוייה להיות תכונת ה Stretch. היא קובעת מה יקרה כשמימדי התמונה הנטענת לא לגמרי מתאימים למימדי פקד ה Image. זה יקרה כל הזמן, מאחר והמשתמש יכול לשלוט על גודל החלונות שלך ואלא אם כן העיצוב שלך מאד סטטי, זה אומר שהגודל של פקד(י) התמונה ישתנו גם הם.

כפי שניתן לראות בדוגמה הבאה, תכונת ה Stretch יכולה לעשות הבדל גדול בדרך בה התמונה מוצגת:

<Window x:Class="WpfTutorialSamples.Basic_controls.ImageControlStretchSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfTutorialSamples.Basic_controls"
    mc:Ignorable="d"
    Title="ImageControlStretchSample" Height="450" Width="600">
    <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Grid.Column="0" HorizontalAlignment="Center" FontWeight="Bold">Uniform</Label>
    <Label Grid.Column="1" HorizontalAlignment="Center" FontWeight="Bold">UniformToFill</Label>
    <Label Grid.Column="2" HorizontalAlignment="Center" FontWeight="Bold">Fill</Label>
    <Label Grid.Column="3" HorizontalAlignment="Center" FontWeight="Bold">None</Label>
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="Uniform" Grid.Column="0" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="UniformToFill" Grid.Column="1" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="Fill" Grid.Column="2" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="None" Grid.Column="3" Grid.Row="1" Margin="5" />
    </Grid>
</Window>

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

• Uniform: (אחיד) - זהו מצב ברירת המחדל. גודל התמונה ישתנה באופן אוטומטי כך שהיא תתאים לשטח התמונה. יחס גובה-רוחב של התמונה יישמר.
• UniformToFill: (אחיד כדי למלא) - גודל התמונה ישתנה כך שהיא תמלא לגמרי את שטח התמונה. יחס גובה-רוחב של התמונה יישמר.
• Fill: (מילוי) - גודל התמונה ישתנה כך שהיא תמלא את השטח של פקד התמונה. יחס גובה-רוחב עלול **לא** להישמר, כי הגובה והרוחב של התמונה משתנים באופן בלתי תלוי.
• None: (כלום) - אם התמונה קטנה יותר מפקד התמונה, כלום לא קורה. אם היא גדולה יותר מפקד התמונה, התמונה פשוט תיחתך כדי להתאים לגודל פקד התמונה, כלומר שרק חלק ממנה יהיה גלוי.

סיכום

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