Flipview VirtualizingStackPanel orientation change on WP8.1

Question

I want to change the orientation property like the following below:

<Style x:Key="FlipViewStyleV" TargetType="FlipView">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel AreScrollSnapPointsRegular="True" Orientation="Vertical" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

And I want to let it worked when the device orientation changed, the orientation property should also follow the change. But it does not worked when I add a button in the code-behind to change the orientation from vertical to horizontal, does some one know?

Answer 1

Looks like changing the Orientation property of a FlipView's ItemsPanel doesn't work for some reason. So here's an alternative.

You will need to duplicate your FlipView. One would implement a Vertical VirtualizingStackPanel and the other a Horizontal VirtualizingStackPanel.

Define them in your page's Resources.

<Page.Resources>
    <ItemsPanelTemplate x:Key="HorizontalItemsPanel">
        <VirtualizingStackPanel AreScrollSnapPointsRegular="True" Orientation="Horizontal" />
    </ItemsPanelTemplate>
    <ItemsPanelTemplate x:Key="VerticalItemsPanel">
        <VirtualizingStackPanel AreScrollSnapPointsRegular="True" Orientation="Vertical" />
    </ItemsPanelTemplate>
</Page.Resources>

Then, you will want to use SimpleOrientationSensor to monitor the phone's orientation changes.

private SimpleOrientationSensor _orientationSensor = SimpleOrientationSensor.GetDefault();

After you have subscribed to its OrientationChanged event,

 _orientationSensor.OrientationChanged += OrientationSensor_OrientationChanged;

in its callback, simply hide and show the FlipViews accordingly.

private async void OrientationSensor_OrientationChanged(SimpleOrientationSensor sender, SimpleOrientationSensorOrientationChangedEventArgs args)
{
    await CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
        {
            switch (args.Orientation)
            {
                case SimpleOrientation.NotRotated:
                case SimpleOrientation.Rotated180DegreesCounterclockwise:
                    this.HorizontalFlipView.Visibility = Visibility.Visible;
                    this.VerticalFlipView.Visibility = Visibility.Collapsed;
                    break;
                case SimpleOrientation.Rotated90DegreesCounterclockwise:
                case SimpleOrientation.Rotated270DegreesCounterclockwise:
                    this.HorizontalFlipView.Visibility = Visibility.Collapsed;
                    this.VerticalFlipView.Visibility = Visibility.Visible;
                    break;
            }
        });
}