自定义视图层次结构的语义缩放，而不是普通的网格或列表视图

Question

我在 xaml 中有一个页面布局，其中包含一个网格，其中包含多个代表不同内容和个人样式的网格视图。

这是我的应用程序的中心，它展示了这些不同的内容，例如： 艺术家、表演、唱片在某种程度上相关但内容不同，因此表现不同。 （每个项目模板和分组样式完全不同）

我想实现一个语义缩放，一旦缩小应该显示我拥有的定制组。所以它应该在缩小时将艺术家、表演、录音分组显示。

不幸的是，我只能在 ZoomedIn/Out 标签中放置一个 GridView 或 ListView。

有谁知道如何解决这个问题或可以提供可靠的解决方案？

Answer 1

我犯规了一个解决方案，它有效，但它相当笨拙。 （我没有足够的时间深入研究它。） 如果有人建议一个合适的（可重用的，真正面向对象的 :-) 等）解决方案，我将不胜感激。

您必须在新类中实现ISemanticZoomInformation接口。

我没有找到关于界面如何工作的真正详细的描述，所以我不得不尝试了很多。我的问题是，当您点击 zoomedOutView 中的图块时，需要一个 scrollViewer 才能跳转到 zoomedIn 视图中的某个点。我不能从 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)
    {
        //
    }
}

我为案例编写了一些笨拙的事件处理程序，当您也点击 zoomedOut 视图中的项目时：

private void FirstButton_Tapped(object sender, 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();
}