自定義視圖層次結構的語義縮放，而不是普通的網格或列表視圖

Question

我有一個xaml中的頁面佈局，其中包含一個表示不同內容和個別樣式的幾個gridviews的網格。

這是我的應用程序的中心，它提供了這些不同的內容，例如： 藝術家，表演，記錄，但內容有所不同但內容不同。 （完全不同的項目模板和每個分組樣式）

我想實現一個語義縮放，一旦縮小應顯示自定義組。所以它應該在縮小時顯示藝術家，表演和錄音。

不幸的是我只能在ZoomedIn/Out標籤中放置單個GridView或ListView。

有誰知道如何解決這個問題或可以提供一個堅實的解決方案？

Answer 1

我提出了一個解決方案，它的工作原理，但它還相當笨拙。 （我沒有足夠的時間深入研究它。） 我真的很感激它，如果有人會建議一個適當的（可重用，真正面向對象:-)等）解決方案。

您必須在新類中實現接口的新接口。

我沒有找到關於界面如何工作的非常詳細的描述，所以我不得不嘗試很多。我的問題是，當您點擊zoomedOutView中的一個圖塊時，需要一個scrollViewer才能跳轉到放大視圖中的某個點。我無法從scrollViewer類繼承。可能你需要子類化一個GridView的子類，它有一個scrollViewer作爲子元素（如果這是可能的話）。在我的解決方案中（假設錯誤），它有一個scrollViewer子。另一個問題是，如果你捏，MakeVisible方法被調用，item.Bounds.Left將爲0.5（在這種情況下，你不想在任何地方的zoomedIn視圖中滾動），但如果你點擊一個元素放在zoomedOut視圖中，您必須在代碼中設置此值，在這種情況下，您需要在MakeVisible方法中滾動scrollViewer。

如：

public class GridWithSemanticZoomInformation : Grid , ISemanticZoomInformation 
{ 
    private SemanticZoom _semanticZoomOwner; 
    private Boolean _IsZoomedInView; 
    private Boolean _IsActiveView; 

    public void CompleteViewChange() 
    { 
     // 
    } 

    public void CompleteViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination) 
    { 
     this.IsActiveView = false; 
    } 

    public void CompleteViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination) 
    { 
     this.IsActiveView = true; 

    } 

    public void InitializeViewChange() 
    { 
     // 
    } 

    public bool IsActiveView 
    { 
     get 
     { 
      return this._IsActiveView; 
     } 
     set 
     { 
      this._IsActiveView = value; 
     } 
    } 

    public bool IsZoomedInView 
    { 
     get 
     { 
      return this._IsZoomedInView; 
     } 
     set 
     { 
      this._IsZoomedInView = value; 
     } 
    } 

    public void MakeVisible(SemanticZoomLocation item) 
    { 
     this.SemanticZoomOwner.IsZoomedInViewActive = (this.Equals(this.SemanticZoomOwner.ZoomedInView)); 

     if (item.Bounds.Left != 0.5) 
     { 
      if (this.Children.Count() == 1) 
      { 
       foreach (UIElement element in this.Children) 
       { 
        if (element.GetType() == typeof(ScrollViewer)) 
        { 
         ((ScrollViewer)element).ScrollToHorizontalOffset(item.Bounds.Left); 
        } 
       } 
      } 
     } 
    } 

    public SemanticZoom SemanticZoomOwner 
    { 
     get 
     { 
      return this._semanticZoomOwner; 
     } 
     set 
     { 
      this._semanticZoomOwner = value; 
     } 
    } 

    public void StartViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination) 
    { 
     // 
    } 

    public void StartViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination) 
    { 
     // 
    } 
} 

我寫了一些笨拙的事件處理程序的情況下，當你在縮小視圖中的項目挖掘，以及： 私人無效FirstButton_Tapped（對象發件人，TappedRoutedEventArgs E） { this.ZoomedOutGrid.SemanticZoomOwner.ToggleActiveView（）;

SemanticZoomLocation moveTo = new SemanticZoomLocation(); 
    moveTo.Bounds = new Rect(0, 0, 0, 0); 

    this.ZoomedOutGrid.InitializeViewChange(); 
    this.ZoomedInGrid.InitializeViewChange(); 
    this.ZoomedOutGrid.StartViewChangeFrom(new SemanticZoomLocation(), new SemanticZoomLocation()); 
    this.ZoomedInGrid.StartViewChangeTo(new SemanticZoomLocation(), moveTo); 

    this.ZoomedInGrid.MakeVisible(moveTo); 
    this.ZoomedOutGrid.CompleteViewChangeFrom(new SemanticZoomLocation(), new SemanticZoomLocation()); 
    this.ZoomedInGrid.CompleteViewChangeTo(new SemanticZoomLocation(), new SemanticZoomLocation()); 
    this.ZoomedOutGrid.CompleteViewChange(); 
    this.ZoomedInGrid.CompleteViewChange(); 
} 

private void SecondButton_Tapped(object sender, TappedRoutedEventArgs e) 
{ 
    SemanticZoomLocation moveTo = new SemanticZoomLocation(); 
    moveTo.Bounds = new Rect(270, 0, 0, 0); 
    this.ZoomedOutGrid.InitializeViewChange(); 
    this.ZoomedInGrid.InitializeViewChange(); 
    this.ZoomedOutGrid.StartViewChangeFrom(new SemanticZoomLocation(), new SemanticZoomLocation()); 
    this.ZoomedInGrid.StartViewChangeTo(new SemanticZoomLocation(), moveTo); 

    this.ZoomedInGrid.MakeVisible(moveTo); 
    this.ZoomedOutGrid.CompleteViewChangeFrom(new SemanticZoomLocation(), new SemanticZoomLocation()); 
    this.ZoomedInGrid.CompleteViewChangeTo(new SemanticZoomLocation(), moveTo); 
    this.ZoomedOutGrid.CompleteViewChange(); 
    this.ZoomedInGrid.CompleteViewChange(); 
}