Горизонтальный вид показывает, но я хочу, чтобы это был вертикальный вид

Question

Я разрабатываю приложение для магазина Windows, используя универсальную инфраструктуру Windows 8.1. Я знаю, что это устарело, но мой проект предполагает использовать эту структуру, поэтому не может этого сделать.

Теперь проблема в том, что я успешно сделал ее горизонтальной для рабочего стола, но для мобильного я хочу, чтобы она была вертикальной, но она по-прежнему отображается горизонтально. Я использовал gridview для горизонтального и для списка телефонов, но все равно никакого результата.

Вот код 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

Определить как DataTemplates в XAML ресурсов (дать им ключи 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"];  
     } 
}