יצירת ממשק משתמש עקבי באמצעות סגנונות
- 8 דקות
בממשק המשתמש של יישום מרובה פלטפורמות (MAUI) של .NET, משאבים הם דרך נהדרת להימנע מערכים כפולים עם קוד קשיח בסימון Extensible Application Markup Language (XAML), אך הם עשויים להיות מייחלים. אתה מקצה כל ערך מאפיין בנפרד, מה שעלול לגרום ל- XAML עומס ומלולאלי. יחידה זו מראה לך כיצד לקבץ הגדרות מרובות בסגנון, שעשוי לסייע בהפיכת הקוד לניתן לתחזוקה.
כיצד משאבים יכולים לעומס ב- XAML
משאב מספק ערך עבור מאפיין יחיד. עם זאת, שימוש במשאבים רבים עלול להוביל ל- XAML מילולי. נניח שברצונך לקבל מראה מותאם אישית עבור הלחצנים שלך. תחילה עליך ליצור משאבים עבור הערכים הדרושים לך. לאחר מכן, החל כל משאב על כל הלחצנים שלך. הקוד הבא מראה כיצד סימון XAML עשוי לחפש שני לחצנים.
<Button
Text = "OK"
BackgroundColor = "{StaticResource highlightColor}"
BorderColor = "{StaticResource borderColor}"
BorderWidth = "{StaticResource borderWidth}"
TextColor = "{StaticResource textColor}" />
<Button
Text = "Cancel"
BackgroundColor = "{StaticResource highlightColor}"
BorderColor = "{StaticResource borderColor}"
BorderWidth = "{StaticResource borderWidth}"
TextColor = "{StaticResource textColor}" />
שים לב כיצד אותם חמישה מאפיינים מוגדרים בכל אחד מהלחצנים. השימוש במשאבים מסיר את הצורך בערכים חוזרים וקודקוד קשיח בארבעה מהם. עם זאת, סוג זה של סימון XAML נעשה קשה לקריאה במהירות. בנוסף, אם אתה מגדיר מספר רב של מאפיינים עבור כל פקד, קל להשמיט אחד מהם בטעות, מה שמוביל ל חוסר עקביות במראה הפקדים. הפתרון הוא ליצור סגנון המקצה את כל ארבעת המאפיינים בבת אחת.
מהו מגדיר?
המקשים הם רכיבי המפתח שבהם אתה משתמש ליצירת סגנונות.
מגדיר הוא גורם מכיל עבור זוג מאפיין/ערך. ניתן לחשוב על מגדיר המייצג משפט הקצאה. עליך לציין את המאפיין שיש להקצות ואת הערך שיש להחיל. בדרך כלל להגדיר אובייקטים ב- XAML שלך. הדוגמה הבאה יוצרת Setter עבור TextColor זה.
<Setter Property="TextColor" Value="White" />
באפשרותך להשתמש במשאב עבור הערך במגדיר, כפי שמוצג בקוד הבא. שיטה זו נהדרת כאשר ברצונך להשתמש באותו ערך במגדירים מרובים.
<Setter Property="TextColor" Value="{StaticResource textColor}" />
הערה
יש ליישם את ערך המאפיין שאתה מציין במגדיר כמאפיין הניתן לאגד. כל המאפיינים בפקדים ב- .NET MAUI שמסתיים בסיומת המאפיין הם מאפיינים הניתנים לאיגוד. אם אתה מנסה להשתמש במאפיין כגון TextColor במגדיר, ודא שקיים מאפיין מתאים הניתן לאגד בשם TextColorProperty עבור פקד זה. בפועל, כמעט כל המאפיינים שבהם ברצונך להשתמש במגדירים מיושמים באופן זה.
מהו סגנון?
סגנון הוא אוסף של ערכה ייעודית בסוג מסוים של פקד. ל- .NET MAUI נדרש סוג יעד כדי שהוא יוכל לוודא שהמאפיינים במגדירים שלך קיימים בסוג זה.
הקוד הבא מציג סגנון המשלב את ארבעת הערכים מהדוגמה הקודמת. שים לב TargetType מוגדר כלחצן וכל המאפיינים ב- setters הם חברים ב- Button class. לא ניתן להשתמש בסגנון זה עבור תווית, מכיוון שהמחלקה Label אינה כוללת את המאפיין BorderColor או BorderWidth.
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="#2A84D3" />
<Setter Property="BorderColor" Value="#1C5F9B" />
<Setter Property="BorderWidth" Value="3" />
<Setter Property="TextColor" Value="White" />
</Style>
הגדרת סגנון
בדרך כלל, אתה מגדיר סגנונות כמהמשאבים בתוך ResourceDictionary אחר. מילון משאבים מקל עליך להשתמש בסגנון על-פני פקדים מרובים באותו דף, או אפילו ביישום כולו. הקוד הבא מראה כיצד להגדיר סגנון כהמשאבים בתוך מילון. שים לב שלסגנון ניתן שם באמצעות המאפיין x:key x:key הסגנון. מתן שם לסגנון מאפשר לך להפנות לסגנון מתוך דפי ה- XAML שלך.
<ContentPage.Resources>
<Style x:Key="MyButtonStyle" TargetType="Button">
...
</Style>
</ContentPage.Resources>
החלת סגנון
עליך לצרף סגנון לפקד על-ידי הקצאת השם סגנון זה. ההקצאה גורמת הגדרת אובייקטי הסגנון להיות מוחלים על פקד היעד. הקוד הבא מראה כיצד להחיל סגנון לחצן על שני לחצנים.
<Button Text="OK" Style="{StaticResource MyButtonStyle}" />
<Button Text="Cancel" Style="{StaticResource MyButtonStyle}" />
בדוגמה הקודמת, השתמשת בסיומת StaticResource סימון כדי לצרף את הסגנון לפקדים. שיטה זו נהדרת כאשר אינך זקוק לסגנון כדי לשנות בזמן ריצה. אך מה קורה אם ברצונך ליישם משהו כמו ערכות נושא דינאמיות, שבהן ממשק המשתמש צריך להשתנות? במקרה זה, באפשרותך להשתמש בסיומת DynamicResource כדי לטעון את הסגנון.
<Button Text="Cancel" Style="{DynamicResource MyButtonStyle}" />
DynamicResource מאזין להחלפת המאפיין x:key x:key במילון המשאבים. אם אתה כותב קוד שטען סגנון חדש לתוך ResourceDictionary עם אותו ערך x:key, הסגנון החדש מוחל באופן אוטומטי על ממשק המשתמש שלך.
שימוש בסגנון משתמע עבור פקדים מרובים
נניח שממשק המשתמש שלך כולל 50 לחצנים וברצונך להחיל את אותו הסגנון על כולם. עם מה שאנחנו יודעים עד כה, תצטרך להקצות את המאפיין סגנון בכל לחצן באופן ידני. זה לא כל כך קשה לעשות, אבל זה עדיין מייגע.
סגנון מפורש הוא סגנון שאתה מוסיף למילון משאבים מבלי להעניק לו מזהה x:key זה. סגנונות משתמעים מוחלים באופן אוטומטי על כל הפקדים של TargetType האובייקט.
הקוד הבא מציג את הדוגמה הקודמת שהוצהרת כסגנון משתמע. סגנון זה מוחל על כל לחצן בדף.
<ContentPage.Resources>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="BorderColor" Value="Navy" />
...
</Style>
</ContentPage.Resources>
חשוב
התאמת הסגנונות המפורשים לפקדים דורשת התאמה מדויקת לסגנונות TargetType. פקדים היורשים מסוג היעד אינם מקבלים את הסגנונות. כדי להשפיע על פקדים ירושה, באפשרותך להגדיר את Style.ApplyToDerivedTypes לתכונה True בעת הגדרת הסגנון. לדוגמה, כדי להחיל סגנון על הסוג לחצן כך שישפיע על כל אחד מהלחצנים היורשים מ- Button (כגון לחצן תמונה של , לחצן אפשרויות או סוג מותאם אישית שאתה יוצר), באפשרותך להשתמש בסגנון כגון זה.
<ContentPage.Resources>
<Style TargetType="Button"
ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="Black" />
</Style>
</ContentPage.Resources>
עקיפת סגנון
ניתן לחשוב על סגנון כמתן ערכה של ערכי ברירת מחדל עבור פקדים. סגנון קיים עשוי להיות קרוב לדרישות שלך, אך מכיל ערכה אחת או שתיים שאינך מעוניין להוסיף. במקרה זה, באפשרותך להחיל את הסגנון ולאחר מכן לעקוף את הערך על-ידי הגדרת מאפיינים ישירות. ההגדרה המפורשת מוחלת לאחר הסגנון, כך שהיא תעקוף את הערך מהסגנון.
נניח שברצונך להשתמש בסגנון הבא עבור כמה לחצנים בדף שלך.
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="BorderRadius" Value="10" />
<Setter Property="BorderWidth" Value="3" />
</Style>
סגנון זה מתאים לכל הלחצנים שלך, למעט ביטול, שזקוק לרקע אדום. באפשרותך להשתמש באותו סגנון עבור לחצן ביטול כל עוד אתה מגדיר גם את המאפיין BackgroundColor ישירות. הקוד הבא מראה כיצד לעקוף את הגדרת הצבע.
<Button
Text="Cancel"
Style="{StaticResource MyButtonStyle}"
BackgroundColor="Red"
... />
ייעד סוג אב
נניח שאתה מעוניין בצבע רקע מותאם אישית עבור הלחצנים והתוויות שלך. באפשרותך ליצור סגנונות נפרדים עבור כל סוג, או ליצור סגנון אחד עם TargetType ל- VisualElement. שיטה זו פועלת מאחר VisualElement היא מחלקת בסיס הן עבור לחצן והן תווית.
הקוד הבא מציג סגנון שמותאם למחלקת בסיס המוחלת על שני סוגים נגזרים שונים.
<Style x:Key="MyVisualElementStyle" TargetType="VisualElement">
<Setter Property="BackgroundColor" Value="#2A84D3" />
</Style>
...
<Button Style="{StaticResource MyVisualElementStyle}" ... />
<Label Style="{StaticResource MyVisualElementStyle}" ... />
דוגמה זו מזהה את הסגנון באמצעות x:Key והפקדים מחילים אותו באופן מפורש. סגנון משתמע אינו פועל כאן מאחר ש- TargetType עבור סגנון משתמע חייב להיות התאמה מדויקת לסוג הפקד.
שימוש ב- BasedOn כדי לרשת מסגנון
נניח שברצונך ליצור מראה גמיש עבור ממשק המשתמש שלך. אתה מחליט שכל הפקדים צריכים להשתמש בצבע רקע עקבי. ייתכן שההגדרה של צבע הרקע תופיע ביותר באחד מהסגנונות שלך. הקוד הבא מציג שני סגנונות עם מגדיר חוזר.
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="BorderColor" Value="Navy" />
<Setter Property="BorderWidth" Value="5" />
</Style>
<Style x:Key="MyEntryStyle" TargetType="Entry">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="TextColor" Value="White" />
</Style>
באפשרותך להשתמש בירושה של סגנונות כדי ליצור פקטור של המגדיר הכפול לסגנון בסיס. כדי ליצור סגנון נגזר, הגדר את המאפיין BasedOn כדי להפנות לסגנון הבסיס. הסגנון החדש יורש את כל הקוטרים מסגנון הבסיס שלו. הסגנון הנגזר יכול גם להוסיף מגדירים חדשים או להחליף ערכה ירושה בערכה המכילה ערך אחר.
הקוד הבא מציג את הסגנונות מהדוגמה הקודמת השוכללו בהירארכיה. ה- setter המשותף מופיע רק בסגנון הבסיס במקום לחזור על עצמו. שים לב שאתה משתמש StaticResource כדי לחפש את סגנון הבסיס. לא ניתן להשתמש ב- DynamicResource במצב זה.
<Style x:Key="MyVisualElementStyle" TargetType="VisualElement">
<Setter Property="BackgroundColor" Value="Blue" />
</Style>
<Style x:Key="MyButtonStyle" TargetType="Button" BasedOn="{StaticResource MyVisualElementStyle}">
<Setter Property="BorderColor" Value="Navy" />
<Setter Property="BorderWidth" Value="5" />
</Style>
<Style x:Key="MyEntryStyle" TargetType="Entry" BasedOn="{StaticResource MyVisualElementStyle}">
<Setter Property="TextColor" Value="White" />
</Style>
ערך TargetType של הבסיס והסגנונות הנגזרים חייב להיות תואם. כדי שהסגנונות יהיו תואמים, הם חייבים לכלול את אותו המאפיין TargetType, או ש- TargetType של הסגנון הנגזר הוא צאצא של ה- TargetType של סגנון הבסיס.