水平视图正在显示，但我希望它是垂直视图答案

【问题标题】：Horizontal view is showing, but I want it to be vertical view水平视图正在显示，但我希望它是垂直视图
【发布时间】：2016-10-11 07:48:54
【问题描述】：

我正在使用通用 Windows 8.1 框架开发一个 Windows 商店应用程序。我知道它已经过时了，但我的项目应该使用这个框架，所以无能为力。

现在的问题是我已经成功地将桌面设置为水平，但对于移动设备我希望它垂直，但它仍然显示为水平。我将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>

我错过了什么？

【问题讨论】：

因为我不确定你到底在问什么。我会告诉你here，因为我猜你的答案就在这个家伙的文章中。

标签： c# xaml windows-store-apps windows-store

【解决方案1】：

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

【讨论】：