Question

因此，我正在构建主要针对手机的UWP应用程序，但由于它可以在PC和平板电脑上运行，因此我使用VisualStateManager来校正更大屏幕的布局。现在手机也有不同的屏幕尺寸，我正在寻找一种方法来简单地缩放我的页面中的所有组件，而不使用Visual状态为每个电话和屏幕分辨率，或者使用状态管理器，但不必为每个屏幕尺寸重新定位每个元素（在5＆＃34;和6＆＃34;手机之间很容易，因为你可以看到VS 2015中的变化预览，但对于小手机来说它非常烦人）。这是我的应用程序的示例页面：

    <Grid>
    <Canvas x:Name="canvas">
        <Canvas.Background>
            <ImageBrush Stretch="Fill" ImageSource="Assets/start-01.jpg"/>
        </Canvas.Background>
        <RelativePanel x:Name="relativePanel"  Canvas.Left="-3" Height="612" Canvas.Top="10" >

            <Image x:Name="play" HorizontalAlignment="Left" Height="36" Margin="83,271,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="play_Tapped"/>
            <TextBlock x:Name="playTB" Height="36" Margin="130,265,69.333,0" TextWrapping="Wrap" Text="RACE" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="play_Tapped" FontFamily="Lucida Sans Unicode"/>
            <Image x:Name="highscoresBT" HorizontalAlignment="Left" Height="36" Margin="83,337,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="highscoresBT_Tapped"/>
            <TextBlock x:Name="highscoreTB" Height="36" Margin="85,337,76,0" TextWrapping="Wrap" Text="HIGHSCORES" FontSize="24" VerticalAlignment="Top" CharacterSpacing="194" Tapped="highscoresBT_Tapped" FontFamily="Lucida Sans Unicode"/>
            <Image x:Name="storeBT" HorizontalAlignment="Left" Height="36" Margin="83,403,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="storeBT_Tapped"/>
            <TextBlock x:Name="storeTB" HorizontalAlignment="Left" Height="36" Margin="124,397,-108,0" TextWrapping="Wrap" Text="STORE" Width="151" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="storeBT_Tapped"/>
            <Image x:Name="helpBut" HorizontalAlignment="Left" Height="100" Margin="144,522,-3,0" VerticalAlignment="Top" Width="72" Source="Assets/helpBut-01.png" Tapped="helpBut_Tapped"/>
            <Image x:Name="coinsBG" HorizontalAlignment="Left" Height="19" Margin="295,0,-3,0" VerticalAlignment="Top" Width="56" Source="Assets/comp bar-01.png" Stretch="Fill"/>
            <Image x:Name="coinsIC" HorizontalAlignment="Left" Height="19" VerticalAlignment="Top" Width="14" Source="Assets/coins-01.png" Margin="329,1,-3,0"/>
            <TextBlock x:Name="coinsOwnedTB" HorizontalAlignment="Left" Height="14" Margin="303,2,-3,0" TextWrapping="Wrap" Text="120" VerticalAlignment="Top" Width="21" FontSize="10" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
            <Image x:Name="scoreBG" HorizontalAlignment="Left" Height="23" Margin="13,0,-3,0" VerticalAlignment="Top" Width="136" Source="Assets/comp bar-01.png" Stretch="Fill"/>
            <TextBlock x:Name="scoreNameTB" HorizontalAlignment="Left" Height="21" Margin="14,2,-3,0" TextWrapping="Wrap" Text="Score: " VerticalAlignment="Top" Width="48" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
            <TextBlock x:Name="scoreTB" HorizontalAlignment="Left" Height="21" Margin="62,2,-3,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="87" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
            <Image x:Name="feedbackBT" HorizontalAlignment="Left" Height="36" Margin="83,469,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="feedback_Tapped"/>
            <TextBlock x:Name="feedbackTB" Height="36" Margin="96,463,60.667,0" TextWrapping="Wrap" Text="SUPPORT" FontSize="30" VerticalAlignment="Top" Tapped="feedback_Tapped" FontFamily="Lucida Sans Unicode" TextAlignment="Center" CharacterSpacing="200"/>
        </RelativePanel>
    </Canvas>
