Teil 4: Dateizugriff und -auswahl

Applies to Windows only

Wichtig  Dieses Lernprogramm ist für Microsoft Visual Studio 2013 und Windows 8.1 konzipiert. Teile des Lernprogramms funktionieren in Verbindung mit Microsoft Visual Studio 2012 und Windows 8 nicht ordnungsgemäß.

In Teil 2 dieser Lernprogrammreihe, Verwalten von App-Lebenszyklus und -Zustand, haben Sie App-Daten und Sitzungsdaten kennen gelernt und erfahren, wie diese Daten im ApplicationData-Speicher gespeichert werden. Die App kann standardmäßig auf bestimmte Dateisystemspeicherorte wie App-Datenspeicherorte, das App-Installationsverzeichnis und im Ordner Downloads erstellte Elemente zugreifen.

Im Gegensatz dazu sind Benutzerdaten wie Bilder, Videos und Dokumentdateien von der App unabhängig und werden normalerweise unter anderen Speicherorten im Dateisystem gespeichert, z. B. in den Bibliotheksordnern des Benutzers. Für den Zugriff auf diese Speicherorte muss die App Funktionen für den programmgesteuerten Zugriff auf die Daten deklarieren oder eine Dateiauswahl verwenden, um dem Benutzer das manuelle Öffnen der Datei zu ermöglichen. Da Sie hier eine Dateiauswahl für den Zugriff auf die Bilder des Benutzers verwenden, müssen Sie keine App-Funktionen deklarieren. Weitere Informationen zu Funktionen finden Sie unter Deklaration der App-Funktionen.

In diesem Lernprogramm fügen Sie dem in Teil 3: Navigation, Layout und Ansichten erstellten Fotoseitenlayout eine Funktion hinzu. Als Erstes behandeln Sie das Click-Ereignis für die Schaltfläche "Get photo", um eine Dateiauswahl zu öffnen und dem Benutzer das Auswählen eines Bilds zu ermöglichen. Anschließend binden Sie die UI-Steuerelemente an Dateieigenschaften, um die Bildinformationen anzuzeigen. Zum Schluss rekapitulieren wir das in Teil 2 erlernte Wissen zum Speichern des App-Zustands. Hier verwenden Sie eine MostRecentlyUsedList, damit der Zugriff auf das vom Benutzer ausgewählte Bild erhalten bleibt.

In diesem Lernprogramm lernen Sie Folgendes:

  • Verwenden eines FileOpenPicker-Objekts, um dem Benutzer das Aufrufen einer Datei zu ermöglichen
  • Binden von UI-Steuerelementen an Daten
  • Verwenden eines MostRecentlyUsedList-Objekts für den Zugriff auf eine zuvor geöffnete Datei

Vorbereitung

Schritt 1: Verwenden einer Dateiauswahl zum Aufrufen einer Bilddatei

Über die Dateiauswahl kann Ihre App auf Dateien und Ordner im gesamten System des Benutzers zugreifen. Wenn Sie die Dateiauswahl aufrufen, kann der Benutzer sein System durchsuchen und Dateien oder Ordner zum Zugreifen und Speichern auswählen. Nachdem der Benutzer Dateien oder Ordner ausgewählt hat, erhält Ihre App diese Auswahl als StorageFile- und StorageFolder-Objekte. Ihre App kann dann mithilfe dieser Objekte mit den ausgewählten Dateien und Ordnern arbeiten.

Als Erstes müssen Sie das GetPhotoButton_Click-Ereignis behandeln, um ein Bild zur Anzeige abzurufen.

Wir beginnen hier mit dem Code aus Teil 3: Navigation, Layout und Ansichten.

