locked
SemanticZoom with Hub control not working in 8.1 RRS feed

  • Question

  • I have a SemanticZoom control that contains a Hub control within the ZoomedInView. When clicking on a grouped section in the ZoomedOutView I'm programmatically scrolling to the section of the Hub control via the Hub.ScrollToSection method. It's been working fine with Windows 8.1 Preview. I just upgraded to 8.1 RTM (along with VS2013 RTM) and now the app is not automatically scrolling to the selected section.

    I've noticed that I can successfully scroll to a section while the ZoomedInView is active. I've also noticed that I can default to a specific section of the Hub when navigating to the page. The problem appears to be when switching between the zoomed in and zoomed out views and then attempting to scroll to a specific section of the Hub control.

    I can fix this issue by adding a built in task delay after changing views but before calling ScrollToSection.

    Zoom.IsZoomedInViewActive = true;
                
    await Task.Delay(TimeSpan.FromMilliseconds(500));
    
    HubOverview.ScrollToSection(target);

    This is obviously a hack. I'd like a more elegant solution. Any thoughts?


    jt

    Wednesday, November 6, 2013 5:50 PM

Answers

  • Thanks, Lars! Your info proved helpful in my eventual implementation.

    Here's some additional information on the fix in case it can help anyone else.

    I hooked up the ViewChangeStarted event to my SemanticZoom control. The ItemClick event of the GridView that was in the ZoomedOutView simply sets the target HubSection for the ViewChangeStarted event to consume.

     private void gvMenu_ItemClick(object sender, ItemClickEventArgs e)
            {
                ChartSection objCS = (ChartSection)e.ClickedItem;
    
                HubSection target = null;
                switch (objCS.ChartSectionName)
                {
                    case "1":
                        target = hs1;
                        break;
                    case "2":
                        target = hs2;
                        break;
                    case "3":
                        target = hs3;
                        break;
                    case "4":
                        target = hs4;
                        break;
                }
    
                _selectedHubSection = target;
    
                Zoom.IsZoomedInViewActive = true;
            }
    
    private HubSection _selectedHubSection { get; set; }
    
    private void Zoom_ViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
            {
                if (!e.IsSourceZoomedInView)
                {
                    e.DestinationItem.Item = _selectedHubSection;
                }
            }


    jt

    • Marked as answer by Anne Jing Thursday, November 14, 2013 9:12 AM
    Friday, November 8, 2013 8:28 PM

All replies

  • Hi,

    did you try to derive from HubControl and override the MakeVisible method?

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.hub.makevisible.aspx


    lh

    • Proposed as answer by Anne Jing Thursday, November 7, 2013 6:02 AM
    Wednesday, November 6, 2013 9:02 PM
  • No, I haven't tried that. Do you have a working example? There isn't much documentation out there for setting the SemanticZoomLocation.

    jt

    Thursday, November 7, 2013 7:02 PM
  • Hi,

    sorry for getting back to you so late. Well it´s difficult to get a good example for that. The documentation on this is imho incomplete. I started with the Topic from this post

    http://www.xamlplayground.org/post/2013/01/18/Customized-semantic-zoom-an-alternative-to-common-grouping.aspx

    I implemented my own SemanticZoomView and set the SelectedItem during the MakeVisible call. In case of HubControl calling ScrollToSection could be the right way... But I didn´t test this.


    lh

    Friday, November 8, 2013 11:12 AM
  • Thanks, Lars! Your info proved helpful in my eventual implementation.

    Here's some additional information on the fix in case it can help anyone else.

    I hooked up the ViewChangeStarted event to my SemanticZoom control. The ItemClick event of the GridView that was in the ZoomedOutView simply sets the target HubSection for the ViewChangeStarted event to consume.

     private void gvMenu_ItemClick(object sender, ItemClickEventArgs e)
            {
                ChartSection objCS = (ChartSection)e.ClickedItem;
    
                HubSection target = null;
                switch (objCS.ChartSectionName)
                {
                    case "1":
                        target = hs1;
                        break;
                    case "2":
                        target = hs2;
                        break;
                    case "3":
                        target = hs3;
                        break;
                    case "4":
                        target = hs4;
                        break;
                }
    
                _selectedHubSection = target;
    
                Zoom.IsZoomedInViewActive = true;
            }
    
    private HubSection _selectedHubSection { get; set; }
    
    private void Zoom_ViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
            {
                if (!e.IsSourceZoomedInView)
                {
                    e.DestinationItem.Item = _selectedHubSection;
                }
            }


    jt

    • Marked as answer by Anne Jing Thursday, November 14, 2013 9:12 AM
    Friday, November 8, 2013 8:28 PM