La vue horizontale est affichée, mais je veux qu'elle soit verticale

Question

Je suis en train de développer une application Windows Store en utilisant le framework Universal Windows 8.1. Je sais que c'est dépassé, mais mon projet est supposé utiliser ce framework, donc je ne peux pas m'en empêcher.

Maintenant, le problème est que j'ai réussi à le rendre horizontal pour le bureau, mais pour le mobile, je le veux vertical, mais il montre encore horizontal. J'ai utilisé gridview pour horizontal et pour la liste de téléphone, mais toujours pas de résultat.

Voici le code 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> 

Qu'est-ce que je manque?

Answer 1

Définir les DataTemplates dans les ressources XAML (leur donner les clés TemplateHori et TemplateVerti par exemple)

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

taille de page Ajouter un événement changement dans le constructeur:

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

et de la taille de la page événement qui change comparer avec et hauteur:

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