JJ655411.wedge(de-de,WIN.10).gifSo fügen Sie eine Dateiauswahl hinzu

  1. Doppelklicken Sie im Projektmappen-Explorer auf die Datei PhotoPage.xaml, um sie zu öffnen.
  2. Wählen Sie die Schaltfläche "Get photo"Button aus.
  3. Klicken Sie im Eigenschaftenfenster auf die Ereignisschaltfläche (Ereignisschaltfläche).
  4. Suchen Sie am Anfang der Ereignisliste nach dem Click-Ereignis. Geben Sie im Textfeld für das Ereignis "GetPhotoButton_Click" als Namen der Methode ein, die das Click-Ereignis behandelt.
  5. Drücken Sie die EINGABETASTE. Die Ereignishandlermethode wird erstellt und im Code-Editor geöffnet, damit Sie den Code hinzufügen können, der bei Auftreten des Ereignisses ausgeführt werden soll.
  6. Fügen Sie der Methodensignatur des Ereignishandlers das Schlüsselwort async hinzu.
    
    Private Async Sub GetPhotoButton_Click(sender As Object, e As RoutedEventArgs)
    
    End Sub
    
    
  7. Fügen Sie diesen Code der Ereignishandlermethode hinzu. Damit wird eine Dateiauswahl geöffnet, mit deren Hilfe der Benutzer ein Bild aus "Bilder" auswählen kann. Wenn der Benutzer eine Datei auswählt, wird diese als Quelle des Bilds und des Datenkontexts der Seite festgelegt.
    
    
            Dim openPicker = New Windows.Storage.Pickers.FileOpenPicker()
            openPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary
            openPicker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail
    
            ' Filter to include a sample subset of file types.
            openPicker.FileTypeFilter.Clear()
            openPicker.FileTypeFilter.Add(".bmp")
            openPicker.FileTypeFilter.Add(".png")
            openPicker.FileTypeFilter.Add(".jpeg")
            openPicker.FileTypeFilter.Add(".jpg")
    
            ' Open the file picker.
            Dim file = Await openPicker.PickSingleFileAsync()
    
            ' file is null if user cancels the file picker.
            If file IsNot Nothing Then
    
                ' Open a stream for the selected file.
                Dim fileStream = Await file.OpenAsync(Windows.Storage.FileAccessMode.Read)
    
                ' Set the image source to the selected bitmap.
                Dim BitmapImage = New Windows.UI.Xaml.Media.Imaging.BitmapImage()
    
                BitmapImage.SetSource(fileStream)
                displayImage.Source = BitmapImage
                Me.DataContext = file
    
            End If
    
    
  8. Drücken Sie F5, um die App zu erstellen und auszuführen. Navigieren Sie zur Fotoseite, und klicken Sie auf die Schaltfläche "Get photo", um die FileOpenPicker zu starten. Das Foto wird zwar angezeigt, der Fotoinfotext wurde jedoch nicht aktualisiert. Dieses Problem beheben Sie im nächsten Schritt.

    So sieht die App mit einem ausgewählten Bild aus.

    Fotoseite mit Bild

Sehen wir uns den Code zur FileOpenPicker-Verwendung etwas genauer an. Für die Verwendung einer Dateiauswahl müssen Sie ein Dateiauswahlobjekt erstellen und anpassen und die Dateiauswahl einblenden, sodass der Benutzer ein Element auswählen kann.

Erstellen Sie zuerst ein FileOpenPicker-Objekt.



Dim openPicker = New Windows.Storage.Pickers.FileOpenPicker()

Legen Sie die Eigenschaften für das Dateiauswahlobjekt fest, die für Ihre Benutzer und Ihre App relevant sind. Richtlinien zur Anpassung der Dateiauswahl finden Sie unter Richtlinien für die Dateiauswahl.

Da der Benutzer ein Bild auswählt, legen Sie den SuggestedStartLocation auf "Bilder" und den ViewMode auf Thumbnail fest. Außerdem fügen Sie Dateitypfilter hinzu, sodass die Dateiauswahl nur die Dateitypen anzeigt, die Sie für Bilddateien angeben.


openPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary
openPicker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail

' Filter to include a sample subset of file types.
openPicker.FileTypeFilter.Clear()
openPicker.FileTypeFilter.Add(".bmp")
openPicker.FileTypeFilter.Add(".png")
openPicker.FileTypeFilter.Add(".jpeg")
openPicker.FileTypeFilter.Add(".jpg")

