Semantic Zoom for custom view hierarchy instead of plain grid- or listview

Question

I have a page layout in xaml containing a grid with several gridviews which represent different contents and individual styles.

This is the hub of my application that presents these different contents like for example: artists, performances, records that are related somehow but different in content and therefore represented differently. ( entirely different itemtemplates and groupingstylefor each )

I want to Implement a semantic zoom that once zoomed out should show the custom made groups i have. So it should show artists, performances, recordings as groups when zoomed out.

Unfortunally i can only put a single GridView or ListView inside the ZoomedIn/Out tags.

Does anyone know how to work around this problem or can deliver a solid solution?

Answer 1

I fould a solution, it works, but it's yet rather clumsy. (I didn't have enough time to look into it deeply enough.) I would actually appreciate it if someone would suggest a proper (reusable, truly object oriented :-), etc.) solution.

You have to implement the ISemanticZoomInformation interface in a new class.

I didn't find a really detailed description about how the interface works, so I had to try a lot. My problem was, that a scrollViewer is needed to be able to jump to a certain point in the zoomedIn view, when you tap on a tile in the zoomedOutView. I couldn't subclass from the scrollViewer class. Probably you'd need to subclass a subclass of GridView, that has a scrollViewer as a child (if that's at all possible). In my solution it is (very wrongly) assumed, that it has a scrollViewer child. The other problem was, that if you pinch, the MakeVisible method is getting called and item.Bounds.Left will be 0.5 (and in this case you don't want to scroll in the zoomedIn view anywhere), but if you tap on an element in the zoomedOut view, you have to set this value in your code and in this case, you want to scroll the scrollViewer in the MakeVisible method.

E.g.:

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)
    {
        //
    }
}

I wrote some clumsy event handlers for the cases, when you tap on the items in the zoomedOut view as well:

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();
}