Erstellen ansprechender Ansichten für lokale Dateien

Zu den Entwurfszielen des Metro-Stils gehören übersichtliche Ansichten für eine optimale Anzeige der Inhalte, um Benutzer beim Bewältigen ihrer Aufgaben zu unterstützen. Insbesondere geht es darum, wie Sie aus den Inhalten der Dateien und Ordner von Benutzern eines lokalen Dateisystems ansprechende Galerien erstellen können. Das Anzeigen lokaler Inhalte ist eine zentrale Anforderung an viele Galerie-Apps, mit denen Benutzer Inhalte, d. h. Fotos, Videos, Musik oder Dokumente, durchsuchen und verwenden können. Windows 8 bietet einige Tools, mit denen diese Anforderung einfach, effizient und benutzerdefiniert erfüllt werden kann.

Die Funktionsweise wird am Beispiel der PhotoJournal-App erläutert, bei der es sich um ein verbundenes Fotoalbum handelt, mit dem Benutzer ihre Fotos und Videos in einer Zeitachsenansicht anzeigen und verwalten können. In der folgenden Abbildung sehen Sie die Startseite dieser App. Ein typisches Beispiel einer Ansicht, die von der App für ein Dateisystem erstellt wird, ist die Zeitachsenansicht. In dieser Ansicht werden Fotos angezeigt, die zuletzt in der App veröffentlicht und in deren lokalem Datenordner gespeichert wurden. Zudem gibt es eine Suchergebnisansicht, mit der Benutzer nach bestimmten Fotos suchen können. In diesem Beitrag werden die beiden Schritte erläutert, die zum Erstellen dieser Ansichten durch die App erforderlich sind:

1. Abrufen der relevanten Daten zum aktuellen Kontext (z. B. die Suchanfrage eines Benutzers über den Charm „Suche“)
2. Verwenden der integrierten StorageDataSource-Steuerung, um diese Daten an ein vordefiniertes Format zu binden, das auf den jeweiligen Inhalt zugeschnitten ist und vom Benutzer leicht verwendet werden kann

Abbildung 1: Die PhotoJournal-App 

Abrufen der Daten

Erstellen einer Dateiabfrage mit den richtigen Optionen

Der erste Schritt beim Erstellen der Ansicht ist das Vorbereiten der Datenquelle. Zum Erstellen einer Ansicht auf Grundlage des Dateisystems ist eine Dateiabfrage, die die gewünschten Dateien zurückgibt, besonders geeignet. Dateiabfragen ermöglichen einen schnellen, leicht anpassbaren Zugriff auf lokale Daten und geben stets den aktuellen Status des Dateisystems wieder.

Definieren des Datensatzes

Wie Sie im folgenden Diagramm sehen können, verfügen Benutzer mitunter über sehr viele Daten. Dabei handelt es sich hauptsächlich um digitale Bilder, die sich aufgrund der allgemeinen Verfügbarkeit von Digitalkameras und Telefonen mit Kamera im Laufe der Zeit ansammeln. Wegen dieses Datenumfangs sind Ansichten erforderlich, die in unterschiedlichsten Szenarien – vom durchschnittlichen Benutzer mit einigen Tausend Bildern, bis hin zum Medienexperten mit zehntausenden Bildern – funktionieren. Hierbei sollten Sie die Vorteile von Filtern und Navigationssteuerungen nutzen, damit jede Ansicht eine Größe aufweist, die einfach verwaltet werden kann. Es empfiehlt sich, die Galerieansicht nicht einfach auf eine flache Liste der gesamten Inhalte eines Benutzers zu beziehen, sondern zunächst darüber nachzudenken, welche Inhalte konkret abgefragt werden sollen. Für die Abfrage könnte zum Beispiel ganz einfach die Ordnerstruktur des Dateisystems übernommen werden, um die Sammlung dann in kleinere Datensätze zu unterteilen.

  Abbildung 2: Anzahl an Dateien pro Benutzer nach Inhaltstyp 