Nachdem Sie eine Dateiauswahl erstellt und angepasst haben, rufen Sie das FileOpenPicker.PickSingleFileAsync-Objekt auf, um die Dateiauswahl anzuzeigen und den Benutzer eine Datei auswählen zu lassen.

Hinweis  Wenn Sie einem Benutzer das Auswählen mehrerer Dateien ermöglichen möchten, rufen Sie PickMultipleFilesAsync auf.



' Open the file picker.
Dim file = Await openPicker.PickSingleFileAsync()

Wählt der Benutzer eine Datei aus, wird von PickSingleFileAsync ein StorageFile-Objekt zurückgegeben, das die ausgewählte Datei darstellt. Sie verarbeiten den Bilddatenstrom, um ein BitmapImage zu erstellen, und legen das BitmapImage als Source des Image-Steuerelements in der UI fest. Außerdem legen Sie die Datei als DataContext der Seite fest, sodass Sie UI-Elemente an ihre Eigenschaften binden können.



' file is null if user cancels the file picker.
If file IsNot Nothing Then

    ' Open a stream for the selected file.
    Dim fileStream = Await file.OpenAsync(Windows.Storage.FileAccessMode.Read)

    ' Set the image source to the selected bitmap.
    Dim BitmapImage = New Windows.UI.Xaml.Media.Imaging.BitmapImage()

    BitmapImage.SetSource(fileStream)
    displayImage.Source = BitmapImage
    Me.DataContext = file
End If

Schritt 2: Binden von UI-Steuerelementen an Dateidaten

An dieser Stelle wird das Bild zwar in der UI angezeigt, die Bilddateieigenschaften werden jedoch in den von Ihnen hinzugefügten Textblöcken nicht angezeigt. Sie könnten die Text-Eigenschaft der einzelnen TextBlock-Elemente im Code auf die gleiche Art und Weise festlegen wie die Image.Source-Eigenschaft.

Zum Anzeigen von Daten verwenden Sie jedoch normalerweise eine Datenbindung, um eine Datenquelle mit der UI zu verbinden (entweder durch Festlegen der Binding.Source-Eigenschaft oder durch Festlegen des DataContext-Objekts im UI-Element). Wenn Sie eine Bindung einrichten und sich die Datenquelle ändert, spiegeln sich die Änderungen automatisch in den UI-Elementen wider, die an die Datenquelle gebunden sind.

Hinweis  Bindungen sind standardmäßig one-way. Demnach spiegeln sich Aktualisierungen der Datenquelle in der UI wider. Sie können eine two-way-Bindung angeben, sodass vom Benutzer an einem UI-Element vorgenommene Änderungen für die Datenquelle übernommen werden können. Wenn beispielsweise der Benutzer den Wert in einem TextBox ändert, aktualisiert das Bindungsmodul automatisch die zugrunde liegende Datenquelle, sodass die Änderung dargestellt wird.

Mit der DataContext-Eigenschaft können Sie die Standardbindung für ein vollständiges UI-Element festlegen, einschließlich aller untergeordneten Elemente. Sie legen die in der FileOpenPicker ausgewählte StorageFile als DataContext der Fotoseite fest. Denken Sie daran, dass Sie nach dem Auswählen des Bilds den DataContext mit dieser Codezeile festlegen.



Me.DataContext = file

Hier zeigen Sie den Dateinamen an, indem Sie die Text-Eigenschaft des TextBlock-Elements für den Titel an die StorageFile.DisplayName-Eigenschaft der ausgewählten Datei binden.

Da Sie keine bindende Source angeben, sucht das Datenbindungsmodul im DataContext nach der DisplayName-Eigenschaft. Wenn der DataContextnull ist oder nicht über eine DisplayName-Eigenschaft verfügt, schlägt die Bindung ohne Warnung fehl, und im TextBlock-Element wird kein Text angezeigt.

Hier binden Sie die TextBlock-Steuerelemente an StorageFile-Eigenschaften.

