Windows 应用商店应用程序无法缩放

Question

我正在开发一个 Windows 应用商店应用，但在缩放到不同的屏幕尺寸（即 140% 和 180%）时遇到了问题。一切都在我的计算机上完美运行，缩放到 100%，但是当我在 Surface Pro 和未缩放到 100% 的不同模拟器选项上测试它时，它开始起作用。我很确定问题出在<VisualStateManager> 上，但据我所知是这样。

问题仅出现在Snapped 状态下，在横向模式下 140% 时，标题有时出现有时保持空白。有时，单击标题可以调出菜单——即使它是空白的，而其他时候什么也没有发生。关于它的奇怪部分是，它是否工作取决于DataFrame 框架中加载的数据，所以如果我将这些页面的内容更改为与工作页面相同的内容，它就会工作。较短的页面似乎有更多的问题，但这是我能找到的唯一模式。

当屏幕缩放到 140% 纵向模式时，没有文字可见，但仍有一些可点击。

当屏幕缩放到180%时，文字是不可见的，不是可点击的。

标题图片未显示：

显示标题的图片：

这是我的MainPage.xaml 代码：

<Page
    x:Name="mainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LearnOneNote"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Class="LearnOneNote.MainPage"
    mc:Ignorable="d"
    Margin="-2">

    <Grid Background="White" x:Name="MainGrid">
        <Grid.Resources>
            <local:StringToTitleConverter x:Key="Convert" />
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" x:Name="TitleRow"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250" x:Name="ItemsColumn"/>
            <ColumnDefinition Width="*" x:Name="DataColumn"/>
        </Grid.ColumnDefinitions>

        <ListBox x:Name="Items" Grid.Column="0" Grid.RowSpan="2" ItemsSource="{Binding ItemList}" Padding="5" SelectionChanged="newSelect" Tapped="Items_Tapped"/>

        <Border x:Name="Border" Grid.Column="1" Margin="10,0,10,10" BorderThickness="0,0,0,2" BorderBrush="Brown" MaxHeight="100" VerticalAlignment="Bottom"/>

        <Viewbox x:Name="TitleView" Margin="10,0,10,10" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0">
            <TextBlock Foreground="Brown" Text="{Binding ElementName=Items, Path=SelectedValue, ConverterParameter=PrimaryView, Converter={StaticResource Convert}}" Margin="5,10,5,5"/>
        </Viewbox>

        <Viewbox x:Name="TitleViewSnapped" Margin="10,0,10,10" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0" Visibility="Collapsed">
            <TextBlock x:Name="TitleSnapped" Foreground="Brown" Text="{Binding ElementName=Items, Path=SelectedValue, ConverterParameter=Snapped, Converter={StaticResource Convert}}"
                       Margin="0,10,5,5" PointerEntered="Title_PointerEntered" PointerExited="Title_PointerExited" Tapped="Title_Tapped"/>
        </Viewbox>

        <Frame Grid.Column="1" Grid.Row="1" Margin="20,20,0,20" x:Name="DataFrame" FontSize="20" Foreground="Black" VerticalAlignment="Top" />

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ViewStates">
                <VisualState x:Name="PrimaryView"/>
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleViewSnapped" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="ItemsSelector">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DataColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Items" Storyboard.TargetProperty="FontSize">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="25"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>

如果我从<VisualState x:Name="Snapped">中删除这个位，我的文字消失没有问题，虽然点击问题仍然存在：

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Title" Storyboard.TargetProperty="Text">
  <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding ElementName=Items, Path=SelectedValue, ConverterParameter=Snapped, Converter={StaticResource Convert}}"/>
</ObjectAnimationUsingKeyFrames>

我在互联网上搜索了其他遇到此问题的人，并找到了这些 MSDN 页面：

Scaling to Pixel Density
Resizing to Narrow Layouts
Support Multiple Screen Sizes

据我所知，我已经完成了所有这些更改。

我的简化程序在文件here中可用

我的图片可用here

Answer 1

我认为您不能在动画中使用绑定。我会尝试两个单独的TextBlocks，它们绑定到不同的值，并在视觉状态故事板中交替使用Visibility，如果您希望通过不同的文本来区分视图。

Answer 2

好吧，这太疯狂了。我通过删除页面上 -2 的边距解决了我的问题：

<Page
  x:Name="mainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:LearnOneNote"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  x:Class="LearnOneNote.MainPage"
  mc:Ignorable="d"
  Margin="-2">

变成：

<Page
  x:Name="mainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:LearnOneNote"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  x:Class="LearnOneNote.MainPage"
  mc:Ignorable="d">

尽管我的页面周围有一条细白线，但所有比例尺的一切都立即开始工作。欢迎提供有关这样做的原因以及如何删除该白线的任何信息。