Używanie nowoczesnych motywów w aplikacjach opartych na modelu

Użytkownicy aplikacji opartych na modelu z włączoną funkcją nowoczesny, odświeżony wygląd aplikacji opartych na modelu doświadczają zaktualizowanego stylu dostosowanego do systemu projektowania Microsoft Fluent 2. Ponieważ ten nowoczesny odświeżony wygląd jest wyposażony w nowy system motywów, klasyczne motywy nie są honorowane; Twórcy mogą jednak modyfikować kolory używane przez aplikację, aby ułatwić dopasowanie ich do znakowania organizacyjnego dla użytkowników, którzy włączyli nowoczesny, odświeżony wygląd. W tym artykule powiesz się, jakie zastępowanie stylu jest dostępne w nowoczesnych, odświeżanych wyglądach i jak zaimplementować je w organizacji.

Modyfikowanie motywu aplikacji

[Ten temat pochodzi ze wstępnej wersji dokumentacji i może ulec zmianie.]

Dzięki nowoczesnemu, odświeżonemu wyglądowi włączonemu w aplikacji twórcy mogą utworzyć motyw niestandardowy, który pomaga dopasować się do znakowania organizacyjnego. Dzięki niestandardowemu motywowi możesz zmienić nagłówek aplikacji, hiperłącza, wyszukiwanie, przyciski główne, wskaźniki aktywnych kart, wybór wierszy i efekty najechania kursorem. Motyw niestandardowy umożliwia również zmianę czcionki używanej w aplikacji. W tym celu należy hermetyzować żądane informacje o motywie do zasobu XML, użyć ustawienia aplikacji, aby wskazać ten zasób internetowy, a następnie zweryfikować nowy nowoczesny motyw zgodny z oczekiwaniami.

Omówienie zasobu XML motywu niestandardowego

Pierwszym krokiem do utworzenia niestandardowego nowoczesnego motywu jest utworzenie pliku XML z żądanymi parametrami motywu z co najmniej jednym z następujących atrybutów zdefiniowanych wewnątrz tagu CustomTheme .

• BasePaletteColor — Kolor bazowy (kod HEX) używany jako podstawa do wygenerowania 16-slotowej palety kolorów dla motywu.
• LockPrimary — wartość logiczna określająca sposób użycia wybranego koloru bazowego do wygenerowania palety kolorów o 16 miejscach.
  • Fałsz (wartość domyślna): paleta jest zoptymalizowana pod kątem ułatwień dostępu, ale nie gwarantuje, że kolor bazowy będzie wyświetlany na żadnym miejscu wygenerowanej palety. Jest to ustawienie domyślne. Użyj generatora motywów Fluent, aby wyświetlić podgląd wygenerowanej palety na podstawie wybranych opcji basePaletteColor, vibrancy, i hueTorsion.
  • Prawda: Kolor nasion umieszcza się w głównym (środkowym) slocie palety. Pozostałe kolory są generowane przez stopniowe rozjaśnianie kolorów z jednej strony i ciemniejsze z drugiej strony. Wygenerowana paleta może nie spełniać wymagań dotyczących ułatwień dostępu w zakresie współczynnika kontrastu.
• Font — czcionka dla twojego niestandardowego motywu. Czcionka renderowana przez motyw niestandardowy zależy od możliwości wyświetlania tej czcionki przez przeglądarkę i maszynę docelową.
• Vibrancy — opcjonalny parametr, który ma wpływ na wyciszenie lub jasność palety, zwłaszcza jaśniejsze kolory. Dozwolone wartości są z zakresu od -100 do 100 z wartością domyślną 0. Ta opcja ma zastosowanie tylko wtedy, gdy lockPrimary="true".
• HueTorsion — opcjonalny parametr, który ma wpływ na odcień, cień lub ton palety, zwłaszcza jaśniejsze kolory. Dozwolone wartości są z zakresu od -100 do 100 z wartością domyślną 0. Ta opcja ma zastosowanie tylko wtedy, gdy lockPrimary="true".

Zastąp paletę

Zastępowanie pojedynczych gniazd w palecie motywów zapewnia twórcy pełną kontrolę nad kolorami miejsc na wartość, co może być szczególnie przydatne, gdy wymagane są dodatkowe modyfikacje poza standardowymi parametrami motywu opisanymi powyżej. Aby zastąpić określony slot, przypisz wartość do żądanego slotu według jego nazwy. Na przykład można określić kod HEX dla darker70, primarylub lighter10 dostosować wygląd dokładnie do preferencji. Ustawienie wartości dla wszystkich 16 miejsc całkowicie zastępuje wszystkie opcje palety opisane w poprzedniej sekcji, co pozwala na wysoce dostosowany i unikatowy schemat kolorów.