JJ655411.wedge(de-de,WIN.10).gifSo binden Sie Steuerelemente an Daten

  1. Doppelklicken Sie im Projektmappen-Explorer auf die Datei PhotoPage.xaml, um sie zu öffnen.
  2. Wählen Sie das TextBlock-Element für den Fotonamen unter der Schaltfläche "Get photo" aus.
  3. Klicken Sie im Bereich Eigenschaften auf die Schaltfläche Eigenschaften (Ereignisschaltfläche), um die Ansicht Eigenschaften anzuzeigen.
  4. Klicken Sie im Bereich Eigenschaften unter Allgemein auf den Eigenschaftsmarker für die Text-Eigenschaft. Das Eigenschaftenmenü wird geöffnet.

    Hinweis  Der Eigenschaftsmarker ist das kleine Feldsymbol rechts vom jeweiligen Eigenschaftswert. Der Text-Eigenschaftsmarker ist schwarz. Dies gibt an, dass der Marker auf einen Zeichenfolgenwert festgelegt ist.

  5. Wählen Sie im Eigenschaftsmenü die Option Datenbindung erstellen... aus. Das Dialogfeld Datenbindung erstellen wird geöffnet.
  6. Wählen Sie im Dialogfeld Datenbindung erstellen in der Dropdownliste Bindungstyp die Option Datenkontext aus.
  7. Geben Sie im Textfeld Pfad den Eintrag "DisplayName" ein, wie hier dargestellt.

    Visual Studio-Dialogfeld "Datenbindung"

    Hinweis  Laut Meldung im Dialogfeld Datenbindung erstellen wurde kein Datenkontext festgelegt. Das ist in Ordnung, da Sie den Datenkontext im Code festlegen, wenn Sie die App ausführen und ein Bild abrufen.

  8. Klicken Sie auf OK.

    Hier sehen Sie das vollständige XAML (Extensible Application Markup Language) für das TextBlock-Element nach dem Hinzufügen Bindung.

    
    <TextBlock Grid.Row="1" TextWrapping="Wrap" Text="{Binding DisplayName}" 
               Style="{ThemeResource SubheaderTextBlockStyle}"/>
    
    
  9. Wählen Sie den TextBlock nach dem TextBlock-Objekt "Dateiname:" aus.
    1. Wiederholen Sie die Schritte 3-5, um eine Datenbindung für dieses TextBlock-Objekt zu erstellen.
    2. Geben Sie im Textfeld Pfad den Eintrag "Name" ein, und klicken Sie auf OK.
  10. Wählen Sie den TextBlock nach dem TextBlock-Objekt "Pfad:" aus.
    1. Wiederholen Sie die Schritte 3-5, um eine Datenbindung für dieses TextBlock-Objekt zu erstellen.
    2. Geben Sie im Textfeld Pfad den Eintrag "Pfad" ein, und klicken Sie auf OK.
  11. Wählen Sie den TextBlock nach dem TextBlock-Objekt "Erstellt am:" aus.
    1. Wiederholen Sie die Schritte 3-5, um eine Datenbindung für dieses TextBlock-Objekt zu erstellen.
    2. Geben Sie im Textfeld Pfad den Eintrag "DateCreated.Date" ein, und klicken Sie auf OK.

    Hier der XAML-Code für die Fotoinformationen StackPanel, nachdem Sie die Bindungen hinzugefügt haben.

    
    
                    <StackPanel Margin="20,0,0,0">
                        <TextBlock TextWrapping="Wrap" Text="File name:" 
                                   Style="{ThemeResource CaptionTextBlockStyle}"/>
                        <TextBlock TextWrapping="Wrap" Text="{Binding Name}" 
                                   Style="{ThemeResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
                        <TextBlock TextWrapping="Wrap" Text="Path:" 
                                   Style="{ThemeResource CaptionTextBlockStyle}"/>
                        <TextBlock TextWrapping="Wrap" Text="{Binding Path}" 
                                   Style="{ThemeResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
                        <TextBlock TextWrapping="Wrap" Text="Date created:" 
                                   Style="{ThemeResource CaptionTextBlockStyle}"/>
                        <TextBlock TextWrapping="Wrap" Text="{Binding DateCreated.Date}" 
                                   Style="{ThemeResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
                    </StackPanel>
    
    
    
  12. Drücken Sie F5, um die App zu erstellen und auszuführen. Navigieren Sie zur Fotoseite. Klicken Sie auf die Schaltfläche "Get photo", um die FileOpenPicker zu starten. Mit den hinzugefügten Bindungen werden nun beim Auswählen einer Datei die Dateieigenschaften angezeigt.

    So sieht die App aus, nachdem ein Bild ausgewählt wurde und die Textblöcke an Daten gebunden wurden.

    Fotoseite mit Bild und Datenbindung

