Windows Phone-在方向更改时更改布局 [英] Windows Phone - change layout on orientation change

问题描述

我正在构建一个Windows Phone 8应用程序，该应用程序使用Pivot控件为不同的用户显示给定日期的数据.每个PivotItem拥有一个不同的用户.

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.

当前，我的应用程序仅支持纵向方向，但是我也希望构建对横向方向的支持.为此，我希望每个PivotItem不再仅显示一个日期的数据，而是整个一周的数据，从而显着更改布局.

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.

我的第一种方法是导航到具有新布局的新页面，但是在对此进行一些研究时，我了解到也许正确/最好的方法是更改​​DataTemplate.我认为应该在数据透视控件ItemTemplate上.

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.

但是，这还没能引起我的注意并开展工作.因此，我的问题是，当方向更改时(导航到新页面或更改DataTemplate)更改布局的最佳方法是什么?如果要更改Pivot控件的模板，应该怎么做?

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"?>

我认为我所要做的就是提取带有省略控件的DataTemplate，然后根据方向仅"指定所需的DataTemplate.但是，我似乎可以找到正确的语法

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

推荐答案

在页面资源中定义两个模板

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>

处理方向更改事件

<phone:PhoneApplicationPage ....
                        OrientationChanged="PhoneApplicationPage_OrientationChanged"
                        ....>

通过编程设置数据模板

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;
    }
}

应该可以！

这篇关于Windows Phone-在方向更改时更改布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！