Nazwy slotów dla palety od najciemniejszego do najjaśniejszego to: darker70, darker60, …<>, darker10, primary, lighter10, lighter20, …, lighter80. Zapoznaj się z projektantem motywu Fluent, aby dowiedzieć się, jak te gniazda są zwykle używane w kontrolkach Fluent.

Przykładowy kod XML dla motywu niestandardowego

Na przykład ten kod XML określa motyw niestandardowy, który jest zielony z inną czcionką.

<CustomTheme 
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
/>

Ten plik XML określa motyw niestandardowy przy użyciu alternatywnego algorytmu generowania palety z przesłonięciem dla pojedynczego miejsca na wartość.

<CustomTheme 
    basePaletteColor="#00FF00"
    lockPrimary="false"
    font="'GreatVibes', cursive"

    lighter70="#FFFFFF"
/>

Modyfikowanie kolorów nagłówka aplikacji

Twórcy mogą dostosować styl nagłówka aplikacji, aby odbiegać od motywu aplikacji. Można to zrobić, rozszerzając kod XML utworzony dla niestandardowego nowoczesnego motywu o co najmniej jeden z następujących atrybutów zdefiniowanych wewnątrz tagu AppHeaderColors .

• Background — kolor tła nagłówka aplikacji. Ten element musi być zdefiniowany, aby wszelkie zmiany zaczęły obowiązywać.
• Foreground — kolor tekstu nagłówka aplikacji. Jeśli nie zostanie określony, system próbuje obliczyć odpowiedni kolor, który ma wystarczający kontrast do podanego koloru tła.
• BackgroundHover — kolor tła przycisków w nagłówku aplikacji po umieszczeniu kursora na nim. Jeśli nie określono żadnej wartości, system oblicza kolor na podstawie koloru tła.
• ForegroundHover — kolor tekstu przycisków w nagłówku aplikacji po umieszczeniu nad nim kursora. Jeśli nie określono żadnej wartości, system próbuje obliczyć odpowiedni kolor, który ma wystarczający kontrast do backgroundHover koloru.
• BackgroundPressed — kolor tła przycisków w nagłówku aplikacji po naciśnięciu. Logika domyślna jest taka sama jak backgroundHover.
• ForegroundPressed — kolor tekstu przycisków w nagłówku aplikacji po naciśnięciu. Logika domyślna jest taka sama jak foregroundHover.
• BackgroundSelected — kolor tła przycisków w nagłówku aplikacji po wybraniu. Logika domyślna jest taka sama jak backgroundHover.
• ForegroundSelected — kolor tekstu przycisków w nagłówku aplikacji po ich wybraniu. Logika domyślna jest taka sama jak backgroundHover.

Przykładowy kod XML dla nowoczesnego motywu

Na przykład ten kod XML rozszerza zielony niestandardowy motyw o czarny nagłówek aplikacji. Aby zapewnić optymalną użyteczność, zalecamy określenie różnych wartości kolorów dla każdego stanu interakcji.

<CustomTheme
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
>  
  <AppHeaderColors
    background="#000000" 
    foreground="#FFFFFF" 
    backgroundHover="#313131" 
    foregroundHover="#FFFFFF"
    backgroundPressed="#494949"
    foregroundPressed="#FFFFFF"
    backgroundSelected="#717171" 
    foregroundSelected="#FFFFFF"  
  />
</CustomTheme>

Tworzenie zasobu internetowego

1. Za pomocą tekstu lub edytora XML zapisz kod XML używany do tworzenia zasobu internetowego. Przykładowy kod XML dla nowoczesnego motywu

2. Zaloguj się do usługi Power Apps.

3. Wybierz pozycję Rozwiązania w okienku nawigacji po lewej stronie, a następnie utwórz nowe rozwiązanie.

4. Wybierz Nowe>Więcej>Zasób sieci Web.

5. Wybierz Wybierz plik, przeglądaj i wybierz utworzony wcześniej plik tekstowy XML.

6. W okienku Nowa właściwość zasobu internetowego wprowadź następujące wartości:

   • Nazwa wyświetlana: wprowadź nazwę wyświetlaną, taką jak Zielony motyw niestandardowy.
   • Name. Zaakceptuj automatycznie wygenerowane lub wprowadź unikatową nazwę zasobu internetowego.
   • Typ: Dane (XML)

7. Wybierz Zapisz. To dostosowanie można opublikować, wykonując kroki opisane w następnej sekcji.

Zastosuj niestandardowy motyw do aplikacji w Twoim środowisku

Po wybraniu kolorów i utworzeniu zasobu internetowego wykonaj następujące kroki, aby włączyć styl nagłówka tej aplikacji dla wszystkich aplikacji w środowisku z włączonym nowym wyglądem .

