Live-Tile per Code erstellen

[Robby Light]

Hey Developers,

hat sich jemand von euch schon einmal damit auseinander gesetzt ein Tile per Code auf dem Phone selber zu erstellen. Gerade mit der Möglichkeit in Mango ohne Push zu updaten wird das doch interessant.

Da die möglichkeiten der Bildbearbeitung auf dem Phonje ja leider sehr begranzt sind, wollte ich fragen, ob jemand von euch schon einmal solch ein Bild per code erstellt hat.
Ich bräuchte lediglich ein 173x173 großes PNG mit nem Bildchen links und ner Zahl rechts.

Das muss doch gehen, oder?

[yjeanrenaud]

gemacht noch nicht, aber du wirst wohl ImageBrush oder ähnliches verwenden.

[StevieBallz]

Ich habe mir jetzt das API noch nicht angesehen mit dem sich die Live-Tiles setzen lassen, schätze aber, dass du eine ImageSource brauchst. Man nimmt also eine WritableBitmap und rendert in diese UIElemente hinein.

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) {
      base.OnNavigatedTo(e);

      TextBlock txb = new TextBlock();
      txb.Text = "Hello there";
      txb.Foreground = new SolidColorBrush(Colors.Green);

      Rectangle rect = new Rectangle();
      rect.Height = 150;
      rect.Width = 150;
      rect.Fill = new SolidColorBrush(Colors.White);

      System.Windows.Media.Imaging.WriteableBitmap bmp = new System.Windows.Media.Imaging.WriteableBitmap(173, 173);
      Transform trans = new TranslateTransform();
      bmp.Render(rect, trans);
      bmp.Render(txb, trans);

      bmp.Invalidate();

      ImageBrush brush = new ImageBrush();
      brush.ImageSource = bmp;
      rectangle1.Fill = brush;
    }

Die Methode hier erstellt auf diese Weise ein Bild mit 173x173, erstellt ein weißes Rechteck 150x150 darin und schreibt noch Text hinein. Das ganze hab ich in meiner Demo-App dann als Bild in ein Rectangle gemalt um es mal anzusehen. Hoffe das hilft dir weiter.

[Robby Light]

Hey super, ich denke damit komme ich erstmal ein gutes Stück weiter. Ich muss dem Tile aber zwangsläufig eine URI übergeben. Weißt du auch, wie ich den ImageBrush dann jetzt als Datei (PNG) speichere?
Vielen Dank schon einmal!

[StevieBallz]

Wenn dann speicherst du nicht den Brush sondern das WritableBitmap.

Hab das jetzt nur mal gegooglet, siehe hier für das Ergebnis: da werden einfach die Rohdaten weggespeichert als BMP. Gibt aber scheinbar Helper-Klassen, die schon Leute geschrieben haben - lies es dir einfach mal durch, hoffe es hilft:

http://stackoverflow.com/questions/3...-local-storage

[Robby Light]

Ja, soweit war ich schon, nur wie kann ich es jetzt meinem Live Tile als Background übergeben? Das will nämlich zwangsläufig eine URI dafür haben -.-
Geht das überhaupt?

[StevieBallz]

Hmm... verzwickte Situation, ich hab gerade nachgelesen im Dev-Forum von Microsoft wo wer dasselbe Problem hat. Scheinbar geht es nicht, dass man eine URI auf ein File im IsolatedStorage mitgibt. Damit hilft dann auch das Zeichnen des Bitmaps einem nicht weiter

Hier wäre der entsprechender Link zur Quelle: http://forums.create.msdn.com/forums...77/508962.aspx

[yjeanrenaud]

doch, das geht:
http://mark.mymonster.nl/2010/12/19/...ltileschedule/
du musst nur diese SentTile-Funktion und die angepasste Update-Funktion nehmen, die im Grunde nichts anderes tut, als einen HTTP-Channel zu öffnen und das Tile xml-Konform zu übermitteln. dirty but working

[StevieBallz]

Ok, wenn ich das richtig verstehe funktioniert das also so, dass ich zuerst hergehe und mich für Tile-Notifications registriere. Dann ein XML bastle in das ich die Rohdaten des Bildes reinschreibe (als BMP weil PNG encoden kann ich es ja nicht wirklich). Jetzt schicke ich das XML an Microsofts Notification-Server der mir dann die Tile updated und dann deregistriere ich mich wieder *brrr* Das is mehr als dirty

Also das Design dieses APIs haben die Jungs bei Microsoft echt verbockt

[Robby Light]

Mh, das gefällt mir eigentlich garnicht, aber wenns der einige Weg ist...
Ich dachte eigentlich ich könnte jetzt mit Mango auf den Umweg über Push verzichten...
Ich nehme nacher nochmal Kontakt zu nem Developer bei MS auf, ich kenn da wen.

Danke trotzdem erstmal für deine Mühe, wenns nen schöneren Weg gibt, werde ich berichten.

[StevieBallz]

Es bringt auch nichts - hätte mich jetzt dran gesetzt den ganzen Hack in eine einzelne Methode zu verpacken und bin draufgekommen, dass der Link bzgl. Push-Service auch letzten Endes nur die URI setzen kann - sprich das Telefon holt sich das Bild immer von einer URI und ist dabei auf 80 kb beschränkt.

Was du natürlich machen kannst, ist dass du das Bild an sich identisch belässt oder halt eine gewisse (beschränkte Anzahl an Bildern hast) und dann über das Count Property der StandardTileData eben die anzuzeigende Zahl mitgibst.

Sonst bliebe soweit ich das aktuell sehe nur das Bild extern zu generieren und die URI dorthin dann mitzugeben.

