问题
I am building a Windows Phone 8 application that uses a Pivot control to display data for a given date for different users. Each PivotItem holds a different user.
Currently my application only supports Portrait orientation but I want to build in support for Landscape orientation as well. In doing so, I would like each PivotItem to no longer only show data for one date, but for a full week, hereby changing the layout significantly.
My first approach was to navigate to a new page with the new layout, however during some research for this, I learned that maybe the right/best approach would be to change the DataTemplate. I assume that should be on the Pivot control ItemTemplate.
This, however, I have not been able to get my head around and make work. My question is therefore what is the best approach for changing the layout when the orientation changes – navigating to a new page or changing the DataTemplate – and if it is to change the template of the Pivot control, how should that be done?
EDIT - Code for current Pivot control
<phone:Pivot x:Name="PivotPlatform" Title="DEMO" ItemsSource="{Binding PivotItems}" FontSize="13.333" >
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}"/>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<!-- Controls omitted -->
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot><?xml version="1.0" encoding="utf-8"?>
I am thinking that all I need to do is to extract the DataTemplate with the omitted controls, and then "just" specify the desired DataTemplate depending on the orientation. However, I can seem to find the right syntax for that
回答1:
In the page resources define both of the templates
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="DataTemplate1">
<!--DEFINE TEMPLATE HERE-->
</DataTemplate>
<DataTemplate x:Key="DataTemplate2">
<!--DEFINE TEMPLATE HERE-->
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
Then define the Pivot like this:
<phone:Pivot x:Name="PivotPlatform"
Title="DEMO"
FontSize="13.333"
ItemsSource="{Binding PivotItems}">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</phone:Pivot.HeaderTemplate>
</phone:Pivot>
Handle the orientation changed event
<phone:PhoneApplicationPage ....
OrientationChanged="PhoneApplicationPage_OrientationChanged"
....>
by setting the datatemplate programmatically
private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
if (e.Orientation == PageOrientation.PortraitDown || e.Orientation == PageOrientation.PortraitUp)
{
PivotPlatform.ItemTemplate = this.Resources["DataTemplate1"] as DataTemplate;
}
else
{
PivotPlatform.ItemTemplate = this.Resources["DataTemplate2"] as DataTemplate;
}
}
That should work!
回答2:
You can create your new template for Pivot item in Page resources then handle layoutchange event:
void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e){if (e.Orientation == PageOrientation.LandscapeLeft || e.Orientation == PageOrientation.LandscapeRight)
{
}
else
{
}}
来源:https://stackoverflow.com/questions/16000529/windows-phone-change-layout-on-orientation-change