Schematy kolorystyczne oraz czcionka

Interfejs aplikacji POS został stworzony w taki sposób, aby zapewnić spójność wyglądu wszystkich widoków oraz łatwość zarządzania. Dlatego zdefiniowano nazwy kolorów, którymi można się posługiwać tworząc i/lub modyfikując widok.

Zdefiniowane nazwy kolorów można podzielić na dwie grupy. Kolory zarządzalne bezpośrednio przez użytkownika w interfejsie POS oraz kolory zarządzalne pośrednio, niemożliwe do bezpośredniej zmiany przez użytkownika, tylko ustawiane automatycznie na podstawie kolorów zarządzalnych bezpośrednio.

Kolory zarządzalne bezpośrednio

  • ThemeColor – kolor bazowy motywu (kolor podstawowy), używany jako:
    • kolor tekstu w widokach podstawowych i modalnych,
    • kolor tła w widoku komunikatu,
    • kolor tła przycisków w widoku komunikatu,
    • kolor tła przycisku Szukaj/Dodaj np. na liście dokumentów handlowych, paragonie, produktach,
    • kolor tła zaznaczonej pozycji w kontrolce ComboBox,
    • kolor tła notyfikacji,
    • kolor wybranego/zaznaczonego radiobuttona oraz checkboxa
  • ThemeBackground – kolor bazowy motywu, używany jako:
    • kolor tła widoku podstawowego i modalnego,
    • kolor tekstu i ikon wektorowych przycisków (poza menu bocznym),
    • kolor tekstu i ikon wektorowych w widoku komunikatu,
    • kolor tekstu i obramowania przycisków w widoku komunikatu,
    • kolor testu przycisku Szukaj/Dodaj,
    • kolor tekstu i ikony wektorowej notyfikacji,
    • kolor tekstu wybranego/zaznaczonego radiobuttona oraz checkboxa

Kolory zarządzalne pośrednio

  • ThemeColor2 – kolor podstawowy (ThemeColor) z przeźroczystością 85%, używany jako:
    • kolor nagłówka list (DataGrid)
  • ThemeColor3 – kolor podstawowy (ThemeColor) z przeźroczystością 25%, używany jako:
    • kolor zaznaczenia pozycji na liście
  • ThemeColor4 – kolor podstawowy (ThemeColor) z przeźroczystością 65%, używany jako:
    • kolor zaznaczenia wiersza na liście najechanego kursorem myszki,
    • kolor zaznaczenia obrysu przycisku składającego się z samej ikony wektorowej (HeaderButton) po najechaniu na niego kursorem myszki,
    • kolor zaznaczenia w menu bocznym po najechaniu na pozycję kursorem myszki
  • HintColor – kolor podpowiedzi dla kontrolki TextBox
  • Background – kolor stały z określoną przeźroczystością – #1ADFE5E5, używany jako:
    • kolor tła listy

Użycie kolorów w kodzie

W dowolnym fragmencie kodu xaml, kolorów używamy poprzez polecenie DynamicResource, przykładowo:

<TextBox Foreground="{DynamicResource ThemeColor}" />

W większości przypadków powyższy przykład nie ma racji bytu, z uwagi na predefiniowane ustawienia, które zwalniają nas z konieczności takiej dodatkowej konfiguracji dla właściwości Foreground.

Krój czcionki również został zdefiniowany dla całej aplikacji i jest zarządzalny z poziomu interfejsu użytkownika POS. Dla większości kontrolek nie trzeba go dodatkowo ustawiać. Wyjątkiem może być np. definicja kolumn listy, gdzie należy pamiętać o ustawieniu kroju czcionki w następujący sposób:

<DataGridTextColumn FontFamily="{DynamicResource FontFamily}" />

 

Czy ten artykuł był pomocny?