Horizontal view is showing, but I want it to be vertical view

Question

I am developing a windows store app using Universal Windows 8.1 framework. I know it's outdated but my project is suppose to be using this framework so can't help it.

Now the problem is that I have successfully made it horizontal for the desktop, but for the mobile I want it vertical, but it is still showing horizontal. I used gridview for horizontal and for phone listview but still no result.

Here is the 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>

What am I missing?

Answer 1

Define both datatemplates in XAML resources (give them keys TemplateHori and TemplateVerti for example)

<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 page size changing event in constructor:

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

and in page size changing event compare with and height:

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