Udostępnij za pośrednictwem

  • Artykuł

     

Surface 2.0 SDK - Stylizacja aplikacji Udostępnij na: Facebook

Autor: Tomasz Kowalczyk

Opublikowano: 2011-12-02

Jest to czwarta część cyklu artykułów poświęconych Surface 2.0 SDK. Opisane zostanie w niej przygotowanie warstwy prezentacji aplikacji za pomocą oprogramowania Microsoft Expression Blend 4. Przedstawione zostaną również metody, pozwalające na efektowne i efektywne zmiany wyglądu aplikacji, dedykowanej dla urządzeń dotykowych za pomocą stylów CSS.

W tym artykule zostały zawarte informacje na temat:

  • definiowania wyglądu i zachowania aplikacji za pomocą stylów CSS,
  • wykorzystania Themes jako agregatora stylów CSS,
  • używania oprogramowania Microsoft Expression Blend 4 do projektowania interfejsu użytkownika programów opartych o Surface 2.0 SDK.

Wprowadzenie

WPF pozwala na rozdzielenie prac projektowych nad oprogramowaniem na logikę biznesową i warstwę prezentacji. Warstwa prezentacji jest jedną z dwóch warstw aplikacji projektowanych w oparciu o Surface 2.0 SDK. Używa ona Microsoft Windows Presentation Foundation (WPF). Framework ten posiada cechy, które w dużej mierze ułatwiają projektowanie interfejsu użytkownika (UI) dla urządzeń dotykowych. Używając WPF programista ma możliwość m.in. projektowania własnych kontrolek, które dostosuje odpowiednio do docelowej platformy użytkowej. Ponadto, używając stylów CSS, jest w stanie robić to niezwykle elastycznie, co przyniesie wymierne korzyści w razie konieczności wprowadzenia zmian w interfejsie użytkownika.

Rola stylów CSS w oprogramowaniu

Implementacja jednolitego wyglądu i zachowania aplikacji może być realizowana za pomocą  stylów CSS. Ich zastosowanie pozwoli również na łatwiejsze i szybsze późniejsze modyfikacje wyglądu aplikacji. Style powinny być rozumiane jako prosta metoda definiowania jednolitego wyglądu i zachowania w obrębie danej aplikacji wielu kontrolkom jednocześnie. Zbiór stylów i zachowań, definiowanych dla kontrolek w poszczególnej aplikacji, został określony jako Themes, które to są definiowane w oddzielnych plikach. Używanie więc stylów i Themes pozwala skupić się designerom na manipulacji plikami.xaml, definiującymi wygląd a deweloperom nad logiką aplikacji.

Dedykowane narzędzia

Microsoft Expression Blend 4 to oprogramowanie używane przez designerów do projektowania i tworzenia warstwy prezentacji. Z łatwością można go więc również używać jako narzędzia wspomagającego pracę nad interfejsem użytkownika aplikacji, dedykowanym urządzeniom dotykowym, wytwarzanym w oparciu o Surface 2.0 SDK.

Wersję 60 dniową oprogramowania Microsoft Expression Blend 4 Ultimate można pobrać ze strony.

Implementacja

Expression Blend to aplikacja, która pozwala na przygotowanie layoutu (głównego szkieletu odpowiedzialnego za wygląd) aplikacji, który następnie może zostać wyeksportowany jako plik .xaml, który to będzie posiadał taki sam format jak pliki .xaml WPF aplikacji dla platformy Surface. Rys. 1. Expression Blend 4przedstawia aplikacje Expression Blend 4 z otwartym projektem realizowanym na platformę Surface.

Rys. 1. Expression Blend 4.

Aby wykonać projekt na potrzeby tego artykułu, otwórz wcześniej przygotowany projekt, który znajduje się pod tym adresem oraz nadaj mu odpowiedni wygląd i zachowanie. Wówczas zostanie utworzony Themes, w którym będzie zdefiniowany liniowy gradient, nadający wygląd tła aplikacji oraz stylów kontrolek SurfaceListBoxItems, LibraryStack i LibraryBar.

