Silverlight 4 Teil 4: DropTarget mit Silverlight: Bilder in die RichTextArea einfügen

Von Mario Meir-Huber Autor Feed 11. January 2010 14:00

Eine weitere Neuerung ist DropTarget für Silverlight 4. Dies erlaubt es, Dateien vom lokalem System einfach per Drag&Drop in die Silverlight-Applikation einzufügen. Dieses Post setzt auf die vorherigen Postings zur RichTextArea auf. Damit Silverlight Drop unterstützt, muss ein Element ausgewählt werden welches dies verwenden soll. In unserem Fall ist dies die RichTextArea. Hierfür muss ein EventHandler für das “Drop”-Event eingefügt werden. Ferner muss auch “AllowDrop” auf “True” gesetzt werden. 

        <RichTextArea Name="TextArea" Grid.Row="1"
                      MouseRightButtonDown="TextArea_MouseRightButtonDown"
                      MouseRightButtonUp="TextArea_MouseRightButtonUp"
                      Drop="TextArea_Drop" AllowDrop="True">
            
        </RichTextArea>

Unser Beispiel soll jedoch nur Bilder unterstützten. Hierfür “basteln” wir uns eine einfache Funktion, welche “IsImage” lautet und eine Datei darauf überprüft ob es sich tatsächlich um ein Bild handelt.

private bool IsImage(FileInfo file)
{
    string ext = file.Extension.ToLower();

    string[] extensions = 
    {
        ".bmp",
        ".jpg",
        ".jpeg",
        ".gif",
        ".png"
    };

    return extensions.Contains(ext);
}

Nun können wir uns auch schon an den EventHandler machen. Dieser hat das “Drop”-Event. Neue Bilder sollen als neuer Paragraph in unsere RichTextArea eingefügt werden.

Will man neue Elemente in die RichTextArea einfügen so muss man diese in einen InlineUIContainer einfügen. Dieser erlaubt alle UI-Elemente in einer RichTextArea (so zum Beispiel auch Buttons, ComboBoxen, WebBrowser, …)

In den DragEventArgs befinden sich nun unsere Dateien. Diese können über das IDataObject angesprochen werden. Mit der Funktion “GetData” auf das IDataObject können wir die Dateien abfragen. Diese sind vom Typ “FileInfo[]”.

private void TextArea_Drop(object sender, DragEventArgs e)
 {
     if (e.Data == null) return;
     
     Paragraph para;
     InlineUIContainer container;
     Image img;
     BitmapImage source;

     IDataObject obj = e.Data as IDataObject;

     if(obj != null)
     {
         FileInfo[] files = obj.GetData(System.Windows.DataFormats.FileDrop) as FileInfo[];

Nun ist es auch schon möglich, über sämtliche Dateien zu iterieren. Wenn es sich nun um ein Bild handelt wird der Stream geöffnet und in einen neuen Paragrafen eingefügt.

Wichtig ist hierbei die Reihenfolge, wie eingefügt wird:

  1. BitmapImage erstellen
  2. Source für das BitmapImage setzen
  3. Paragraph, InlineUIContainer und Image erstellen
  4. Image den Source (Bild, welches in 1 und 2 erstellt wurde) hinzufügen
  5. InlineUIContainer dem Paragrafen hinzufügen
  6. Paragrafen der RichTextArea hinzufügen
  7. Bild dem InlineUIContainer hinzufügen

Wichtig ist hier, das der Paragraf mit dem InlineUIContainer zuerst der RichTextArea hinzu gefügt wird. ERST DANACH DÜRFEN ELEMENT IN DEN INLINEUICONTAINER eingefügt werden. Wenn man dies nicht so macht, gibt es ne tolle Exception ;) Dies ist übrigens bei allen Elementen so, welche den InlineUIContainer eingefügt werden. Vermutlich ist dies derzeit noch ein Beta-Bug.

foreach (FileInfo file in files)
{
    if (IsImage(file))
    {
        using(FileStream fs = file.OpenRead())
        {
            source = new BitmapImage();
            source.SetSource(fs);

            para = new Paragraph();
            container = new InlineUIContainer();
            img = new Image();

            img.Source = source;
            
            para.Inlines.Add(container);

            TextArea.Blocks.Add(para);

            //beta bug!!!
            container.Child = img;
       }
    }
}

Das Bild unten erinnert mich an vergangenem Sommer … baden im angenehmen Pool zuhause … macht wirklich Sehnsucht bei diesen Temperaturen ;)

image

Bei dieser Gelegenheit möchte ich auch auf den WPF/Silverlight Community Day hinweisen, welcher am 29. Jänner in Graz statt finden wird. Hier werden die Silverlight 4 Neuerungen nochmal beleuchtet.

Mario Meir-Huber

www.meirhuber.de

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

www.microsoft.com/austria | © 2009 Microsoft Corporation. Alle Rechte vorbehalten.
BlogEngine.NET 2.5.0.6 powered by atwork