The Canvas control

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

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

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

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Canvas>
</Window>

כפי שניתן לראות, למרות שיש לנו שני כפתורים, שניהם ממוקמים באותו מקום בדיוק, כך שרק האחרון נראה. ה-Canvas לא עושה כלום עד שתתחיל לתת קואורדינטות לפקדים. זה נעשה באמצעות המאפיינים Left, Right, Up ו Down המצורף לפקד הקנבס.

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

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button Canvas.Left="10">Top left</Button>
		<Button Canvas.Right="10">Top right</Button>
		<Button Canvas.Left="10" Canvas.Bottom="10">Bottom left</Button>
		<Button Canvas.Right="10" Canvas.Bottom="10">Bottom right</Button>
	</Canvas>
</Window>

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

עבור הכפתורים התחתונים, אני משתמש גם ב Left/Right וגם ב Bottom כדי לדחוף אותם לכיוון המרכז בשני הכיוונים. בדרך כלל תציין ערך Top או Down ו/או ערך Leftאו Right.

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

Z-Index

בדוגמה הבאה, נשתמש בכמה מהפקדים הקשורים ליצירת צורה ב WPF כדי להמחיש מושג חשוב מאוד נוסף בעת השימוש ב-Canvas: Z-Index. בדרך כלל, אם שני פקדים בתוך קנבס חופפים, זה שהוגדר אחרון בכתיבה יקבל עדיפות ותחפוף על האחר/ים. עם זאת, על ידי שימוש במאפיין ZIndex המצורף למחלקה Panel, ניתן לשנות זאת בקלות.

ראשית, דוגמה שבה אנחנו לא משתמשים ב-z-index בכלל:

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

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

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Panel.ZIndex="2" Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Panel.ZIndex="3" Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="2" Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="4" Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

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