Crearea unei interfețe de utilizator unitare utilizând stiluri
- 8 minute
În interfața de utilizator a aplicației .NET Multi-platform (MAUI), resursele sunt foarte bune pentru a evita codificatele hard-coded, valorile dublate din marcajul XAML (Extensible Application Markup Language), dar acestea pot fi plictisitoare să se aplice. Puteți atribui fiecare valoare de proprietate individual, care poate avea ca rezultat aglomerarea și verbozitatea XAML. Această unitate vă arată cum să grupați mai multe setări într-un stil, ceea ce vă poate ajuta să dezordineți codul și să-l faceți mai bine întreținut.
Cum se pot aglomera resursele XAML
O resursă furnizează o valoare pentru o singură proprietate. Totuși, utilizarea multor resurse poate duce la XAML detaliată. Să presupunem că doriți un aspect particularizat pentru butoane. Creați mai întâi resurse pentru valorile de care aveți nevoie. Apoi aplicați fiecare resursă la toate butoanele. Următorul cod arată cum poate căuta marcajul XAML pentru două butoane.
<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}" />
Observați cum sunt setate aceleași cinci proprietăți pe fiecare dintre butoane. Utilizarea resurselor elimină nevoia de valori repetate, codificate în patru dintre ele. Totuși, acest tip de marcaj XAML devine rapid greu de citit. În plus, dacă setați un număr mare de proprietăți pentru fiecare control, este simplu să omiteți din greșeală una dintre ele, conducând la inconsecvențe în aspectul controalelor. Soluția este să creați un stil care atribuie toate cele patru proprietăți în același timp.
Ce este un setter?
Setters sunt componentele cheie pe care le utilizați pentru a crea stiluri.
Un expeditor este un container pentru o pereche de proprietăți/valori. Vă puteți gândi la un setter ca reprezentând o declarație de atribuire. Specificați ce proprietate să atribuiți și valoarea de aplicat. De obicei, creați obiecte Setter în marcajul XAML. Următorul exemplu creează un obiect Setter pentru proprietatea TextColor .
<Setter Property="TextColor" Value="White" />
Puteți utiliza o resursă pentru valoarea dintr-un sectter, așa cum se arată în următorul cod. Această tehnică este foarte bună atunci când doriți să utilizați aceeași valoare în mai multe secții.
<Setter Property="TextColor" Value="{StaticResource textColor}" />
Notă
Valoarea proprietății pe care o specificați într-un setter trebuie implementată ca proprietate lizibilă. Toate proprietățile din controalele din .NET MAUI care se termină cu proprietatea sufix sunt proprietăți lizibile. Dacă încercați să utilizați o proprietate cum ar fi Culoare text într-un setter, asigurați-vă că există o proprietate lizibilă corespunzătoare denumită TextColorProperty pentru acel control. În practică, aproape toate proprietățile pe care doriți să le utilizați în setter-urile dvs. sunt implementate astfel.
Ce este un stil?
Un stil este o colecție de secere direcționate către un anumit tip de control. .NET MAUI necesită un tip țintă, astfel încât să se poată asigura că există proprietățile din setter-urile dvs. pe acel tip.
Următorul cod afișează un stil care combină cele patru valori din exemplul anterior. Observați că TargetType este setat la Buton și toate proprietățile din setters sunt membri ai clasei Buton . Nu puteți utiliza acest stil pentru o etichetă, deoarece clasa Etichetă nu include proprietatea BorderColor sau 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>
Definirea unui stil
De obicei, definiți stiluri ca resurse într-un obiect ResourceDictionary . Un dicționar de resurse facilitează utilizarea stilului în mai multe controale de pe aceeași pagină sau chiar în întreaga aplicație. Următorul cod vă arată cum să definiți un stil ca resursă într-un dicționar. Observați că stilul are un nume utilizând proprietatea x:Key . Denumirea unui stil vă permite să faceți referire la acesta din paginile XAML.
<ContentPage.Resources>
<Style x:Key="MyButtonStyle" TargetType="Button">
...
</Style>
</ContentPage.Resources>
Aplicarea unui stil
Atașați un stil la un control, atribuind numele proprietății Stil . Atribuirea determină aplicarea fiecăruia dintre obiectele Setter în stil la controlul țintă. Următorul cod vă arată cum să aplicați un stil de buton la două butoane.
<Button Text="OK" Style="{StaticResource MyButtonStyle}" />
<Button Text="Cancel" Style="{StaticResource MyButtonStyle}" />
În exemplul anterior, ați utilizat extensia marcajului StaticResource pentru a atașa stilul la controale. Această tehnică este foarte bună atunci când nu aveți nevoie de stil pentru a modifica la momentul rulării. Dar ce se întâmplă dacă doriți să implementați ceva cum ar fi teme dinamice, unde interfața de utilizator trebuie să se modifice? În acest caz, puteți utiliza extensia marcajului DynamicResource pentru a încărca stilul.
<Button Text="Cancel" Style="{DynamicResource MyButtonStyle}" />
DynamicResource ascultă înlocuirea proprietății x:Key în dicționarul de resurse. Dacă scrieți cod care încarcă un stil nou în ResourceDictionary cu aceeași valoare x:Key , noul stil se aplică automat interfeței de utilizator.
Utilizarea unui stil implicit pentru mai multe controale
Să presupunem că interfața de utilizator are 50 de butoane și doriți să aplicați același stil pentru toate. Cu ceea ce știm până acum, ar trebui să atribuiți proprietății Stil pe fiecare buton manual. Nu e greu de făcut, dar e încă plictisitor.
Un stil implicit este un stil pe care îl adăugați la un dicționar de resurse fără a-i da un identificator x:Key . Stilurile implicite se aplică automat la toate controalele obiectului TargetType specificat.
Următorul cod arată exemplul anterior declarat ca stil implicit. Acest stil se aplică la fiecare buton de pe pagină.
<ContentPage.Resources>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="BorderColor" Value="Navy" />
...
</Style>
</ContentPage.Resources>
Important
Potrivirea stilurilor implicite la controale necesită o potrivire exactă cu Tipul țintă specificat. Controalele care moștenesc de la tipul țintă nu primesc stilurile. Pentru a afecta controalele moștenite, puteți seta atributul Style.ApplyToDerivedTypes la True atunci când definiți stilul. De exemplu, pentru a aplica un stil la tipul Buton și a-l seta să afecteze oricare dintre butoanele care moștenesc de la buton (cum ar fi un Buton ImageButton, RadioButton sau un tip particularizat pe care îl creați), puteți utiliza un stil precum acesta.
<ContentPage.Resources>
<Style TargetType="Button"
ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="Black" />
</Style>
</ContentPage.Resources>
Înlocuirea unui stil
Vă puteți gândi la un stil ca furnizând un set de valori implicite pentru controale. Un stil existent poate fi apropiat de cerințele dvs., dar conține unul sau două secere pe care nu le doriți. În acest caz, puteți să aplicați stilul, apoi să înlocuiți valoarea setând proprietățile direct. Setarea explicită se aplică după stil, deci va înlocui valoarea din stil.
Să presupunem că doriți să utilizați următorul stil pentru mai multe butoane de pe pagină.
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="BorderRadius" Value="10" />
<Setter Property="BorderWidth" Value="3" />
</Style>
Acest stil funcționează pentru toate butoanele, cu excepția Anulare, care necesită un fundal roșu. Puteți utiliza același stil pentru butonul Anulare atât timp cât setați proprietatea BackgroundColor direct. Următorul cod vă arată cum să înlocuiți setarea de culoare.
<Button
Text="Cancel"
Style="{StaticResource MyButtonStyle}"
BackgroundColor="Red"
... />
Țintiți un tip de strămoș
Să presupunem că doriți o culoare de fundal particularizată pentru butoane și etichete. Puteți crea stiluri separate pentru fiecare tip sau puteți crea un stil cu TargetType setat la VisualElement. Această tehnică funcționează deoarece VisualElement este o clasă de bază atât pentru buton , cât și pentru etichetă.
Următorul cod afișează un stil care vizează o clasă de bază care se aplică la două tipuri derivate diferite.
<Style x:Key="MyVisualElementStyle" TargetType="VisualElement">
<Setter Property="BackgroundColor" Value="#2A84D3" />
</Style>
...
<Button Style="{StaticResource MyVisualElementStyle}" ... />
<Label Style="{StaticResource MyVisualElementStyle}" ... />
Acest exemplu identifică stilul utilizând x:Key și controalele le aplică în mod explicit. Un stil implicit nu funcționează aici, deoarece TargetType pentru un stil implicit trebuie să fie o potrivire exactă cu tipul de control.
Utilizați BasedOn pentru a moșteni de la un stil
Să presupunem că doriți să creați un aspect cohesiv pentru interfața de utilizator. Decideți că toate controalele ar trebui să utilizeze o culoare de fundal unitară. Setarea culorii de fundal este probabil să apară în mai multe stiluri. Următorul cod afișează două stiluri cu un setter repetat.
<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>
Puteți utiliza moștenirea stilurilor pentru a scoate în considerare secvența dublată într-un stil de bază. Pentru a crea un stil derivat, setați proprietatea BasedOn pentru a face referire la stilul de bază. Noul stil moștenește toate secvențele de la stilul său de bază. Stilul derivat poate adăuga, de asemenea, noi secere sau poate înlocui un sectter moștenit cu una care conține o altă valoare.
Următorul cod afișează stilurile din exemplul anterior refactorizate într-o ierarhie. Setterul comun apare doar în stilul de bază, în loc să fie repetat. Observați că utilizați extensia marcajului StaticResource pentru a căuta stilul de bază. Nu puteți utiliza DynamicResource în această situație.
<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>
Valoarea TargetType a stilurilor de bază și derivate trebuie să fie compatibilă. Pentru ca stilurile să fie compatibile, trebuie să aibă aceeași proprietate TargetType sau TargetType a stilului derivat este un descendent al tipului Țintă al stilului de bază.