</Grid>

所以基本上我需要一种根据Grid / Canvas / Relative面板大小来缩放和重新定位所有元素的方法（它们实际上并不是这个页面所需要的，它只是某种试验）。

也许一种编程方式不一定会改变XAML代码。

提前致谢：）

Answer 1

如果您希望自己的应用具有可扩展性/反应性，那么您应该避免使用Canvas来布局视觉元素。此外，当使用Canvas时，您应该使用Canvas.Left和Canvas.Top属性来定位元素，而不是Margin属性。

无论如何，以下XAML将提供可伸缩的布局，类似于您的画布布局，但可以在任何显示器上进行原生调整。不幸的是，由于我没有拥有您的所有资产，我无法验证它是否完全匹配，但已经对您尝试做的事情进行了一些有根据的猜测：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0" Margin="10">
        <Image x:Name="scoreBG" HorizontalAlignment="Left" Height="23" VerticalAlignment="Top" Source="Assets/comp bar-01.png" Stretch="Fill"/>
        <TextBlock x:Name="scoreNameTB" HorizontalAlignment="Left" Height="21" TextWrapping="Wrap" Text="Score: " VerticalAlignment="Top" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="1" Margin="10">
        <Image x:Name="helpBut" HorizontalAlignment="Left" VerticalAlignment="Top" Source="Assets/helpBut-01.png" Tapped="helpBut_Tapped"/>
        <Image x:Name="coinsBG" HorizontalAlignment="Left" VerticalAlignment="Top" Source="Assets/comp bar-01.png" Stretch="Fill"/>
        <Image x:Name="coinsIC" HorizontalAlignment="Left" VerticalAlignment="Top" Source="Assets/coins-01.png"/>
        <TextBlock x:Name="coinsOwnedTB" HorizontalAlignment="Left" Height="14" TextWrapping="Wrap" Text="120" VerticalAlignment="Top"  FontSize="10" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
    </StackPanel>
    <Grid Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Center" Margin="10">
            <Image x:Name="play" Height="36" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="play_Tapped"/>
            <TextBlock x:Name="playTB" Height="36" TextWrapping="Wrap" Text="RACE" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="play_Tapped" FontFamily="Lucida Sans Unicode"/>
        </StackPanel>
        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" Margin="10">
            <Image x:Name="highscoresBT" HorizontalAlignment="Left" Height="36" VerticalAlignment="Top" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="highscoresBT_Tapped"/>
            <TextBlock x:Name="highscoreTB" Height="36" TextWrapping="Wrap" Text="HIGHSCORES" FontSize="24" VerticalAlignment="Top" CharacterSpacing="194" Tapped="highscoresBT_Tapped" FontFamily="Lucida Sans Unicode"/>
        </StackPanel>
        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center" Margin="10">
            <TextBlock x:Name="storeTB" HorizontalAlignment="Left" TextWrapping="Wrap" Text="STORE" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="storeBT_Tapped"/>
        </StackPanel>
        <StackPanel Grid.Row="3" Orientation="Horizontal" HorizontalAlignment="Center" Margin="10">
            <Image x:Name="feedbackBT" HorizontalAlignment="Left" Height="36" VerticalAlignment="Top" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="feedback_Tapped"/>
            <TextBlock x:Name="feedbackTB" Height="36" TextWrapping="Wrap" Text="SUPPORT" FontSize="30" VerticalAlignment="Top" Tapped="feedback_Tapped" FontFamily="Lucida Sans Unicode" TextAlignment="Center" CharacterSpacing="200"/>
        </StackPanel>
    </Grid>
</Grid>

请注意，在大多数地方，我删除了边距并指定了宽度/高度属性，因为这些属性应根据显示/ DPI /区域设置保留为自动调整大小。