Um zu entscheiden, wie die Abfrage lauten soll, denken Sie über die Stärken Ihrer App und deren Einsatz im beabsichtigten Szenario nach: Weshalb ist ein bestimmtes Element im Kontext Ihrer App für den Benutzer wichtig? Die Stärken von PhotoJournal liegen im dynamischen Anzeigen von Fotos unter Verwendung zusätzlicher Daten. Das Aufnahmedatum und der Aufnahmekontext (z. B. der Aufnahmeort) stellen wichtige Bezugsdaten für den Benutzer dar. Diese können in Form von Filtern, als Sortiermethode oder als Beschriftungsmöglichkeiten eingesetzt werden.

Im Folgenden finden Sie einige Beispiele für Ansichten, die in Galerie-Apps verwendet werden können. Jede dieser Ansichten kann mithilfe der Windows 8-APIs erstellt werden.

• Hierarchische Ansichten von Dateien und Ordnern
• Diese Ansichten sehen aus wie die Dateiauswahl im Metro-Stil.
• Sie sind beim Durchsuchen unsortierter Inhalte (wie Dokumentbibliotheken) besonders hilfreich.
• Verwenden Sie zum Erstellen dieser Ansichten eine flache Abfrage, die Dateien und Ordner zurückgibt, und die Ergebnisse nach Elementtypen sortiert (erst Ordner, dann Dateien).
• Aggregierte Ansichten auf Grundlage von Metadaten
• In diesen Ansichten werden Dateien anhand der Metadaten gruppiert.
• Mit ihnen können die Medien für den Benutzer sinnvoll aufbereitet werden: etwa für eine Sortierung nach Alben, Interpreten oder Beschriftungen.
• Verwenden Sie zum Erstellen dieser Ansichten eine Ordnerabfrage, welche die Gruppen der obersten Ebene zurückgibt und anzeigt.
• Flache gefilterte Ansichten
• In diesen Ansichten wird eine Liste von Dateien angezeigt, während die Ordnerstruktur nicht berücksichtigt wird.
• Sie sind praktisch für die Anzeige von gefilterten Elementsätzen, die der Benutzer auf einen Blick analysieren kann, etwa beim Anzeigen von Suchergebnissen, die nach Stichwort gefiltert wurden.
• Verwenden Sie zum Erstellen dieser Ansichten eine tiefe Abfrage, bei der Dateien zurückgegeben werden.

Implementieren der Abfrage

Alle oben genannten Beispiele können unter Verwendung der Advanced Query Syntax (AQS), einer Sprache die vom Suchfeld im Datei-Explorer und der Dateisuche unterstützt wird, implementiert werden. AQS ist ein leistungsstarkes Tool, mit dem Ergebnisse anhand von Metadaten und Inhalt eingegrenzt werden können. Mit diesem Tool ist es möglich, nur die erforderlichen Daten abzurufen und sie dann mithilfe der Abfrage-APIs wie gewünscht zu sortieren. Da AQS von der Leistung des Systemindex unterstützt wird, können Sie Ergebnisse viel schneller abrufen und anzeigen, als beim manuellen Filtern der Dateigruppe.

PhotoJournal ist beispielsweise auf die neuesten Fotos ausgerichtet und verwendet AQS, um nur die Bilder auf der Startseite anzuzeigen, die innerhalb des letzten Monats aufgenommen wurden. Durch die Verwendung einer flachen Liste, die nach Datum sortiert ist, kann mit dieser App also eine Art Zeitachse evoziert werden.

JS

// Create a new file query from the pictures library and apply the AQS filter
var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
var options = new Windows.Storage.Search.QueryOptions(Windows.Storage.Search.CommonFileQuery.orderByDate, [".jpg", ".png"]);
// Use the app search filter to enforce business logic
options.applicationSearchFilter = "System.Photo.DateTaken:> System.StructuredQueryType.DateTime#LastMonth";
var fileQuery = picturesLibrary.createFileQueryWithOptions(options);

C#

// Create a new file query from the pictures library and apply the AQS filter
var fileTypeFilter = new string[] { ".jpg", ".png" };
var options = new Windows.Storage.Search.QueryOptions(Windows.Storage.Search.CommonFileQuery.OrderByDate, fileTypeFilter);
// Use the appl search filter to enforce business logic
options.ApplicationSearchFilter = "System.Photo.DateTaken:> System.StructuredQueryType.DateTime#LastMonth";
var fileQuery = Windows.Storage.KnownFolders.PicturesLibrary.CreateFileQueryWithOptions(options);

