יסודות XAML

בפרק הקודם התחלנו לדבר על מהו XAML וכיצד ניתן להשתמש בו, אבל כיצד יוצרים רכיב ב-XAML ? כפי שניתן לראות בדוגמא הבאה, יצירת רכיב ב-XAML היא קלה ככתיבת שמו, מוקף בסוגריים אלכסוניים. לדוגמא, כפתור ייראה כך:

<Button>

תגיות XAML צריכות להיסגר - ע"י כתיבת התג הסוגר, או ע"י סלאש בסוף התג הפותח:

<Button></Button>

או

<Button />

רכיבים רבים מאפשרים להוסיף תוכן בין הסוגריים, ובכך להוסיף תוכן לרכיב. לדוגמא, רכיב כפתור מאפשר לך להגדיר את תוכן הטקסט שיוצג על הכפתור, ע"י הוספתו בין הפותח לסוגר של הסוגריים:

<Button>A button</Button>

כתיבת HTML אינה רגישה לגודל גופן, אבל XAML כן, וזאת מכיוון ששם הרכיב צריך להתאים לסוג בסביבת דוט.נט כלל זה תקף גם לשמות מאפיינים (attributes) אשר צריכים להתאים לשמות מאפייני הרכיב. בדוגמא הבאה נראה מספר הגדרות מאפיינים לכפתור:

<Button FontWeight="Bold" Content="A button" />

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

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>A button</Button.Content>
</Button>

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

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>
        <WrapPanel>
            <TextBlock Foreground="Blue">Multi</TextBlock>
            <TextBlock Foreground="Red">Color</TextBlock>
            <TextBlock>Button</TextBlock>
        </WrapPanel>
    </Button.Content>
</Button>

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

ניתן לקבל תוצאה זהה לחלוטין באופן הבא, שהוא בסך הכל אלטרנטיבת כתיבה:

<Button FontWeight="Bold">
    <WrapPanel>
        <TextBlock Foreground="Blue">Multi</TextBlock>
        <TextBlock Foreground="Red">Color</TextBlock>
        <TextBlock>Button</TextBlock>
    </WrapPanel>
</Button>

XAML לעומת קוד

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

Button btn = new Button();
btn.FontWeight = FontWeights.Bold;

WrapPanel pnl = new WrapPanel();

TextBlock txt = new TextBlock();
txt.Text = "Multi";
txt.Foreground = Brushes.Blue;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Color";
txt.Foreground = Brushes.Red;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Button";
pnl.Children.Add(txt);

btn.Content = pnl;
pnlMain.Children.Add(btn);

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