Udostępnij za pośrednictwem

  • Artykuł

          

Surface 2.0 SDK - ScatterView Udostępnij na: Facebook

Autor: Tomasz Kowalczyk

Opublikowano: 2011-10-11

Jest to drugi artykuł z serii traktującej o możliwościach wykorzystania Surface 2.0 SDK przy projektowaniu oprogramowania na urządzenia dotykowe. W skład omawianego SDK wchodzą m.in. kontrolki programowe WPF, których pełna funkcjonalność możliwa jest do zaobserwowania przy tworzeniu aplikacji wielodotykowych. Pierwszą i podstawową z tych kontrolek jest ScatterView. Kontrolka ta powinna być wykorzystywana przez programistów gdy tworzony przez nich interfejs użytkownika (UI) zawiera elementy, które dają się przemieszczać po ekranie, obracać i zmieniać rozmiar w trakcie użytkowania aplikacji.

W tym artykule zostały zawarte informacje o:

  • Podstawowej kontrolce Surface 2.0 SDK – ScatterView;
  • Zmianie atrybutów omawianej kontrolki i jej własnościach;
  • Programowym dodawaniu elementów do kontrolki;
  • Dodawaniu interaktywnych elementów do ScatterView;
  • Testowaniu i debugowaniu aplikacji platformy Surface za pomocą narzędzi dostępnych wraz z SDK.

ScatterView – Podstawowe informacje

ScatterView jest kontrolką, której możliwości należy poznać aby móc tworzyć aplikacje na platformę Surface. Potrafi ona wyświetlać dowolną, interaktywną zawartość obsługiwaną przez kilku użytkowników. Elementy znajdujące się w ScatterView mogą być dowolnie i niezależnie od siebie przesuwane i obracane ponadto użytkownicy mogą również zmieniać ich rozmiary. Kontrolka ta składa się z obszaru głównego i dowolnej liczby elementów ScatterViewItem, które de facto są kontrolkami platformy Surface.

Kontrolka ScatterView uwydatnia prawdziwy potencjał urządzeń wielodotykowych. Obszar, który ona udostępnia może być zapełniony zarówno przez proste elementy tj. obrazki, sekwencje wideo jak i przez rozbudowane zbiory kontrolek platformy Surface m.in. przyciski, listy wyboru czy slidery.

Praktyczne wykorzystanie

W celu poznania możliwości jakie daje omawiany element interfejsu użytkownika w artykule tym zostanie omówiona implementacja oprogramowania, korzystającego z możliwości urządzeń wielodotykowych.

Wymagania funkcjonalne projektu.

Program ten powinien z określonego katalogu znajdującego się na dysku twardym komputera wyświetlić w kontrolce ScatterView znajdujące się w nim obrazki. Na każdym z obrazków powinna dodatkowo znajdować się kontrolka Button z napisem „Kliknij mnie”. Po dotknięciu kontrolki typu SurfaceButton obrazek, który będzie się pod nim znajdował musi zmienić kolor na czarno – biały. Ponadto użytkownik bądź użytkownicy korzystający z aplikacji powinni mieć możliwość przesuwania, obracania i zmiany wielkości wyświetlonych elementów.

Implementacja

W celu implementacji projektu realizującego powyższe wymagania należy przede wszystkim uruchomić Visual Studio 2010. Wybrać File, następnie New i Project. Z kolumny znajdującej się po lewej stronie należy wybrać Surface, aplikacja ta będzie korzystała z WPF.

Informacja
Wszystkie kody źródłowe projektów utworzonych w ramach artykułów będą dostępne na tej stronie.

Następnie należy wykonać kolejno poniższe kroki:

  1. Wybrać z bloku Surface Controls kontrolkę ScatterView i metodą przeciągnij i upuść umieścić ją w oknie pliku SurfaceWindow1.xaml, który to jest standardowo otworzony po założeniu nowego projektu dla Surface. Operacja ta została zobrazowana na Rys. 1 Przenoszenie kontrolki ScatterView do projektu.

Rys. 1 Przenoszenie kontrolki ScatterView do projektu.

  1. Następnie w zakładce edytora plików .xaml należy uzupełnić kod źródłowy pliku zgodnie z kodem pokazanym poniżej.