Informacja
Wszystkie kody źródłowe projektów, utworzonych w ramach artykułów, będą dostępne na tej stronie.
  1. Pobierz projekt o nazwie Style_StartApp_for_Blend4 z tego miejsca. Zapisz go np. na dysku C (C:\ControlBox_Starter).
  2. Uruchom program Microsoft Expression Blend 4. Po uruchomieniu programu wybierz File, Open Project/Solution, a następnie pobrany wcześniej projekt o nazwie Style_StartApp_for_Blend4.
  3. W zakładce Projects, znajdującej się lewym, górnym rogu ekranu, będzie widoczny wczytany projekt. Znajdź tam plik o nazwie Window1.xaml i otwórz go poprzez dwukrotne kliknięcie myszką. Następnie, z prawej części edytora, wybierz opcję podglądu edytowanego pliku nazwaną Split, co umożliwi wyświetlenie zarówno podglądu aplikacji jak i kodu źródłowego w postaci pliku .xaml. Pokazane to zostało na Rys. 2. Widok edycji Split.

Rys. 2. Widok edycji Split.

  1. Przejdź do zakładki Assets, umieszczonej w lewej części programu, następnie z widocznej listy wybierz ostatnią opcję Locations, a z niej Microsoft.Surface.Presentation.dll, co pozwoli na korzystanie z kontrolek platformy Surface metodą przeciągnij i upuść podczas projektowania interfejsu użytkownika. Przedstawia to Rys. 3. Wczytanie kontrolek platformy Surface.

Rys. 3. Wczytanie kontrolek platformy Surface.

  1. Znajdź kontrolkę o nazwie SurfaceButton i przeciągnij ją w puste szare pole projektowanej aplikacji, które znajduje się na samej górze, pokazane tak, jak na Rys. 4. Kontrolka SurfaceButton. Następnie przejdź do zakładki Properties, widocznej z prawej strony ekranu i ustaw kolejno wartości w konkretnych zakładkach, w zakładce: Layout: Width: 182px; HorizontalAligment: Center; VerticalAligment: Center.

Rys. 4. Kontrolka SurfaceButton.

  1. Wyedytuj kod źródłowy, znajdujący się w pliku .xaml i w miejscu, gdzie dodany został SurfaceButton, zaraz za znacznikiem </s:SurfaceListBoxItem.Tag>, a przed znacznikiem </s:SurfaceListBoxItem>, wprowadź napis SurfaceButton, który będzie wyświetlony na dodanej kontrolce.
  2. Pozostałe kontrolki, które już są widoczne zostały przygotowane w analogiczny sposób.
  3. Następnie prawym przyciskiem myszy z menu kontekstowego wybierz katalog Resources, i wybierz opcję Add New Folder. Folderowi należy nadać nazwę Themes. Operacja ta została pokazana na Rys. 5. Utworzenie katalogu Themes.

Rys. 5. Utworzenie katalogu Themes.

  1. Kliknij prawym przyciskiem myszy na nowo utworzony folder Themes i wybierz opcję Add New Item, wówczas wyświetli się okno, z którego wybierz opcję Resource Dicitionary i nadaj nazwę Green.xaml. Zostało to pokazane na Rys. 6. Utworzenie obiektu Resource Dictionary.

Rys. 6. Utworzenie obiektu Resource Dictionary.

  1. W kolejnych krokach będziesz edytował utworzony plik Green.xaml. W związku z tym, kliknij na niego dwukrotnie lewym klawiszem myszy, a następnie z panelu Resources, znajdującego się w prawym, górnym rogu ekranu, wybierz opcję, umożliwiającą edycję plików *.xaml tak, jak to zostało pokazane na Rys. 7. Edycja pliku XAML.

Rys. 7. Edycja pliku XAML.

  1. Dodaj teraz tzw. XML namespace, który określa, że tworzona aplikacja przeznaczona jest na platformę Surface. Możesz go dodać pomiędzy domyślnie ustawione namespace xmlns i xmlns:x:
xmlns:s="https://schemas.microsoft.com/surface/2008"
  1. Poniżej zadeklarowanych namespace, ale między tagami, ResourceDicitionary, zdefiniuj liniowy gradient oraz określ punkt początkowy i końcowy, odkąd dokąd ma być rysowany, aby tego dokonać użyj poniższego kodu:
<LinearGradientBrush x:Key="BackgroundBrush"
                        EndPoint="1,1"
                        StartPoint="0,0">
</LinearGradientBrush>
  1. Następnie między tagami LinearGradientBrush dodaj tagi, definiujące kolory pomiędzy jakimi ma przechodzić definiowany gradient. Kod przedstawiony został poniżej:
<GradientStop Color="#FFFFFBC8"
                Offset="1" />