Schritt 3: Speichern und Laden des Zustands

In Teil 2 dieser Lernprogrammreihe, Verwalten von App-Lebenszyklus und -Zustand, haben Sie gelernt, wie der App-Zustand gespeichert und wiederhergestellt wird. Da Sie der App eine neue Seite hinzugefügt haben, müssen Sie nun auch den Zustand der neuen Seite speichern und laden. Für die Fotoseite muss nur die momentan angezeigte Bilddatei gespeichert und wiederhergestellt werden.

Sie können jedoch nicht einfach den Pfad in der Datei speichern und die Datei dann mithilfe dieses Pfads erneut öffnen. Wenn ein Benutzer eine Datei per FileOpenPicker auswählt, erteilt er der App implizit die Berechtigung für die jeweilige Datei. Wenn Sie später versuchen, die Datei nur über den Pfad abzurufen, wird die Berechtigung verweigert.

Um den Zugriff auf die Datei zur späteren Verwendung beizubehalten, beinhaltet die StorageApplicationPermissions-Klasse stattdessen zwei Listen, in denen Sie die Datei speichern können, und die zugehörigen Berechtigungen, die erteilt wurden, als der Benutzer die Datei über die Dateiauswahl geöffnet hat.

  • MostRecentlyUsedList – Wird zum Speichern der letzten 25 Dateien verwendet, auf die zugegriffen wurde.
  • FutureAccessList – Wird zum allgemeinen Speichern von bis zu 1000 Dateien für den künftigen Zugriff verwendet.
Sie benötigen lediglich Zugriff auf die letzte Datei, die der Benutzer ausgewählt hat, damit Sie sie zum Wiederherstellen des Seitenzustands verwenden können. Dazu eignet sich das MostRecentlyUsedList-Steuerelement.

Wenn ein Benutzer eine Datei auswählt, fügen Sie sie der MostRecentlyUsedList hinzu. Wenn Sie dieser Liste eine Datei hinzufügen, gibt das MostRecentlyUsedList-Steuerelement ein Token zurück, mit dessen Hilfe Sie die Datei später abrufen können. Sie speichern dieses Token im pageState-Wörterbuch und verwenden es zum Abrufen der aktuellen Bilddatei, wenn Sie den Seitenzustand wiederherstellen.