In der Ansicht der Suchergebnisse geht es hingegen darum, nach welchen Inhalten der Benutzer sucht. Anstelle desselben Datumsfilters wie in der Zeitachsenansicht, wird in diesem Fall die Abfragezeichenfolge des Benutzers verwendet, um die Abfrage nach Stichwörtern zu filtern und anschließend nur die relevanten Daten anzuzeigen. Gehen Sie dazu folgendermaßen vor.

JS

// Create a new file query from the pictures library and apply the AQS filter
var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
var options = new Windows.Storage.Search.QueryOptions(Windows.Storage.Search.CommonFileQuery.orderByDate, ["*"]);
// Use the text provided in the search box as the user search filter
options.userSearchFilter = queryText;
var fileQuery = picturesLibrary.createFileQueryWithOptions(options);

C#

// Create a new file query from the pictures library and apply the AQS filter
var fileTypeFilter = new string[] { "*" };
var options = new Windows.Storage.Search.QueryOptions(Windows.Storage.Search.CommonFileQuery.OrderByDate, fileTypeFilter);
// Use the application search filter to enforce business logic
options.UserSearchFilter = queryText;
var fileQuery = Windows.Storage.KnownFolders.PicturesLibrary.CreateFileQueryWithOptions(options);

Erstellen einer für die Anzeige geeigneten Datenquelle

Wenn die Abfrage eingerichtet ist, sind nur wenige Codezeilen erforderlich, um die Anzeige in einem ListView-Steuerelement vorzubereiten. Am einfachsten erledigen Sie dies mit der Methode StorageDataSource. Zum Erstellen eines StorageDataSource-Objekts müssen Sie, je nachdem, wie die Ansicht aussehen soll, einige zusätzliche Informationen angeben.

Auswählen des passenden Miniaturansichtsmodus

Beim Erstellen der Datenquelle müssen Sie entscheiden, welche Miniaturansichten verwendet werden sollen. Mit Windows-Runtime können Sie entsprechend der vorgesehenen Funktionen der Miniaturansichten zwischen mehreren Miniaturansichtsmodi wählen. Im Miniaturansichtsmodus werden einige Parameter, z. B. für das Zuschneiden, angepasst. Da es sich bei PhotoJournal um eine Bildergalerie handelt, ist im StorageDataSource-Konstruktor der Modus „picturesView“ angegeben. In diesem Modus werden alle Miniaturansichten auf ein Seitenverhältnis von 0,7 zugeschnitten, welches dem Goldenen Schnitt entspricht und für eine harmonische Ansicht sorgt. Der Modus „picturesView“ ist die allgemeine Methode für das Anzeigen von Fotos in Apps im Metro-Stil.

Auswählen einer Miniaturansichtsgröße

Mit der Miniaturansichtsgröße wird angegeben, welche Größe für die Miniaturansichten vorgesehen ist. Im System werden die Miniaturansichten in vordefinierten Größen zwischengespeichert, die auf das gesamte System angewendet werden: Wenn Sie eine dieser Größen verwenden, nimmt die App das Erscheinungsbild des Metro-Stils an. Auf diese Weise vermeiden Sie Leistungseinbußen durch Bildgrößenänderungen. In der folgenden Liste erhalten Sie einen Überblick über die verfügbaren Miniaturansichtsmodi und die jeweils empfohlenen Größen.

Tabelle 1: Empfohlene Miniaturansichtsgrößen

Sie können ganz einfach sicherstellen, dass die für die Datenquelle verwendeten Miniaturansichten unabhängig vom aktuellen Skalierungsfaktor funktionieren, indem Sie die Option Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale an den Datenquellen-Konstruktor übergeben. Daher ist es ausreichend, eine Größe anzufordern, die dem Layout der App mit einem Skalierungsfaktor von 100 % entspricht. Mit der Größe NULL geben Sie an, dass Sie in der Ansicht keine Miniaturansichten verwenden möchten und diese nicht abgerufen werden sollen.

Erstellen der Datenquelle

