פיתוח אפליקציות אסינכרוניות Windows 10 Layout controls 2 ארז קלר

RelativePanel פקד חדש ממשפחת XAML Layout Control. מאפשר להצמיד את הפקדים בנים יחסית לפקדים הבנים האחרים. מאפשר ליישר את הפקדים בנים אחד ביחס לשני. מאפשר ליישר פקדים בנים ביחס לפאנל עצמו.

RelativePanel אפשרויות מיקום ויישור מיקום של פקד בן יחסית לפקדים בנים אחרים : Above Below LeftOf RightOf יישור של פקד בן יחסית לפקדים בנים אחרים : AlignBottomWith AlignHorizontalCenterWith AlignLeftWith AlignRightWith AlignTopWith AlignVerticalCenterWith יישור הפקד ביחס לפאנל עצמו AlignBottomWithPanel AlignHorizontalCenterWithPanel AlignLeftWithPanel AlignRightWithPanel AlignTopWithPanel AlignVerticalCenterWithPanel

RelativePanel דוגמה ראשונה <Image x:Name="imgBuilding1" Stretch="None" Source="Assets/0.png" /> <Image x:Name="imgBuilding2" Stretch="None" Source="Assets/1.png" RelativePanel.RightOf="imgBuilding1" RelativePanel.AlignBottomWith="imgBuilding1" /> <Image x:Name="imgBuilding3" Stretch="None" Source="Assets/2.png" RelativePanel.Below="imgBuilding1"/> <Image x:Name="imgBuilding4" Stretch="None" Source="Assets/3.png" RelativePanel.Below="imgBuilding1" RelativePanel.RightOf="imgBuilding3"/> Building1Building2 Building3 Building4 Building1 Building2 Building3 Building4 דוגמת קוד RelativePanel01

RelativePanel דוגמה שנייה: ארבעה אלמנטים בשורה, <Image x:Name="imgBuilding1" Stretch="None" Source="Assets/0.png" /> <Image x:Name="imgBuilding2" Stretch="None" Source="Assets/1.png" RelativePanel.RightOf="imgBuilding1" RelativePanel.AlignBottomWith="imgBuilding1" /> <Image x:Name="imgBuilding3" Stretch="None" Source="Assets/2.png" RelativePanel.RightOf="imgBuilding2" RelativePanel.AlignBottomWith="imgBuilding2" /> <Image x:Name="imgBuilding4" Stretch="None" Source="Assets/3.png" RelativePanel.RightOf="imgBuilding3" RelativePanel.AlignBottomWith="imgBuilding3" />... אלמנט העוגן ממוקם מימין ל - imgBuilding1 ממוקם מימין ל - imgBuilding2 ממוקם מימין ל - imgBuilding3 מיושרים על פי התחתית

RelativePanel המשך דוגמה שנייה: הוספת טקסט בשורה שניה, כל שורת טקסט מיושרת לאמצע האלמנט שמעליה:... <TextBlock Text="Building1" FontSize="20" RelativePanel.Below="imgBuilding1" RelativePanel.AlignHorizontalCenterWith="imgBuilding1" /> <TextBlock Text="Building2" FontSize="20" RelativePanel.Below="imgBuilding2" RelativePanel.AlignHorizontalCenterWith="imgBuilding2" /> <TextBlock Text="Building3" FontSize="20" RelativePanel.Below="imgBuilding3" RelativePanel.AlignHorizontalCenterWith="imgBuilding3" /> <TextBlock Text="Building4" FontSize="20" RelativePanel.Below="imgBuilding4" RelativePanel.AlignHorizontalCenterWith="imgBuilding4" /> מיקום : מתחת לאלמנט שמעליה מיושר למרכז דוגמת קוד RelativePanel02

RelativePanel ממה צריך להיזהר? מהגדרות מתנגשות: איך נמנעים מהתנגשויות? להתייחס לאלמנטים של הפאנל כ-Graph. להגדיר אלמנט אחד כ-"עוגן" ולייחס אותו לפאנל עצמו. לייחס את שאר האלמנטים לאלמנט העוגן או לאלמנט אחר. לתכנן. <Image x:Name="imgBuilding1" Stretch="None" Source="Assets/0.png" RelativePanel.RightOf="imgBuilding2"/> <Image x:Name="imgBuilding2" Stretch="None" Source="Assets/1.png" RelativePanel.RightOf="imgBuilding1" /> דוגמת קוד RelativePanel03

RelativePanel העוצמה האמתית של RelativePanel היא בעיקר ב-Runtime. private void InitRelativePanel() } Image img1 = new Image(); img1.Source = new BitmapImage(new Uri("ms-appx:/Assets/0.png")); img1.Stretch = Stretch.None; pnlBuildings.Children.Add(img1); Image img2 = new Image(); img2.Source = new BitmapImage(new Uri("ms-appx:/Assets/1.png")); img2.Stretch = Stretch.None; RelativePanel.SetRightOf(img2, img1); RelativePanel.SetAlignBottomWith(img2, img1); pnlBuildings.Children.Add(img2); Image img3 = new Image(); img3.Source = new BitmapImage(new Uri("ms-appx:/Assets/3.png")); img3.Stretch = Stretch.None; RelativePanel.SetBelow(img3, img1); pnlBuildings.Children.Add(img4); Image img4 = new Image(); img4.Source = new BitmapImage(new Uri("ms-appx:/Assets/4.png")); img4.Stretch = Stretch.None; RelativePanel.SetBelow(img4, img1); RelativePanel.SetRightOf(img4, img3); RelativePanel.SetAlignBottomWith(img4, img3); pnlBuildings.Children.Add(img4); { Building1Building2 Building3 Building4 Building1 Building2 Building3 Building4 דוגמת קוד RelativePanel04

SplitView פקד Layout חדש המחולק המספק תפריט לאפליקציה. מחולק לשני חלקים: Pane - תפריט. Content - הצגת תוכן. התפריטים יוגדרו מתוך רשימת תפריטים מוכנה מראש או תפריטים שהמתכנת מגדיר. התוכן פתוח לצרכי המתכנת. התוכן תמיד יהיה פתוח. את התפריטים ניתן לסגור בשביל להגדיל את שטח התוכן. ניתן להגדיר את גודל ה-Pane.

SplitView דוגמת קוד SplitView01

SplitView ניתן להוסיף אייקונים מותאמים: דוגמת קוד SplitView02 סמל מותאם

SplitView ניתן להצמיד לימין או לשמאל: ניתן לקבוע צבעים:

SplitView ניתן להגדיר רוחב: וניתן להגדיר הגדרות נוספות....

כל הזכויות שמורות למחבר.