<GradientStop Color="White"
                Offset="0" />
  1. W kolejnym kroku poniżej tagu LinearGradientBrush zdefiniuj style. Kontrolką, dla której będą zdefiniowane poniższe wartości jest SurfaceListBoxItem. Element Style składa się ze zbioru elementów Setter. Każdy element Setter definiuje nazwę atrybutu (Property) oraz jego wartość (Value):
<Style TargetType="{x:Type s:SurfaceListBoxItem}">
    <Setter Property="Background"
        Value="#FFA2CD3A" />
</Style>
  1. Następnie wewnątrz elementu Style zdefiniuj elementy Trigger, które pozwalają na ustawienie wartości konkretnym atrybutom podczas wywołania konkretnej akcji:
<Style.Triggers>
            <Trigger Property="IsSelected"
                    Value="True">
                <Setter Property="Background"
                        Value="White" />
                <Setter Property="Foreground"
                        Value="#FFA2CD3A" />
            </Trigger>
</Style.Triggers>
  1. Style dla kontrolki SurfaceListBoxItem zostały już zdefiniowane. Teraz czas na kolejną kontrolkę jaką jest LibraryStack. Poniżej znacznika, zamykającego definicję stylu, (</Style>) zdefiniuj style dla kolejnej kontrolki w następujący sposób:
<Style TargetType="{x:Type s:LibraryStack}">
        <Setter Property="Background"
                Value="#FFA2CD3A" />
</Style>
  1. Kolejną kontrolką, dla której trzeba określić style jest LibraryBar. W przypadku tej kontrolki konieczne jest nadpisanie kolorów, zdefiniowanych dla LibraryContainer. Dokonaj tego poprzez redefinicję Resources nadrzędnej kontrolki i ustawienie konkretnego koloru. Zapamiętaj, że powszechną metodą reprezentacji kolorów na platformie Surface jest przedstawienie ich w postaci pary Color – Brush. Nadpisując więc Resources musisz postąpić w taki właśnie sposób. Przedstawione jest to poniżej:
<Style TargetType="{x:Type s:LibraryBar}">
        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static 
      s:SurfaceColors.LibraryControlManipulationAreaBackgroundBrushKey}" 
                 Color="#FFA2CD3A" />
            <Color x:Key="{x:Static 
      s:SurfaceColors.LibraryControlManipulationAreaBackgroundColorKey}" 
                R="162" G="205" B="58" A="255" />
            <SolidColorBrush x:Key="{x:Static 
      s:SurfaceColors.LibraryControlScrollAreaBackgroundBrushKey}" 
                 Color="#80808080" />
            <Color x:Key="{x:Static 
      s:SurfaceColors.LibraryControlScrollAreaBackgroundColorKey}" 
               R="128" G="128" B="128" A="128" />
        </Style.Resources>  
</Style>
  1. Pozostała jeszcze jedna rzecz do zdefiniowania w pliku Green.xaml. Jest to krój czcionki, wyświetlanej w aplikacji. Poniższy kod należy dodać poniżej tagu <Style.Resources>:
<Setter Property="FontFamily"
        Value="Franklin Gothic Book" />
<Setter Property="FontSize"
        Value="14" />
  1. Wyedytuj plik Window1.xaml. Znajdź w nim element Grid, który jest pierwszym zadeklarowanym tagiem w aplikacji na platformę Surface i ustaw wartość atrybutu Background na BackgroundBrush, czyli gradient zdefiniowany wcześniej w pliku Green.xaml.
<Grid Background="{StaticResource BackgroundBrush}">
  1.  Następnie otwórz plik App.xaml i w sekcji ResourceDictionary.MergedDictionaries dodaj element
<ResourceDictionary Source="Resources/Themes/Green.xaml" />
  1. Z menu głównego wybierz Project -> Build Project, następnie Run Project. Efekt końcowy został przedstawiony na Rys. 8. Utworzona aplikacja.

Rys. 8. Utworzona aplikacja.

Podsumowanie

W tym artykule zaprezentowano, w jaki sposób przygotować UI aplikacji na platformę Surface za pomocą oprogramowania Microsoft Expression Blend 4. Pokazano również, w jaki sposób można ułatwić i przyspieszyć proces projektowania interfejsu użytkownika właśnie dzięki oprogramowaniu Microsoft Expression Blend 4. Przedstawiono również ideę zastosowania stylów i Themes w aplikacjach jako sposób na kompleksowe projektowanie interfejsu użytkownika.