מדריך Windows Phone – שימוש ב Data Binding: הגדרת מקורות

כזכור, בעת יצירת Binding יש להגדיר ארבעה חלקים:

1. אובייקט היעד – זהו האובייקט שנרצה לשנות תכונה שלו
2. תכונת היעד – זוהי התכונה שנרצה לשנות
3. אובייקט המקור – זהו האובייקט שאליו היעד מתחבר
4. תכונת המקור – זוהי התכונה שממנה נרצה לקחת את הערך ולהציבו בתכונת היעד

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

הגדרת אובייקט מקור באמצעות ElementName

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

ElementName מאפשר להגדיר פקד UI בתור המקור של פקד היעד, לפיכך השימוש ב ElementName מצוין כאשר נרצה לחבר בין פקדים (UI to UI).

כדי להשתמש בשיטה זו יש להוסיף להגדרת ה Binding את התכונה ElementName ולאחריה את שם האלמנט שאליו אנו מעוניינים להתחבר. שם האלמנט הוא כזה שהוגדר באמצעות x:Name בלבד.

לדוגמא, הקוד הבא גורם לחיבור של התכונה Text של TextBox בשם textColor לתכונה Background של אותו פקד! מה שיקרה הוא שברגע שנכתוב שם של צבע חוקי בתוך הפקד, הרקע שלו ישתנה לצבע שנכתוב.

<TextBlock Text="Using ElementName   " />
<StackPanel Orientation="Horizontal">
  <TextBlock Text="Color: " />
  <TextBox x:Name="textColor"
            Background="{Binding ElementName=textColor, Path=Text}" />
</StackPanel>

הגדרת אובייקט מקור באמצעות Source

באמצעות התכונה Source של אובייקט Binding ניתן להגדיר באופן מפורש מי האובייקט מקור. בשיטה זו אנו מציבים בתכונה Source ממש את האובייקט עצמו (ולא את שמו כמו בשיטה הקודמת). ניתן לעשות זאת ע"י שימוש בתגית StaticResource כאשר אובייקט המקור מוגדר בתוך Resource, או אפילו בקוד. נראה כיצד לעשות זאת באמצעות StaticResource.

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

לשם כך ראשית נוסף מחלקה חדשה לפרויקט בשם MyData שתייצג את אובייקט הנתונים שלנו:

namespace SourceDemo
{
  public class MyData
  {
    public string User { get; set; }
    public string Password { get; set; }
  }
}

כעת נרצה להשתמש במחלקה זו בXAML, לצורך כך נצטרך להוסיף הגדרת dir="ltr" class="code">>:local="clr-namespace:SourceDemo"

כעת נוכל להגדיר אובייקט מטיפוס MyData בתוך קובץ הXAML, באזור ה Resources, ולהשתמש בו כמקור ע"י שימוש בתכונה Source של ה Binding:

<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:SourcesDemo"
  mc:Ignorable="d"
  d:DesignWidth="480"
  d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  Orientation="Portrait"
  SupportedOrientations="Portrait">
  <StackPanel>
    <StackPanel
      Orientation="Horizontal">
      <StackPanel.Resources>
        <local:MyData
          x:Key="mySource"
          User="Arik2"
          Password="654321" />
      </StackPanel.Resources>
      <TextBlock
        Text="User: " />
      <TextBox
        Text="{Binding Source={StaticResource mySource}, Path=User}" />
      <TextBlock
        Text="Password: " />
      <TextBox
        Text="{Binding Source={StaticResource mySource}, Path=Password}" />
    </StackPanel>
  </StackPanel>
</phone:PhoneApplicationPage>

שימו לב שאנו רושמים באופן מפורש את אובייקט המקור בכל פעם שאנו מבצעים Binding, בדוגמא שלנו אנו עושים זאת פעמיים, גם עבור הקישור ל User וגם עבור Password.

הגדרת מקור בדרך זו נראית הגיונית, אך תכף נראה דרך הרבה יותר שימושית.

הגדרת אובייקט מקור באמצעות DataContext

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

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

<phone:PhoneApplicationPage
  x:Class="SourcesDemo.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:SourcesDemo"
  mc:Ignorable="d"
  d:DesignWidth="480"
  d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  Orientation="Portrait"
  SupportedOrientations="Portrait">
  <StackPanel
    x:Name="stackPanel"
    Orientation="Horizontal">
    <TextBlock
      Height="100"
      Text="User: " />
    <TextBox
      Height="100"
      Width="150"
      Text="{Binding Path=User}" />
    <TextBlock
      Height="100"
      Text="Password: " />
    <TextBox
      Height="100"
      Width="150"
      Text="{Binding Path=Password}" />
  </StackPanel>
</phone:PhoneApplicationPage>

נשים לב שלא הגדרנו כלל את המקור בקוד הXAML. קביעת מקור הנתונים נעשית באמצעות שורת הקוד הבאה:

using Microsoft.Phone.Controls;
 
namespace SourcesDemo
{
  public partial class MainPage : PhoneApplicationPage
  {
    // Constructor
    public MainPage()
    {
      InitializeComponent();
 
      MyData myData = new MyData()
      {
        User = "Arik",
        Password = "123456"
      };
      stackPanel.DataContext = myData;
    }
  }
}

כדי לקבוע את המקור אנו שמים את האובייקט בתוך התכונה DataContext של הפקד StackPanel (ולא אובייקט Binding כלשהוא), התכונה DataContext מועברת בירושה לפקדים שמתחת ל StackPanel וכך מגיעה גם לשני ה TextBox שעושים בה שימוש.

הגדרת אובייקט מקור באמצעות RelativeSource

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

קוד הXAML הנדרש לשם כך הוא כדלהלן:

<phone:PhoneApplicationPage
  x:Class="SourcesDemo.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:SourcesDemo"
  mc:Ignorable="d"
  d:DesignWidth="480"
  d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  Orientation="Portrait"
  SupportedOrientations="Portrait">
  <StackPanel>
    <TextBlock
      Text="Color: " />
    <TextBox
      Background="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Text}" />
  </StackPanel>
</phone:PhoneApplicationPage>