UWP 在图像上放置文本块

Question

我目前正在开发可以在手机和台式机上运行的通用应用程序。但我有一点麻烦。在我的应用程序中，我有一个页面可以将新信用卡添加到用户个人资料中。因此，我使用边距设置图像上的文本，但是当我的应用程序在具有不同分辨率的设备上运行时，文本将改变其位置（很明显）。我的问题是，我怎样才能让文本根据屏幕分辨率占据它的位置？

这是文本放置的正确变体（移动版）

Answer 1

您可以使用ViewBox来包装您的自定义控件。ViewBox 将自动缩放其内容以适应其大小。

您可以使用固定大小和边距保持“固定”布局，并将其包装在 ViewBox 中。

<ViewBox>
    <YourControl />
</ViewBox>

以下是使用包裹在多种尺寸的视图框中的相同 RelativePanel 制作的快速布局示例：

和代码（我复制了 RelativePanel 只是为了做一个快速示例，但请注意视图框的大小与内部控件的大小不同）：

    <Viewbox Width="80" Margin="12">
        <RelativePanel Width="200" Height="140" Background="DarkBlue" Padding="12">

            <TextBlock x:Name="number" 
                       Text="XXXX XXXX XXXX XXXX" 
                       Foreground="White"
                       RelativePanel.AlignVerticalCenterWithPanel="True"
                       RelativePanel.AlignHorizontalCenterWithPanel="true"/>

            <TextBlock x:Name="name"
                       Text="FIRST NAME"
                       Foreground="White"
                       RelativePanel.AlignLeftWith="number"
                       RelativePanel.Below="number" 
                       Margin="0,12,0,0"/>

            <TextBlock x:Name="date"
                       Text="MM/YY"
                       Foreground="White"
                       RelativePanel.AlignRightWith="number"
                       RelativePanel.Below="number" 
                       Margin="0,12,0,0"/>
        </RelativePanel>
    </Viewbox>

    <Viewbox Width="160" Margin="12">
        <RelativePanel Width="200" Height="140" Background="DarkBlue" Padding="12">

            <TextBlock x:Name="number1" 
                       Text="XXXX XXXX XXXX XXXX" 
                       Foreground="White"
                       RelativePanel.AlignVerticalCenterWithPanel="True"
                       RelativePanel.AlignHorizontalCenterWithPanel="true"/>

            <TextBlock x:Name="name1"
                       Text="FIRST NAME"
                       Foreground="White"
                       RelativePanel.AlignLeftWith="number1"
                       RelativePanel.Below="number1" 
                       Margin="0,12,0,0"/>

            <TextBlock x:Name="date1"
                       Text="MM/YY"
                       Foreground="White"
                       RelativePanel.AlignRightWith="number1"
                       RelativePanel.Below="number1" 
                       Margin="0,12,0,0"/>
        </RelativePanel>
    </Viewbox>

    <Viewbox Width="320" Margin="12">
        <RelativePanel Width="200" Height="140" Background="DarkBlue" Padding="12">

            <TextBlock x:Name="number2" 
                       Text="XXXX XXXX XXXX XXXX" 
                       Foreground="White"
                       RelativePanel.AlignVerticalCenterWithPanel="True"
                       RelativePanel.AlignHorizontalCenterWithPanel="true"/>

            <TextBlock x:Name="name2"
                       Text="FIRST NAME"
                       Foreground="White"
                       RelativePanel.AlignLeftWith="number2"
                       RelativePanel.Below="number2" 
                       Margin="0,12,0,0"/>

            <TextBlock x:Name="date2"
                       Text="MM/YY"
                       Foreground="White"
                       RelativePanel.AlignRightWith="number2"
                       RelativePanel.Below="number2" 
                       Margin="0,12,0,0"/>
        </RelativePanel>
    </Viewbox>
</StackPanel>