UWP 在图像上放置文本块

Question

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

这是文本放置的正确变体（手机版）

Answer 1

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

您可以使用固定大小和边距保持 "fixed" 布局，并将其包裹在 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>

UWP 在图像上放置文本块

UWP Place TextBlocks on Image

windows

windows-phone-8.1

win-universal-app

uwp

windows-10-universal