כאשר אנו יוצרים פרויקט חלונות תצוגתי באמצעות WPF, אנו מעוניינים להיות יצירתיים ולא מוגבלים ככל האפשר. מה אם נרצה ליצור חלון עם קצוות מעוגלים למשל? ובכן ל-WPF יש פתרונות למגוון בעיות כאלו ואחרות אשר קשורות ל-FrontEnd, במאמר זה נראה כיצד ניתן ליצור חלון עם קצוות מעוגלים ב-WPF
חלונות עם קצוות מעוגלים ב-WPF יכול לתת מראה ייחודי לפרויקט התצוגתי שלכם.
אך מטבעו, לחלון הראשי אין מאפיין שיעגל לו את הפינות.
באמצעות מספר צעדים פשוטים נוכל "לעקוף" את ההיגיון הזה ולעגל את הפינות של החלון בכל זאת.
המאפיין AllowsTransparency
הצעד הראשון שלנו יהיה לאפשר לחלון הראשי להיות שקוף על ידי שימוש במאפיין AllowsTransparency, כך שניתן יהיה לראות דרך הפינות של החלון.
כלומר שמה שאנחנו הולכים לעשות בעצם, זה פינות שקופות לחלון שלנו.
אם היינו מוותרים על צעד זה למשל החלון הסופי שלנו יראה כך:
כמו כן שימו לב כי עלינו להגדיר את המאפיין WindowStyle כ-none.
פתחו פרויקט WPF חדש, ואת אלמנט החלון הגדירו כך:
* שימו לב ששם המחלקה מתייחס לפרויקט ה-WPF שלי, אם נתתם שם אחר לפרויקט תצטרכו לשנות את שורה 1
<Window x:Class="RoundWindow.MainWindow" 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:RoundWindow" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800" AllowsTransparency="True" WindowStyle="None" WindowStartupLocation="CenterScreen" Background="Transparent">
חלון עם קצוות מעוגלים
כעת, מה שנצטרך זה פקד מסוג Border לחלון שלנו, שלו פינות עם קצוות מעוגלים.
כידוע ב-WPF ניתן להכיל פקד אחד בתוך פקד אחר, ולכן יש לנו פקדי Panel מסוגים שונים אשר יודעים להכיל בתוכם מספר פקדים.
בתוכנית זו השתמשתי בפקד פאנל מסוג Grid ובתוכו מספר פקדים אחרים.
כך יראה קובץ ה-XAML במלואו:
<Window x:Class="RoundWindow.MainWindow" 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:RoundWindow" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800" AllowsTransparency="True" WindowStyle="None" WindowStartupLocation="CenterScreen" Background="Transparent"> <Border CornerRadius="55" BorderThickness="5" Background="#FFBBB8CC" BorderBrush="#88731414"> <Grid x:Name="myGrid"> <Label Margin="0,0,0,360" FontFamily="Caladea" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"> Round Window</Label> <Label x:Name="myLabelLink" FontFamily="Impact" FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center"> <Hyperlink x:Name="myLink" NavigateUri="http://g4a.co.il"> http://g4a.co.il</Hyperlink> </Label> <Button Width="100" Height="20" Margin="0,180,0,0" FontFamily="Arial Black" Click="Button_Click"> EXIT</Button> </Grid> </Border> </Window>
וכך תראה התוכנית כאשר נריץ אותה:
למידע נוסף על WPF באתר של מייקרוסופט יש ללחוץ כאן