水平視圖顯示，但我希望它是垂直視圖

Question

我正在開發使用通用Windows 8.1框架的Windows應用商店應用程序。我知道它已經過時，但我的項目假設使用這個框架，所以不能幫助它。

現在的問題是，我已經成功地將其水平放置在桌面上，但對於手機，我希望它是垂直的，但它仍然顯示水平。我使用gridview的水平和手機listview，但仍然沒有結果。

這裏是XAML代碼

<Page 
x:Class="MedicinesApp.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:MedicinesApp" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" 

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
<Page.Resources> 
    <CollectionViewSource x:Name="FruitsCollectionViewSource" IsSourceGrouped="True"/> 
    <DataTemplate x:Key="template"> 
     <StackPanel Orientation="Horizontal"> 
      <TextBlock Text="{Binding}"/> 
      <TextBlock Text="{Binding ElementName=listView, Path=DataContext.Test}" Margin="20 0" /> 
     </StackPanel> 
    </DataTemplate> 
</Page.Resources> 
<ListView   
    ItemsSource="{Binding Source={StaticResource FruitsCollectionViewSource}}" 
    x:Name="FruitGridView" 
    Padding="30,20,40,0" 
    SelectionMode="None" 
    IsSwipeEnabled="false" 
    IsItemClickEnabled="True" 
    ItemClick="FruitGridView_ItemClick"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <Grid HorizontalAlignment="Center" Width="250" Height="250"> 
       <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"> 
        <Image Source="{Binding Path=DiseaseImageSource}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/> 
       </Border> 
       <StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}"> 
        <StackPanel Orientation="Horizontal"> 
         <TextBlock Text="Disease Name" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="30" Margin="15,0,15,0"/> 
         <TextBlock Text="{Binding Path=DiseaseName}" Style="{StaticResource TitleTextBlockStyle}" Height="30" Margin="15,0,15,0"/> 
        </StackPanel> 
        <StackPanel Orientation="Horizontal"> 
         <TextBlock Text="Category of Disease" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,87,10"/> 
         <TextBlock Text="{Binding Path=CategoryOfDisease}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/> 
        </StackPanel> 
       </StackPanel> 
      </Grid> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
    <ListView.GroupStyle> 
     <GroupStyle> 
      <GroupStyle.HeaderTemplate> 
       <DataTemplate> 
        <TextBlock Text='{Binding Key}' Foreground="Gray" Margin="5" FontSize="30" FontFamily="Segoe UI Light" /> 
       </DataTemplate> 
      </GroupStyle.HeaderTemplate> 
      <GroupStyle.Panel> 
       <ItemsPanelTemplate> 
        <VariableSizedWrapGrid MaximumRowsOrColumns="2" Orientation="Vertical" /> 
       </ItemsPanelTemplate> 
      </GroupStyle.Panel> 
     </GroupStyle> 
    </ListView.GroupStyle> 
    <ListView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <ItemsWrapGrid GroupPadding="0,0,70,0" /> 
     </ItemsPanelTemplate> 
    </ListView.ItemsPanel> 
</ListView> 

我缺少什麼？

Answer 1

在XAML資源定義都的DataTemplates（給他們鑰匙TemplateHori和TemplateVerti例如）

<Page.Resources> 
<DataTemplate x:Key="TemplateHori"> 
    <StackPanel Orientation="Horizontal"> 
     <TextBlock Text="{Binding}"/> 
     <TextBlock Text="{Binding ElementName=listView, Path=DataContext.Test}" Margin="20 0" /> 
    </StackPanel> 
</DataTemplate> 
<DataTemplate x:Key="TemplateVerti"> 
    <StackPanel Orientation="Vertical"> 
     <TextBlock Text="{Binding}"/> 
     <TextBlock Text="{Binding ElementName=listView, Path=DataContext.Test}" Margin="20 0" /> 
    </StackPanel> 
</DataTemplate> 
</Page.Resources> 

添加頁面大小改變事件的構造函數：

public MainPage() 
{ 
this.InitializeComponent(); 
Window.Current.SizeChanged += Current_SizeChanged; 
} 

，並在頁面大小改變與事件比較和身高：

void Current_SizeChanged(object sender, Window.UI.Core.WindowSizeChangedEventArgs e) 
{ 
    var b=Window.Current.Bounds; 
    if (b.Width>b.Height) 
     { 
      FruitGridView.ItemTemplate = (DataTemplate)Resources["TemplateHori"]; 
     } 
     else 
     { 
      FruitGridView.ItemTemplate = (DataTemplate)Resources["TemplateVerti"];  
     } 
}