[yjeanrenaud]

hmpf, natürlich, man kann das bild ja auch ganz einfach per php generieren:

<?
$img = imagecreatetruecolor(173,173); 
$schriftfarbe = imagecolorallocate($img,0,103,0);
$hintergrund = imagecolorallocate($img,239,239,239);
imagefill($img,0,0,$hintergrund); 
imagestring($img, 3, 2, 0, $_GET['str'], $schriftfarbe); 
header("Content-type: image/png");
imagepng($img); 
imagedestroy($img); 
?>

damit bekommst du ein png. kannst sogar einfach die uri benutzen, um den string anzugeben, indem du beispiel.php?str=bla aufrufst. kannst auch noch viel mehr paramter übergeben

[StevieBallz]

Soweit is es mir schon klar - die Sache ist ja die, dass man ja jetzt mit Mango die Tiles ändern kann ohne einen Server dafür zu brauchen (und eine Datenverbindung). Für Bilder brauche ich aber einen und das ist ja was wir vermeiden wollten und ich find das eben leider etwas schwach, dass es da so überhaupt keine Möglichkeit gibt.

Na ja, evtl. im nächsten großen Update

[yjeanrenaud]

Mango ist ja noch nicht 100% fertig

[StevieBallz]

Ja, ich hab mein Leid mal im UserVoice geklagt und BrandonWatson angetweetet - evtl. bringts ja was.

[Robby Light]

Ich hab gerade herausgefunden, dass mal mit einer URI auch in den Isolated Storage verweisen kann.

Uri("isostore:/" + filePath, UriKind.Absolute);

Mann muss halt isostore: davor schreiben.
Mal sehen, was sich damit basteln lässt.

[StevieBallz]

Wenn das funktioniert ist der Rest kein Problem. Du renderst in die WritableBitmap, speicherst die als JPEG in den IsolatedStorage (da gibts unter System.Windows.Media irgendwo nen Encoder (oder wars Microsoft.Media - irgendwas mit Media jedenfalls) und gibst die URI dann mit und gilt.

Sehr schön

[Robby Light]

Mh, es scheint als ginge das auch nicht so ganz. Ich habe jetzt ein Bild erstellt, das ich gerne als LiveTile Hintergrund verwenden möchte und dies in den IsolatedStorage gelegt.

Meine Uri, die ich dem Tile übergebe zeit jetzt auch auf das Bild, nur das Tile scheint es nicht zu mögen und gibt mir diese seltsame NotSupportedException:


Der Code in dem ich das Bild erstelle und übergebe dürfte korrekt sein, ich gebe ihn euch aber trotzdem mal mit auf den Weg:

private Uri createTileBackground(myDate md)
        {
            // Text
            TextBlock txb = new TextBlock();
            txb.Text = md.name;
            txb.Foreground = new SolidColorBrush(Colors.White);
            txb.FontSize = 15;
            txb.Padding = new Thickness(5, 150, 0, 0);

            // Date
            TextBlock txb2 = new TextBlock();
            txb2.Text = md.date.ToString("dd. MMMM yyyy");
            txb2.Foreground = new SolidColorBrush(Colors.White);
            txb2.FontSize = 20;
            txb2.Padding = new Thickness(5, 125, 0, 0);

            // Value
            TextBlock txb3 = new TextBlock();
            txb3.Text = md.tbDays.Text;
            txb3.Width = 173;
            txb3.TextAlignment = TextAlignment.Center;
            txb3.Foreground = new SolidColorBrush(Colors.White);
            txb3.FontSize = 60;
            txb3.Padding = new Thickness(0, 50, 0, 0);

            Rectangle rect = new Rectangle();
            rect.Height = 173;
            rect.Width = 173;
            rect.Fill = (SolidColorBrush)Resources["PhoneAccentBrush"];

            Image myImage = new Image();
            myImage.Source = new BitmapImage(new Uri("/Background.png", UriKind.RelativeOrAbsolute));

            System.Windows.Media.Imaging.WriteableBitmap bmp = new System.Windows.Media.Imaging.WriteableBitmap(173, 173);
            Transform trans = new TranslateTransform();
            bmp.Render(rect, trans);
            bmp.Render(myImage, trans);
            bmp.Render(txb3, trans);
            bmp.Render(txb2, trans);
            bmp.Render(txb, trans);
            bmp.Invalidate();

            using (var isoStore = IsolatedStorageFile.GetUserStoreForApplication()) 
            {
                using (var isoFileStream = isoStore.CreateFile("img" + md.tileId + ".jpg")) 
                { 
                    Extensions.SaveJpeg(bmp, isoFileStream, 173, 173, 0, 100); 
                } 
            }

            return new Uri("isostore:/" + "img" + md.tileId + ".jpg", UriKind.Absolute);
        }

Mache ich etwas falsch, oder geht es wirklich nicht?
Es kann doch nicht sein, dass ich immer auf Push angewiesen sind. Es amcht in meinem Projekt nämlich überhaupt keinen Sinn diesen Umweg zu gehen, da alle Daten lokal vorhanden sind.

Schaut doch bitte mal drüber, vielleicht findet ihr ja nen Dummen Fehler, den ich nicht sehe. Danke.

[Robby Light]

Ha, ich hab's gefunden. Bzw. ein Kollege von mir hat die Lösung hier gefunden.
Es sieht tatsächlich so aus, als müsste das Bild dann in einem ganz bestimmten Ordner im Isolated Strorage liegen.
Dann geht's!

tileData.BackgroundImage = new Uri("isostore:/Shared/ShellContent/here.png", UriKind.Absolute)

Puh, was für eine schwere Geburt...