JJ655411.wedge(de-de,WIN.10).gifSo speichern Sie den Zustand

  1. Doppelklicken Sie im Projektmappen-Explorer auf die Datei PhotoPage.xaml.cs/vb, um sie zu öffnen.
  2. Fügen Sie oben in der PhotoPage-Klasse diesen Code hinzu. Der Code deklariert eine Variable zum Speichern des vom MostRecentlyUsedList-Steuerelement zurückgegebenen Tokens.
    
    Private mruToken As String = Nothing
    
    

    Hier sehen den Code mit dem umgebenden Code.

    
    Public NotInheritable Class PhotoPage
        Inherits Page
    
        Private mruToken As String = Nothing
    
        ''' <summary>
    ...
    
    
  3. Fügen Sie im GetPhotoButton_Click-Ereignishandler diesen Code hinzu: Mithilfe des Codes werden die ausgewählte Datei der MostRecentlyUsedList hinzugefügt und das Token abgerufen.
    
    ' Add picked file to MostRecentlyUsedList.
    mruToken = Windows.Storage.AccessCache.StorageApplicationPermissions.MostRecentlyUsedList.Add(file)
    
    

    Hier ist der Code mit dem umgebenden Code.

    
    ' file is null if user cancels the file picker.
    If file IsNot Nothing Then
    
        ' Open a stream for the selected file.
        Dim fileStream = Await file.OpenAsync(Windows.Storage.FileAccessMode.Read)
    
        ' Set the image source to the selected bitmap.
        Dim BitmapImage = New Windows.UI.Xaml.Media.Imaging.BitmapImage()
    
        BitmapImage.SetSource(fileStream)
        displayImage.Source = BitmapImage
        Me.DataContext = file
    
        ' Add picked file to MostRecentlyUsedList.
        mruToken = Windows.Storage.AccessCache.StorageApplicationPermissions.MostRecentlyUsedList.Add(file)
    End If
    
    
  4. Fügen Sie in der navigationHelper_SaveState-Methode diesen Code hinzu: Der Code überprüft, ob das Token vorhanden ist, und speichert es im PageState-Wörterbuch, wenn dies der Fall ist.
    
            If Not String.IsNullOrEmpty(mruToken) Then
                e.PageState("mruToken") = mruToken
            End If
    
    

    Hier sehen Sie den vollständigen Code für die navigationHelper_SaveState-Methode.

    
    Private Sub NavigationHelper_SaveState(sender As Object, e As Common.SaveStateEventArgs)
        If Not String.IsNullOrEmpty(mruToken) Then
            e.PageState("mruToken") = mruToken
        End If
    End Sub
    
    

JJ655411.wedge(de-de,WIN.10).gifSo laden Sie den Zustand

  1. Fügen Sie in PhotoPage.xaml.cs/vb der navigationHelper_LoadState-Methodensignatur das async-Schlüsselwort hinzu.
    
    Private Async Sub NavigationHelper_LoadState(sender As Object, e As Common.LoadStateEventArgs)
    
    End Sub
    
    
  2. Fügen Sie diesen Code in der navigationHelper_LoadState-Methode hinzu.

    Hier rufen Sie das Token aus dem PageState-Wörterbuch ab. Sie verwenden das Token zum Abrufen der Datei aus der MostRecentlyUsedList und zum Wiederherstellen des UI-Zustands.

    
            If e.PageState IsNot Nothing AndAlso e.PageState.ContainsKey("mruToken") Then
                Dim value As Object = Nothing
                If e.PageState.TryGetValue("mruToken", value) Then
    
                    If (value IsNot Nothing) Then
                        mruToken = value.ToString()
    
                        ' Open the file via the token that you stored when adding this file into the MRU list.
                        Dim file =
                            Await Windows.Storage.AccessCache.StorageApplicationPermissions.MostRecentlyUsedList.GetFileAsync(mruToken)
    
                        If (file IsNot Nothing) Then
                            ' Open a stream for the selected file.
                            Dim fileStream = Await file.OpenAsync(Windows.Storage.FileAccessMode.Read)
    
                            ' Set the image source to a bitmap.
                            Dim BitmapImage = New Windows.UI.Xaml.Media.Imaging.BitmapImage()
    
                            BitmapImage.SetSource(fileStream)
                            displayImage.Source = BitmapImage
    
                            ' Set the data context for the page.
                            Me.DataContext = file
                        End If
                    End If
                End If
            End If
    
    
  3. Drücken Sie F5, um die App zu erstellen und auszuführen. Navigieren Sie zur Fotoseite, und klicken Sie auf die Schaltfläche "Get photo", um die FileOpenPicker zu starten und eine Datei auszuwählen. Nun wird das Bild neu geladen, wenn die App angehalten, beendet und wiederhergestellt wird.

    Hinweis  Schlagen Sie unter Teil 2: Verwalten von App-Lebenszyklus und -zustand nach, um Anweisungen zum Anhalten, Beenden und Wiederherstellen einer App zu erhalten.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das vierte Lernprogramm vollständig durchgearbeitet! Sie haben gelernt, wie Sie die Dateiauswahl und Datenbindung in einer Windows Store-App verwenden.

Siehe Code

Kommen Sie nicht voran, oder möchten Sie Ihre Arbeit überprüfen? Informationen finden Sie unter Teil 4: Vollständiger Code.

 

 

Anzeigen:
© 2014 Microsoft