<s:ScatterView x:Name="scatter">
        <s:ScatterView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Image x:Name="img" Source="{Binding}"/>
                    <s:SurfaceButton Click="OnItemClicked" 
                                     Content="Kliknij mnie!" Width="100" Height="80"/>
                </Grid>
            </DataTemplate>
        </s:ScatterView.ItemTemplate>
    </s:ScatterView>

Ważne jest aby kontrolce ScatterView nadać unikalną nazwę (<s:ScatterView x:Name="scatter">), gdyż będzie to potrzebne w dalszej części tworzenia aplikacji. Dokładnie w momencie gdy trzeba będzie wczytać do kontrolki obrazki z konkretnego katalogu.

Warto jest również wspomnieć fakt, iż kontrolki WPF platformy Surface obsługują Databinding znany ze standardowych aplikacji WPF pod Windows. Dzięki temu kod tworzony przez programistów jest bardziej czytelny. Databinding pozwala na rozdzielenie danych od tego w jaki sposób są one wyświetlane. Dzięki temu dane wypełniające zawartość kontrolki ScatterView mogą pochodzić ze złożonych źródeł jak bazy danych, jak i zarówno prostych tablic.

Aby skorzystać z funkcji Databinding należy określić jakie elementy UI będą tego używać. W omawianym projekcie będą to obrazki pobierane z katalogu stąd pochodzą wartości konkretnych atrybutów kontrolki Image (<Image x:Name="img" Source="{Binding}"/>).

Kolejnym ważnym elementem w powyższym kodzie jest fragment odpowiedzialny za wyświetlenie i przechwycenie zdarzenia polegającego na wybraniu napisu „Kliknij mnie!” przez użytkownika. Realizowane jest to za pomocą kontrolki SurfaceButton oraz zastosowaniu w praktyce podstaw programowania zdarzeniowego (Click="OnItemClicked") gdzie to wartość atrybutu Click określa nazwę metody (OnItemClicked) znajdującą się w pliku SurfaceWindow1.xaml.cs, która jest uruchamiana w momencie wybrania przez użytkownika napisu na konkretnym obrazku.

  1. W kolejnym kroku należy edytować plik code-behind projektu, czyli SurfaceWindow1.xaml.cs. W oknie Solution Explorer należy dwukrotnie kliknąć SurfaceWindow1.xaml.cs. Pokazane to zostało na Rys. 2 Edycja kodu źródłowego.

Rys. 2 Edycja kodu źródłowego.

Przede wszystkim należy dodać referencję do przestrzeni nazwSystem.IO, dzięki czemu podczas tworzenia projektu będzie możliwość dostępu do podania ścieżki katalogu ze zdjęciami.

using System.IO;
  1. Następnie w głównej metodzie inicjalizacyjnej programów przygotowywanych na platformę Surface (SurfaceWindow1()) należy dodać linijkę odpowiedzialną za pobranie wszystkich plików typu *.jpg z konkretnego katalogu (w tym przypadku będzie to domyślny katalog z obrazkami systemu Windows 7, który u każdego użytkownika powinien zadziałać).
scatter.ItemsSource = Directory.GetFiles(@"C:\Users\Public\Pictures\Sample Pictures", "*.jpg");

Pełny kod źródłowy metody będącej konstruktorem został wypisany poniżej:

public SurfaceWindow1()
        {
            InitializeComponent();
            AddWindowAvailabilityHandlers();
            scatter.ItemsSource = Directory.GetFiles(@"C:\Users\Public\Pictures\Sample Pictures", "*.jpg");
        }
  1. Kolejny krok będzie polegał na deklaracji i implementacji metody zdarzeniowej OnItemClicked, która to będzie uruchamiana w momencie wybrania przez użytkownika napisu znajdującego się na każdym z wczytanych obrazków w celu zmiany przestrzeni barw obrazka na czarno – biały.