希望它有所帮助。

Answer 2

我设法在ViewBox的帮助下得到我想要的东西，ViewBox可以自动缩放我的应用程序以适应屏幕大小：

    <Viewbox Stretch="UniformToFill" >
    <Grid x:Name="canvas" >
        <Grid.Background>
            <ImageBrush Stretch="Fill" ImageSource="Assets/start-01.jpg"/>
        </Grid.Background>
        <Image x:Name="play" Height="34" HorizontalAlignment="Left" Margin="78,281,0,325" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="play_Tapped"/>
        <TextBlock x:Name="playTB" Height="34" Margin="125,276,90,0" TextWrapping="Wrap" Text="RACE" FontSize="30" CharacterSpacing="364" Tapped="play_Tapped" FontFamily="Lucida Sans Unicode"  VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment"/>
        <Image x:Name="highscoresBT" HorizontalAlignment="Left" Height="34" Margin="78,335,0,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="highscoresBT_Tapped"/>
        <TextBlock x:Name="highscoreTB" Height="34" Margin="88,335,82,0" TextWrapping="Wrap" Text="HIGHSCORES" FontSize="24" VerticalAlignment="Top" CharacterSpacing="100" Tapped="highscoresBT_Tapped" FontFamily="Lucida Sans Unicode"/>
        <Image x:Name="storeBT" HorizontalAlignment="Left" Height="34" Margin="78,398,0,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="storeBT_Tapped"/>
        <TextBlock x:Name="storeTB" HorizontalAlignment="Left" Height="34" Margin="111,392,0,0" TextWrapping="Wrap" Text="STORE" Width="151" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="storeBT_Tapped"/>
        <Image x:Name="helpBut" Height="96" Margin="115,511,122,0" VerticalAlignment="Top" Source="Assets/helpBut-01.png" Tapped="helpBut_Tapped" d:LayoutOverrides="HorizontalAlignment, LeftPosition, RightPosition"/>
        <Image x:Name="coinsBG" HorizontalAlignment="Left" Height="18" Margin="294,12,0,0" VerticalAlignment="Top" Width="56" Source="Assets/comp bar-01.png" Stretch="Fill"/>
        <Image x:Name="coinsIC" HorizontalAlignment="Left" Height="18" VerticalAlignment="Top" Width="14" Source="Assets/coins-01.png" Margin="328,13,0,0"/>
        <TextBlock x:Name="coinsOwnedTB" HorizontalAlignment="Left" Height="14" Margin="302,14,0,0" TextWrapping="Wrap" Text="120" VerticalAlignment="Top" Width="21" FontSize="10" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
        <Image x:Name="scoreBG" HorizontalAlignment="Left" Height="22" VerticalAlignment="Top" Width="136" Source="Assets/comp bar-01.png" Stretch="Fill" Margin="12,12,0,0" d:LayoutOverrides="HorizontalAlignment"/>
        <TextBlock x:Name="scoreNameTB" HorizontalAlignment="Left" Height="20" Margin="13,14,0,0" TextWrapping="Wrap" Text="Score: " VerticalAlignment="Top" Width="48" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
        <TextBlock x:Name="scoreTB" HorizontalAlignment="Left" Height="20" Margin="61,14,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="87" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257" d:LayoutOverrides="HorizontalAlignment"/>
        <Image x:Name="feedbackBT" HorizontalAlignment="Left" Height="34" Margin="78,461,0,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="feedback_Tapped"/>
        <TextBlock x:Name="feedbackTB" Height="34" Margin="91,455,98,0" TextWrapping="Wrap" Text="SUPPORT" FontSize="30" VerticalAlignment="Top" Tapped="feedback_Tapped" FontFamily="Lucida Sans Unicode" TextAlignment="Center" CharacterSpacing="200"/>
    </Grid>
</Viewbox>

这对我有用：）

将UWP应用程序扩展到所有手机尺寸

2 个答案: