c# - 自定义 View 层次结构的语义缩放，而不是普通的网格或 ListView

Question

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

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

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

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

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

Answer 1

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

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

我没有找到关于界面如何工作的真正详细的描述，所以我不得不尝试很多次。我的问题是，当您点击 zoomedOutView 中的图 block 时，需要一个 scrollViewer 才能跳转到 zoomedIn View 中的某个点。我不能从 scrollViewer 类继承。可能您需要子类化 GridView 的子类，该子类有一个 scrollViewer 作为子类(如果可能的话)。在我的解决方案中(非常错误地)假设它有一个 scrollViewer child 。另一个问题是，如果你捏，MakeVisible 方法被调用并且 item.Bounds.Left 将是 0.5(在这种情况下你不想在任何地方滚动 zoomedIn View )，但是如果你点击一个zoomedOut View 中的元素，您必须在代码中设置此值，在这种情况下，您希望在 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 View 中的项目时: private void 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();
}