WP8: Non-active PanoramaItem is tappable even when it is not active

Question

When using the Panorama control, elements in a non-active PanoramaItem respond to tap events. You can reproduce this with the following XAML, which is only very slightly modified from the Panorama Application solution template that ships with the Windows Phone 8 SDK. You can see how items in the second PanoramaItem are tappable, even when that PanoramaItem is not active.

<phone:Panorama Title="my application">
    <phone:Panorama.Background>
        <ImageBrush ImageSource="/PanoramaApp1;component/Assets/PanoramaBackground.png"/>
    </phone:Panorama.Background>

    <!--Panorama item one-->
    <phone:PanoramaItem Header="first item">
        <!--Single line list with text wrapping-->
        <phone:LongListSelector Margin="0,0,-22,0" ItemsSource="{Binding Items}">
            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,-6,0,12">
                        <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
                    </StackPanel>
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>
        </phone:LongListSelector>
    </phone:PanoramaItem>

    <!--Panorama item two-->
    <phone:PanoramaItem>
        <!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
        <phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Items}">
            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432" Tap="SecondItem_OnTap">
                        <!--Replace rectangle with image-->
                        <Border BorderThickness="1" Width="99" Height="99" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
                        <StackPanel Width="311" Margin="8,-7,0,0">
                            <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
                            <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>
        </phone:LongListSelector>
    </phone:PanoramaItem>
</phone:Panorama>

Notice the "SecondItem_OnTap" Tap event handler hook-up in the LongListSelector.ItemTemplate in the second PanoramaItem.

I've observed this behavior in every app that isn't pre-installed on the phone, in other words, all non-Microsoft apps, including apps like Facebook and Pandora. Does anyone have

1. First, any insight as to why the behavior is different between Microsoft and non-Microsoft apps; and
2. Secondly, any suggestions on how to work around this behavior?

Answer 1

Thanks for the answers guys! I solved it with the following:

private void Panorama_OnSelectionChanged(object sender, SelectionChangedEventArgs e) {
    this.UpdateHitTestForPanoItems(this.Panorama.SelectedItem);
}

private void Panorama_OnLoaded(object sender, RoutedEventArgs e) {
    this.UpdateHitTestForPanoItems(this.Panorama.SelectedItem ?? this.Panorama.Items.FirstOrDefault());
}

private void UpdateHitTestForPanoItems(object selectedItem) {
    foreach (PanoramaItem item in this.Panorama.Items) {
        item.IsHitTestVisible = item == this.Panorama.SelectedItem;
    }
}

Of course, you'll need to actually hook up the Loaded and SelectionChanged events to the Panorama_OnLoaded and Panorama_OnSelectionChanged methods, respectively. I could also see moving this to a Behavior, which you could use on other Panoramas in your app.

Answer 2

It's cumbersome, but you could capture the SelectionChanged event of the Panorama and disable clickable elements.

Answer 3

Yeah, this is a well known issue with panorama control. We addressed it in one of our apps by creating transparent overlay on top of inactive panorama item. Downside of this method is if you start side swipe on top of the overlay the gesture will be ignored. For our latest app we simply ignore this behaviour. If Microsoft was concerned about it they would fix it. As to why, well, Microsoft obviously doesn't use standard phone controls in their apps.