private void OnItemClicked(object sender, RoutedEventArgs e)
        {
          // Wykrywa, ktory kliknieto Button i ukrywa go.
            Button b = (Button)e.Source as Button;
            b.Visibility = Visibility.Collapsed;
           
 // Wykrywa, ktory element ScatterViewItem znajdowal sie pod kliknietym Buttonem.
            ScatterViewItem item = (ScatterViewItem)scatter.ContainerFromElement(b);

            // Pobiera obrazek tla kontrolki ScatterViewItem.
            System.Windows.Controls.ContentPresenter content = FindContentPresenter(item);
            System.Windows.Controls.Image img =
             (System.Windows.Controls.Image)content.ContentTemplate.FindName("img", content);

            // Konwertuje obraz do barwy czarno-bialej.
            img.Source = new FormatConvertedBitmap(
             (BitmapSource)img.Source, PixelFormats.Gray16, BitmapPalettes.Gray16, 0);
        }
  1. Po przyciśnięciu klawisza F5 i tym samym uruchomieniu procesu debugowania, okno programu powinno wyglądać podobnie do tego pokazanego na Rys. 3 Okno utworzonego programu.

Rys. 3 Okno utworzonego programu.

Kolejnym etapem będzie testowanie tak przygotowanej aplikacji za pomocą narzędzia Input Simulator.

Testowanie

Aby przetestować pod względem wymagań funkcjonalnych przygotowaną aplikację. Należy przede wszystkim uruchomić ją w środowisku Visual Studio 2010 w trybie debugowania za pomocą klawisza F5.

Po uruchomieniu aplikacji widać, że pierwsze wymaganie odnośnie wyświetlenia zdjęć z konkretnego katalogu zostało spełnione. Ponadto nad każdym wyświetlonym obrazkiem widoczny jest napis „Kliknij mnie!”. Aby sprawdzić poprawność realizacji pozostałych wymagań, należy uruchomić narzędzie wspierające testowanie – Input Simulator. W celu uruchomienia tego programu należy go odnaleźć w menu Start i uruchomić. Rys. 4 Uruchomienie narzędzia testującego. Przedstawia utworzony projekt wraz z uruchomionym narzędziem testującym.

Rys. 4 Uruchomienie narzędzia testującego.

Kolejnym wymaganiem do sprawdzenia jest możliwość przemieszczania, obrotu oraz zmiana rozmiarów wyświetlonych obrazków. Należy tego dokonać używając np. opcji Finger (zaznaczono zielonym okręgiem na Rys. 5 Testowanie powiększania, przemieszczania i obrotu) z używanego narzędzia. Aby sprawdzić przemieszczanie obrazka wystarczy po prostu kliknąć na niego w dowolnym miejscu i przeciągnąć w inny obszar ekranu. W celu weryfikacji funkcjonowania obrotu należy kliknąć jeden z rogów obrazka i spróbować zakreślić okrąg. Aby sprawdzić jak działa możliwość zmiany rozmiaru należy z pomocą opcji Finger jednocześnie nacisnąć dwa klawisze myszy w wybranym punkcie obrazka aż ślad zostawiony przybierze kolor pomarańczowy a następnie w przeciwległym fragmencie nacisnąć lewy klawisz myszy, przytrzymać i przeciągnąć w ten sposób obserwując zmianę rozmiaru obrazka. Powyższe operacje zostały zobrazowane na Rys. 5 Testowanie powiększania, przemieszczania i obrotu.

Aby sprawdzić czy po przyciśnięciu kontrolki SurfaceButton znajdującej się na każdym z obrazków kolor danego obrazu zmieni się na czarno – biały wystarczy wybrać ponownie opcję Finger lub opcję Blob i kliknąć na napis. Po tej czynności widać, że obrazek zmienił swoje barwy na czarno – białe.

Rys. 5 Testowanie powiększania, przemieszczania i obrotu.

Podsumowanie

W tym artykule omówiono zastosowanie podstawowej kontrolki platformy Surface – ScatterView. Pokazano w jaki sposób jej używać oraz zaprezentowano jej możliwości. Zaleca się aby czytelnik eksperymentując i czytając dokumentację rozszerzył swą wiedzę na jej temat. Przedstawiono również jeden z możliwych scenariuszy testowych dotyczących aplikacji platformy Surface dzięki użyciu narzędzia Input Simulator dostarczonego wraz z Surface 2.0 SDK.

W następnym artykule zostanie omówione Drag & Drop API.