How can I tell which HubSection is selected

Question

I need to change the contents of an AppBar when a user changes the view in a Hub control.

The way I did it while using a Pivot control is listening to the SelectionChanged event and responding to the SelectIndex value.

The hub, however, only has a SectionsInViewChanged event, which returns a collection of multiple sections. Usually the one user is interacting with and then the adjacent, barely-visible section.

So my question is, how can I tell which Section is the one that is currently being prominently displayed to the user (so I can change the AppBar icons accordingly)?

Answer 1

In Hub control, We can listen to the SectionsInViewChanged event. We can get the HubSection which is displayed in screen by this:

var section = hubDemo.SectionsInView[0];

hubDemo is the name of my Hub control. And we can set Tag property for each HubSection. For example:

<Hub x:Name="hubDemo" SectionsInViewChanged="demoHub_SectionsInViewChanged">
    <HubSection Tag="0" Header="Section1" Width="800"/>
    <HubSection Tag="1" Header="Section2" Width="400"/>
    <HubSection Tag="2" Header="Section3" Width="400"/>
    <HubSection Tag="3" Header="Section4" Width="400"/>
    <HubSection Tag="4" Header="Section5" Width="600"/>
</Hub>

So we can change AppBar content by tag:

private void demoHub_SectionsInViewChanged(object sender, SectionsInViewChangedEventArgs e)
{
    var section = hubDemo.SectionsInView[0];
    var tag = section.Tag.ToString();
    switch (tag)
    {
        // Change your AppBar by tag
    }
}