Da nun klar ist, wie die Sammlung aussehen soll, kann jetzt das Datenquellenobjekt erstellt werden, auf welches das ListView-Steuerelement für die Anzeige der Galerie zugreifen soll.

JS

// Set data source options
var dataSourceOptions = {
        // Options to retrieve thumbnails
    mode: Windows.Storage.FileProperties.ThumbnailMode.picturesView,
    requestedThumbnailSize: 190, // 0 means that thumbnails should not be retrieved
    thumbnailOptions: Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale
};

// Create the data source
var dataSource = new WinJS.UI.StorageDataSource(fileQuery, dataSourceOptions);      

Es ist zu erwarten, dass für viele Apps ähnliche StorageDataSource-Konfigurationen verwendet werden, da für die einzelnen Inhaltstypen, z. B. Bilder, allgemeine Muster gelten. Um Ihnen die Arbeit zu erleichtern, werden einige Voreinstellungen bereitgestellt, mit denen das StorageDataSource-Objekt optimal konfiguriert wird und zwar in nur einer einzigen Zeile. Im Beispiel der PhotoJournal-App, können mit der Standardkonfiguration für Bilder dieselben Ergebnisse abgerufen werden, wie mit dem oben abgebildeten Code.

// Shorthand datasource (similar shorthand constructors are available for Videos,
// Music and Documents)
var dataSource = new WinJS.UI.StorageDataSource("Pictures");   

C#

In C# sieht die Syntax zum Erstellen einer Datenquelle etwas anders aus, und anstelle eines StorageDataSource-Objekts wird die Klasse FileInformationFactory verwendet. Im folgenden Codebeispiel ist die Verwendung dieses Objekts zum Abrufen eines virtualisierten Dateivektors dargestellt, der mit dem GridView-Steuerelement verwendet werden kann.

var fileInformationFactory = new FileInformationFactory(
    fileQuery,
    Windows.Storage.FileProperties.ThumbnailMode.PicturesView,
    size,
    Windows.Storage.FileProperties.ThumbnailOptions.UseCurrentScale,
    true);

Benutzerdefinierte Datenquellen

Das StorageDataSource-Steuerelement und die FileInformationFactory-Klasse funktionieren optimal, wenn für die App nur allgemeine, im Dateisystem enthaltene Organisationsprinzipien erforderlich sind. Wenn jedoch eine Geschäftslogik auf die angezeigten Daten angewendet werden muss, können Sie im Dateisystem Ihre eigene Datenquelle erstellen.

Wenn Sie beispielsweise Daten aus mehreren Quellen aggregieren, z. B. aus der Cloud, aus einer benutzerdefinierten Datenbank und dem Dateisystem, kann für Ihre App eine eigenständige Datenquelle erforderlich sein. Zudem ist eine benutzerdefinierte Datenquelle erforderlich, wenn Sie Elemente für eine App-spezifische Geschäftslogik (z. B. auf Grundlage des Veröffentlichungsdatums eines Fotos in PhotoJournal) filtern, sortieren oder anordnen müssen. Zum Abfragen der Daten können Sie weiterhin die Datenmodell-APIs verwenden, jedoch müssen Sie eine eigene Filterebene hinzufügen und festlegen, wie die Daten virtualisiert und an das ListView-Steuerelement zurückgegeben werden sollen. Dies ist etwas aufwändiger.

Formatieren der Daten

Damit Benutzer nicht überfordert werden, sollten in Ihrer Ansicht nur relevante Inhalte abgerufen werden. Eine ansprechende und benutzerfreundliche Präsentation der Daten ist ausschlaggebend für die Überzeugungskraft und Einmaligkeit Ihrer App. Die Darstellung der Daten hängt letztlich vom Zweck der App und der Art der anzuzeigenden Inhalte ab.

Gestalten einer Bildergalerie

Da es in PhotoJournal ausschließlich um Fotos geht, ist diese App an den Prinzipien des Metro-Stils ausgerichtet: Der Inhalt sollte an erster Stelle stehen, Ablenkungen minimiert und eine schnelle und flüssige Oberfläche bereitgestellt werden. Anhand der Dateiauswahl können Sie sehen, wie diese Richtlinien umgesetzt werden:

