2010-07-26 15 views

Odpowiedz

5

Jest to zdecydowanie wykonalne. Zrobiłem coś podobnego i zadziałało świetnie. W poniższym przykładzie zostaną wyświetlone informacje dotyczące klikniętego obrazu. Możesz go modyfikować w zależności od tego, czy chcesz, aby informacje były wypychane po najechaniu myszą, kliknięciu, a nawet powiększeniu. To zależy wyłącznie od Ciebie.

Po pierwsze, dodać MultiScaleImage na płótnie ...

<MultiScaleImage x:Name="deepZoomObject" Source="/GeneratedImages/dzc_output.xml" /> 

... i gdzieś indziej na płótnie, dodać TextBlock być używany do wyświetlania informacji:

<TextBlock X:Name="tbInfo" /> 

Następnie utwórz klasę do przechowywania informacji o każdym "kafelku", dodaj kilka obojętnych informacji i dodaj kilka kafelków do listy:

public class TileDetail { 
     public int Index { get; set; } 
     public string TileName { get; set; } 
    } 
    //The Index is the zero based index of the images. It depends on the index created by DeepZoomComposer. This is the one piece of information that you absolutely need to know. I believe the index is based on the order that the images are added to DeepZoomComposer but test to make sure. 

    List<TileDetail> TileDetailsList = new List<TileDetail>(); 

    TitleDetail td1 = new TileDetail(); 
    td1.Index = 0; 
    td1.TileName = "Tile #1"; 

    TileDetailsList.Add(td1); 

    TitleDetail td21 = new TileDetail(); 
    td2.Index = 1; 
    td2.TileName = "Tile #2"; 

    TileDetailsList.Add(td2); 

    //Repeat the above for your remaining tiles always incrementing the Index. If you're loading information from a DB then you'll need to make sure to have a way to connect the image to its index from DeepZoomComposer. 

Teraz, gdy lista jest pełna informacji o kafelkach, musimy podłączyć obsługę zdarzenia MouseLeftButtonDown, aby wykryć kliknięcie obrazu i ostatecznie określić indeks klikniętego obrazu. Przy pomocy indeksu musimy przeszukać naszą listę tylko dla odpowiednich szczegółów płytek, a następnie wyświetlić na płótnie.

W kodzie z opóźnieniem, należy umieścić następujące:

deepZoomObject.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e) 
    { 
     //Get the index of the image 
     int index = GetIndexOfSubImage(e.GetPosition(deepZoomObject)); 
     //Find the image in the list of images 
     TileDetail td = TileDetailsList.FirstOrDefault(t => t.Index == index); 
     //Display image info 
     tbInfo.Text = td.TileName; 
    }; 

Poniżej znajduje się „tajne sos”. Znajdzie indeks klikniętego obrazu.

private int GetIndexOfSubImage(Point point) 
    { 
     // Test each subimage to find the image where the mouse is within 
     for (int i = deepZoomObject.SubImages.Count - 1; i >= 0; i--) 
     { 
     MultiScaleSubImage image = deepZoomObject.SubImages[i]; 
     double width = deepZoomObject.ActualWidth/(deepZoomObject.ViewportWidth * image.ViewportWidth); 
     double height = deepZoomObject.ActualWidth/(deepZoomObject.ViewportWidth * image.ViewportWidth * image.AspectRatio); 

     Point pos = deepZoomObject.LogicalToElementPoint(new Point(image.ViewportOrigin.X/image.ViewportWidth, -image.ViewportOrigin.Y/image.ViewportWidth)); 
     Rect rect = new Rect(pos.X, pos.Y, width, height); 

     if (rect.Contains(point)) 
     { 
      // Return the image index 
      return i; 
     } 
     }  
     return -1; //if there is no corresponding subimage 
    } 

I to wszystko. Tak długo, jak indeksy obrazów zawierają odpowiedni obraz na liście, kliknięcie obrazu wewnątrz obiektu MultiScaleImage spowoduje wyświetlenie informacji o obrazie.

+0

Czy możesz opublikować działający kod, aby spróbować? Próbowałem go wdrożyć, ale MouseLeftButtonDown nie jest wyzwalany. Dziękujemy – xscape

+0

Gdzie umieściłeś kod wiążący zdarzenie MouseLeftButtonDown? –

+0

i wiążę go w MultiScaleImage – xscape

1

Wydaje się jakby jej nie prosty DeepZoom. To, czego użyli w projekcie, o którym właśnie wspomniałeś, to MS Live Lab Pivot Control silverlight. http://www.getpivot.com/. Ta strona ma dobre samouczki, które zaczynają się od Pivot i jest bardzo prosta w tworzeniu kolekcji.

Pozdrawiam.

+0

Przeczytałem też o tym, ale zgodnie z tym blogiem http://projectsilverlight.blogspot.com/2008/03/dissecting-hard-rock-memorabilia-and.html nie określa się, że używa on pivot – xscape

+0

prawo .. ale myślę, że twoje wymaganie może być wykonane za pomocą pivota ... potrzebujesz czegoś innego, o czym nie wspomniałeś w swoim pytaniu? –

0

Vertigo, firma, która utworzyła przykład Hardrock Cafe Memrobilia, wydała swój kod źródłowy do CodePlex. Sprawdź tutaj: http://bigpicture.codeplex.com/

  • Aby uprościć zbyt wiele, trzeba słuchać mouse movements nad MultiScaleImage.

  • Przy każdym ruchu myszy należy wykonać iterację ponad MultiScaleImage kolekcji podobrazów i sprawdzić, który z nich znajduje się pod wskaźnikiem myszy.

  • Aby zidentyfikować różne obrazy, każdy obraz w DeepZoom kolekcji powinny mieć unique identifier - na przykład w DeepZoomComposer można dodać wartość tag do każdego obrazu. Na podstawie tego znacznika można znaleźć odpowiedni tekst informacyjny, który będzie wyświetlany użytkownikowi z innego pliku XML, na przykład.

+0

Czy możesz wysłać przykładowy kod do swojego bulletu # 3? Dziękuję – xscape

+0

Próbowałem zaimplementować powyższy kod, a "Index", który zawsze zwraca, wynosi -1. Nigdy nie wydaje się, aby pobrać poprawny indeks. Nie jestem pewien, co robię źle. –

Powiązane problemy