Bilder in Windows 8 METRO Styled Apps

Wenn man in Windows 8 Tiles oder Popups Bilder anzeigen möchte stellen sich mehrere Fragen. Zunächst das Format. Möglich ist png und jpg (auch jpeg).  Auch Transparenz in PNG funktioniert.

Typischerweise wird ein Bild in das APPX Paket eingepackt und damit in die Visual Studio 11 Solution. In Silverlight Anwendungen war das eher verpönt, weil der Download eine Rolle gespielt hat.Bei WinRT wird die Anwendung ohnehin dauerhaft installiert und damit das oder die Images.

image

Der Eigenschaftsdialog muss dann das Bild als Content zeigen.

Dann lässt sich im Image Source Attribut über die neuen Protokoll Spezifikationen ms-appx auf das Bild verweisen. In diesem Fall liegt das Bild im Unterverzeichnis Images.

<Image HorizontalAlignment="Left" Height="100" Margin="36,39,0,0" 
VerticalAlignment="Top"
Width="347" Source="ms-appx:///Images/ppedv.jpg"/>

Wenn Bild Link fehlerhaft ist erscheint keine Fehlermeldung.

Die zweite Möglichkeit ist,  das Bild lokal auf der Festplatte in den Settings der Anwendung zu speichern (oder Roaming, dazu aber wann anders mehr).  Der folgende Code liest das Verzeichnis aus.

 Dim localSettings As Windows.Storage.ApplicationDataContainer = 
Windows.Storage.ApplicationData.Current.LocalSettings
Dim localFolder As Windows.Storage.StorageFolder =
Windows.Storage.ApplicationData.Current.LocalFolder Textbox1.Text = localFolder.Path

Am Ende kommt ein bekannter Pfad raus, der den Namen des Pakets aus den Visual Studio appx Manifest enthält plus einen Salt Wert.

C:\Users\pre\AppData\Local\Packages\BUILD.588a3b42-fdba-460e-8a17-f527a66ad183_89gf582k2a27c\LocalState

Ich habe eine Grafik Datei per Hand dort hin kopiert. Referenziert wird diese mit einer weiteren WinRT Protokoll Spezifikation mx-appdata und dem fixen Zusatz local.

 <Image HorizontalAlignment="Left"  
   VerticalAlignment="Top"  
Source="ms-appdata:///local/windows.png"/>

Natürlich kann man das Bild auch aus dem Web laden mit dem HTTP Protokoll.

Entgegen meiner Erwartungen wird das Bild auch gecacht. Konkret per Etag und 304 Meldung, so das die Anwendung dauerhaft dasselbe  Bild nicht.

  <Image HorizontalAlignment="Left"  
     VerticalAlignment="Top"  
Source="http://www.firmenpresse.de/adpics/76898.jpg?id=2212"/>

 

Das Caching lässt sich nicht beeinflussen Abhilfe schafft ein alter Trick mit einem angehängten wechselnden  Querystring.

Jump Start Training: JavaScript, HTML und CSS

Month List