• In einer auf Bilder ausgerichteten Ansicht ist die Bildminiaturansicht entscheidend.
• Die Benutzer erkennen ein Foto in der Regel auf den ersten Blick, sodass kein Dateiname angezeigt werden muss. Ohne das Anzeigen des Dateinamens wird die Ansicht übersichtlicher und transparenter.
• Mithilfe des Miniaturmodus „PicturesView“ können Sie alle Miniaturansichten mit demselben Seitenverhältnis anzeigen und so eine klare, harmonische Ansicht gewährleisten.
• Verwenden Sie einfache Platzhalter für ein visuelles Feedback beim Laden der Bilder. So wirkt die App schneller.
• Zeigen Sie dem Benutzer nur nützliche Texte an (z. B. Eigenschaften, die mit der Suchabfrage des Benutzers in einer Suchergebnisansicht übereinstimmen).
• Stellen Sie in einem Flyout zusätzliche Informationen bereit, auf die der Benutzer mit einer Gedrückthaltebewegung zugreifen kann.

In der folgenden Abbildung sehen Sie die Darstellung der Suchansicht von PhotoJournal, bei der diese Prinzipien implementiert wurden.

  Abbildung 3: Der Schwerpunkt liegt auf Bildern, während Eigenschaften hervorgehoben sind, die mit der Suchabfrage des Benutzers übereinstimmen

Gestalten der Ansichten weiterer Inhaltstypen

Für andere Inhaltstypen gelten andere Regeln. In einer Musikansicht kommt es beispielsweise darauf an, ein Element schnell an einem Songtitel, Albumtitel oder Interpreten zu erkennen. Es ist jedoch auch wichtig, dass ein Plattencover beim schnellen Durchsuchen gefunden wird. Dokumente bieten dagegen eher geringe grafische Präsentationsmöglichkeiten, da sie auf Text basieren. Verwenden Sie in diesem Fall eine Elementvorlage mit dem Schwerpunkt auf Text- und Elementdetails.

Wenn Ihre Ansicht auf einem hierarchischen Modell mit Dateien und Ordnern basiert, stellen Sie sicher, dass sich diese beiden Elemente grafisch deutlich voneinander absetzen. Zu diesem Zweck können Sie die Muster der Dateiauswahl von Windows verwenden. Diese Muster sind im gesamten System vorhanden, wodurch sie Benutzern vertraut sind und schnell erkannt werden können. Durch ihre Verwendung kann Ihre App nahtlos in Windows 8 integriert werden.

Abbildung 4: Überlagerungen in der Dateiauswahl zur Unterscheidung von Ordnern

Wenn Sie entschieden haben, wie Ihre Ansicht aussehen soll, können Sie sich mit dem tatsächlichen Anzeigen der Ansicht befassen.

Anzeigen der Ansicht

Ein wichtiges Konzept für das Anzeigen der Ansicht ist die Elementvorlage. Beim Erstellen einer Ansicht werden alle angezeigten Elemente in einer gemeinsamen Vorlage formatiert, welche die Elementinformationen (Miniaturansicht, Name, Datum usw.) enthält.

In JavaScript

In JavaScript, d. h. mit dem ListView-Steuerelement, entwerfen Sie die Vorlagen am besten mit CSS auf Grundlage von ListView-Klassen.

.imageGallery .win-container
{
    margin-right: 10px;
    margin-bottom: 10px;
}

.imageGallery .win-item
{
    width: 190px;
    height: 130px;
    overflow: hidden;
    background-color:  #333333;
}

.imageGallery .win-item img {
    width: 190px;
    height: 130px;
    overflow: hidden;
}

Der gebräuchlichste Ansatz beim Rendern von Elementen für eine Ansicht ist das Erstellen einer Elementvorlagenmethode, die vom ListView-Steuerelement aufgerufen wird, um die einzelnen Elemente in der Ansicht zu erstellen. Diese Methode wird für jedes Element aufgerufen, sobald das jeweilige Element auf dem Bildschirm angezeigt werden soll. Die Methode wird als programmgesteuertes Rendering bezeichnet. Für jedes Element werden spontan und programmgesteuert DOM-Elemente erstellt.

