Horizontale Ansicht wird angezeigt, aber ich möchte, dass es vertikale Ansicht ist

Question

Ich entwickle eine Windows Store App mit Universal Windows 8.1 Framework. Ich weiß, dass es veraltet ist, aber mein Projekt soll dieses Framework verwenden, also kann es nicht helfen.

Nun ist das Problem, dass ich es horizontal für den Desktop erfolgreich gemacht habe, aber für das Handy möchte ich es vertikal, aber es zeigt immer noch horizontal. Ich benutzte gridview für horizontales und für Telefon listview, aber noch kein Ergebnis. Hier

ist der XAML-Code

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

Was bin ich?

Answer 1

definieren beide Datatemplates in XAML-Ressourcen (sie Schlüssel TemplateHori und TemplateVerti zum Beispiel geben)

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

Add Seitengröße veränderndes Ereignis in Konstruktor:

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

und in Seitengröße mit Ereignis Ändern vergleichen und Höhe:

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