1. W rozwiązaniu użytym do utworzenia zasobu internetowego wybierz pozycję Dodaj istniejące>Więcej>Ustawienia.
2. Wpisz motyw niestandardowy w polu Wyszukaj , wybierz pozycję Definicja motywu niestandardowego, wybierz pozycję Dalej, a następnie wybierz pozycję Dodaj.
3. W rozwiązaniu wybierz pozycję Definicja motywu niestandardowego, a następnie wybierz pozycję Edytuj na pasku poleceń.
4. W prawym okienku właściwości Edytuj definicję motywu niestandardowego wybierz opcję Nowa wartość środowiska w obszarze Ustawianie wartości środowiska i wprowadź unikalną nazwę zasobu internetowego utworzonego wcześniej (unikalną nazwę można znaleźć w kolumnie Nazwa rozwiązania). Usuń podwójne cudzysłowy i upewnij się, że dodano prefiks wydawcy dla zasobu internetowego. Na przykład nazwa może być wyświetlana jako contoso_green-custom-theme , jak w tym przykładzie.
5. Wybierz Zapisz.
6. Wybierz pozycję Ustawienia w okienku Obiekty po lewej stronie, a następnie wybierz pozycję Opublikuj wszystkie dostosowania na pasku poleceń. (To polecenie jest wyświetlane, gdy nie wybrano żadnych składników w rozwiązaniu).

Niestandardowa aplikacja oparta na modelu wykorzystująca przykład rozszerzonego motywu zielonego.

Weryfikowanie kolorów nagłówka nowej aplikacji

Po opublikowaniu motywu niestandardowego należy zweryfikować jego zastosowanie w aplikacji, aby upewnić się, że wszystko jest wyświetlane zgodnie z oczekiwaniami.

Modyfikowanie tylko kolorów nagłówka aplikacji

Twórcy mogą dostosować tylko styl nagłówka aplikacji, aby odbiegać od domyślnego motywu aplikacji. Można to zrobić, wykonując następujące czynności:

1. Utwórz plik XML z różnymi wybranymi kolorami, zawierający jeden lub więcej atrybutów z sekcji Kolor nagłówka aplikacji zastępuje sekcję zdefiniowanej wewnątrz etykiety AppHeaderColors.
2. Utwórz zasób internetowy przy użyciu tego samego procesu opisanego dla motywów niestandardowych, ale upewnij się, że zasób XML ma odpowiednią opisową nazwę wyświetlaną, taką jak XML nagłówka aplikacji Green.
3. Zastosuj niestandardowe kolory nagłówków aplikacji do aplikacji w swoim środowisku, przypisując ten zasób internetowy do środowiska lub aplikacji w ustawieniu Zastąp kolor nagłówka aplikacji. Wykonaj kroki opisane w temacie Stosowanie motywów niestandardowych do środowiska, ale zamiast tego użyj ustawienia Zastąp kolor nagłówka aplikacji.

   Uwaga / Notatka

   Wszelkie konfiguracje zdefiniowane w ustawieniu Zastąp kolor nagłówka aplikacji są ignorowane, jeśli zdefiniowano ustawienie Definicja motywu niestandardowego.

4. Sprawdź wizualizacje nagłówka niestandardowej aplikacji, w tym wszystkie stany przycisków, aby upewnić się, że wszystko jest wyświetlane zgodnie z oczekiwaniami i że istnieją wystarczające współczynniki kontrastu dla ułatwień dostępu. Należy sprawdzić następujące opcje kolorów:
   • Żądane kolory są wyświetlane dla nagłówka aplikacji w stanie spoczynku oraz dla każdego stanu interakcji przycisku.
   • Istnieje co najmniej współczynnik kontrastu 4,5:1 między kolorami pierwszego planu i tła dla stanu spoczynku i każdym stanem interakcji przycisku.

Przykładowy kod XML dla zastępowania koloru nagłówka aplikacji

Na przykład ten kod XML określa zielony kolor tła nagłówka aplikacji z białym tekstem z ciemniejszymi kolorami tła dla różnych stanów interakcji przycisku. Aby zapewnić optymalną użyteczność, zalecamy określenie różnych wartości kolorów dla każdego stanu.

<AppHeaderColors 
  background="#12783F"
  foreground="#FFFFFF" 
  backgroundHover="#165A31" 
  foregroundHover="#FFFFFF"
  backgroundPressed="#0F1C12"
  foregroundPressed="#FFFFFF"
  backgroundSelected="#153D23" 
  foregroundSelected="#FFFFFF"
/>

W przypadku tej konfiguracji nagłówek aplikacji powinien wyglądać następująco podczas odtwarzania aplikacji. Aby wyświetlić motyw, może być konieczne odświeżenie karty przeglądarki.

Zobacz także

Motywy klasyczne

Nowoczesny odświeżony wygląd