Das Verwalten der Qualität von Miniaturansichten kann komplex sein. Beim ersten Anzeigen eines Fotos im System des Benutzers gibt Windows eine schnelle Miniaturansicht mit niedriger Auflösung zurück, um die Reaktionsfreudigkeit zu verbessern. Anschließend wird eine Miniaturansicht mit hoher Auflösung angezeigt. Mit der Hilfsfunktion „LoadThumbnail“ des StorageDataSource-Steuerelements können Sie den Vorgang vereinfachen und diese Ereignisse dem System überlassen, wodurch die Details abstrahiert werden und das Einfügen der angeforderten Miniaturansicht in das bereitgestellte Bildelement sichergestellt wird. Das Rendering kann somit mit wenigen Codezeilen erledigt werden:

function storageRenderer(itemPromise, element) {
    var img, itemStatus;
    if (element === null) {
        // dom is not recycled, so create inital structure
        element = document.createElement("div");
        element.className = "FileTemplate";
        element.appendChild(document.createElement("img"));
    }
    img = element.querySelector("img");
    img.style.opacity = 0;

    return {
        // returns the placeholder
        element: element,
        // and a promise that will complete when the item is fully rendered
        renderComplete: itemPromise.then(function (item) {
            // now do cheap work (none here, so we return item ready)
            return item.ready;
        }).then(function (item) {
            // wait until item.ready before doing expensive work
            return WinJS.UI.StorageDataSource.loadThumbnail(item, img).then(function (image) {
                // perform any operation that requires the thumbnail to be available
            });
        })
    };
}

Nachdem Sie den Stil und das Rendering festgelegt haben, müssen Sie nur noch das ListView-Steuerelement initialisieren, um die Galerie-App fertigzustellen:

var container = document.getElementById("listviewDiv");
var listViewOptions = {
    itemDataSource: dataSource,
    itemTemplate: storageRenderer,
    layout: new WinJS.UI.GridLayout(),
    selectionMode: "single"
};

var listViewControl = new WinJS.UI.ListView(container, listViewOptions);

Hinweis: Für JavaScript-Entwickler ist ein weiterer, dem folgenden XAML-Beispiel ähnlicher Ansatz verfügbar, das so genannte deklarative Rendering mit HTML-Markup. Weitere Informationen finden Sie im StorageDataSource-Beispiel. Das deklarative Rendering ist einfacher, jedoch bietet das programmgesteuerte Rendering mehr Flexibilität.

In XAML

In XAML wird ein Ansatz verwendet, der sich etwas von der bereits beschriebenen JavaScript-Methode unterscheidet. Für diesen Ansatz wird zunächst XAML-Markup erstellt, das die zu verwendende Vorlage repräsentiert, und diese Vorlage anschließend an das GridView- oder ListView-Steuerelement gebunden. Dies wird als deklaratives Rendering bezeichnet. Hierbei sorgt die ListView für das Generieren der Elemente für alle Elemente der Ansicht und füllt diese mithilfe der Bindungen mit den richtigen Daten auf. Sie können alle Eigenschaften, die durch das FileInformation-Objekt bereitgestellt werden, an das Steuerelement binden.

Markup der XAML-Vorlage

<UserControl.Resources>
    <local:ThumbnailConverter x:Key="thumbnailConverter"/>
    <DataTemplate x:Key="Custom190x130ItemTemplate">
        <Grid Width="190" Height="130">
            <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="190" Height="130">
                <Image Source="{Binding Path=Thumbnail, Converter={StaticResource thumbnailConverter}}" Width="190" Height="130"/>
            </Border>
        </Grid>
    </DataTemplate>

    <!-- Collection of items displayed by this page -->
    <CollectionViewSource
        x:Name="itemsViewSource"/>
</UserControl.Resources>

<!-- Horizontal scrolling grid -->
<GridView
    x:Name="itemGridView"
    AutomationProperties.AutomationId="ItemGridView"
    AutomationProperties.Name="Items"
    Grid.Row="1"
    Margin="0,-4,0,0"
    Padding="116,0,40,46"
    ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
    ItemTemplate="{StaticResource Custom190x130ItemTemplate}"
    SelectionMode="None"/>

