Changing the FlipviewStackPanel virtualization orientation to WP8.1
I want to change the orientation property as shown 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 this to work, when the device orientation has changed, the orientation property should follow the change as well. But it didn't work when I add a button in the code to change orientation from vertical to horizontal, does anyone know?
source to share
It looks like changing a property of an Orientation
object FlipView
ItemsPanel
doesn't work for some reason. So here's an alternative.
You will need to duplicate yours FlipView
. Could be implemented Vertical
VirtualizingStackPanel
and the other a Horizontal
VirtualizingStackPanel
.
Define them on the page 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 track the orientation changes of the phone.
private SimpleOrientationSensor _orientationSensor = SimpleOrientationSensor.GetDefault();
After you have subscribed to his event OrientationChanged
,
_orientationSensor.OrientationChanged += OrientationSensor_OrientationChanged;
in your callback, just hide and show FlipView
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;
}
});
}
source to share