Wenn eine Eigenschaft vor dem Binden verarbeitet werden muss (z. B. der Miniaturansichtsstream, der nicht direkt an ein Bildobjekt gebunden werden kann, sondern zunächst entschlüsselt werden muss), können Sie für diese Verarbeitung Wertkonverter angeben.

C#-Wertkonverter

internal class ThumbnailConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string culture)
    {
        if (value != null)
        {
            var thumbnailStream = (IRandomAccessStream)value;
            var image = new BitmapImage();
            image.SetSource(thumbnailStream);

            return image;
        }

        return DependencyProperty.UnsetValue;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string culture)
    {
        throw new NotImplementedException();
    }
}

Anschließend können Sie die GridView mit dem VirtualizedItemsVector einrichten, den Sie vom FileInformationFactory-Objekt abrufen.

itemsViewSource.Source = fileInformationFactory.GetVirtualizedFilesVector();

Erweiterte Möglichkeiten jenseits der Startansicht

Sie haben nun den Punkt erreicht, an dem Sie großartige Ansichten des Dateisystems erstellen können – darüber hinaus bieten sich jedoch noch weitere Möglichkeiten. Eine App ist gut, wenn sie auf die Anforderungen des Benutzers reagieren und jeden Bildschirm individuell an die Intentionen des Benutzers anpassen kann. Wenn beispielsweise Optionen zum Pivotieren von Daten oder der semantische Zoom angeboten werden, kann die Benutzerfreundlichkeit durch das Verfassen von zusätzlichem Code verbessert werden.

Pivotieren von Daten

Im Beispiel der PhotoJournal-App könnten beispielsweise Navigationssteuerungen zum Kameramodell oder dem Datum hinzugefügt werden. Mit diesen Navigationssteuerungen kann der Umfang der Dateiabfrage durch Verwendung von AQS beschränkt und dem Benutzer immer eine überschaubare Anzahl von Bildern angezeigt werden. Sobald die Navigationssteuerung geändert wird, muss eine neue Abfrage ausgeführt werden, anschließend werden die Datenquellen im ListView-Steuerelement ausgetauscht. Dann werden die alte Abfrage und die alte Datenquelle verworfen, damit der Ressourcenverbrauch der App nicht überhand nimmt. Solche Navigationssteuerungen können einfach zur oben vorgestellten Suchansicht hinzugefügt werden. Das Ergebnis sieht wie folgt aus:

 Abbildung 5: Hinzufügen von Navigationssteuerungen zur Suchansicht, damit Benutzer Inhalte filtern können

Semantisches Zoomen

Der semantische Zoom ist eine weitere Möglichkeit, mit der Sie Ihre App durch nur wenig zusätzlichen Code aufwerten können. Wenn Navigationssteuerungen nur bedingt für Ihre App geeignet sind oder selbst in pivotierten Ansichten eine große Anzahl von Elementen angezeigt wird, können Sie mithilfe des semantischen Zooms eine Zusammenfassung des Inhalts anzeigen, die der Benutzer auf einen Blick beurteilen kann.

Abbildung 6: Semantisches Zoomen

Zusammenfassung

In diesem Beitrag wurde die Verwendung von StorageDataSource und VirtualizedItemsVector mit JavaScript- oder XAML-Steuerelementen vorgestellt, um reichhaltige Ansichten des Dateisystems für Ihre Galerie-App zu ermöglichen. Beachten Sie Folgendes:

• Wählen Sie die Daten sorgfältig aus, die Sie in Ihrer Ansicht präsentieren möchten, und erstellen Sie entsprechende Abfragen an das Dateisystem.
• Berücksichtigen Sie beim Gestalten Ihrer Ansicht den Inhaltstyp und die Anpassung an andere Windows-Elemente.
• Nutzen Sie die Flexibilität der Renderingpipeline, um Ihre Geschäftslogik beim Zeichnen von Elementen umzusetzen.
• Implementieren Sie zusätzliche Funktionen mit Navigationssteuerungen und dem semantischen Zoom.

Sie sind nun in der Lage eine hervorragende Galerie-App zu erstellen – legen Sie los!

– Marc Wautier, Programmmanager, Windows User Experience

 

Ressourcen