UWP 在图像上放置文本块 [英] UWP Place TextBlocks on Image

问题描述

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

这是文本放置的正确变体(移动版)

解决方案

您可以使用

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

 <RelativePanel Width="200" Height="140" Background="DarkBlue" Padding="12"><TextBlock x:Name="number"文字=XXXX XXXX XXXX XXXX"前景=白色"RelativePanel.AlignVerticalCenterWithPanel="True"RelativePanel.AlignHorizo​​ntalCenterWithPanel="true"/><TextBlock x:Name="name"文字=名字"前景=白色"RelativePanel.AlignLeftWith="数字"RelativePanel.Below="数字"保证金="0,12,0,0"/><TextBlock x:Name="日期"文字=MM/YY"前景=白色"RelativePanel.AlignRightWith="数字"RelativePanel.Below="数字"保证金="0,12,0,0"/></RelativePanel></视图框><Viewbox Width="160" Margin="12"><RelativePanel Width="200" Height="140" Background="DarkBlue" Padding="12"><TextBlock x:Name="number1"文字=XXXX XXXX XXXX XXXX"前景=白色"RelativePanel.AlignVerticalCenterWithPanel="True"RelativePanel.AlignHorizo​​ntalCenterWithPanel="true"/><TextBlock x:Name="name1"文字=名字"前景=白色"RelativePanel.AlignLeftWith="number1"RelativePanel.Below="number1"保证金="0,12,0,0"/><TextBlock x:Name="date1"文字=MM/YY"前景=白色"RelativePanel.AlignRightWith="number1"RelativePanel.Below="number1"保证金="0,12,0,0"/></RelativePanel></视图框><Viewbox Width="320" Margin="12"><RelativePanel Width="200" Height="140" Background="DarkBlue" Padding="12"><TextBlock x:Name="number2"文字=XXXX XXXX XXXX XXXX"前景=白色"RelativePanel.AlignVerticalCenterWithPanel="True"RelativePanel.AlignHorizo​​ntalCenterWithPanel="true"/><TextBlock x:Name="name2"文字=名字"前景=白色"RelativePanel.AlignLeftWith="number2"RelativePanel.Below="number2"保证金="0,12,0,0"/><TextBlock x:Name="date2"文字=MM/YY"前景=白色"RelativePanel.AlignRightWith="number2"RelativePanel.Below="number2"保证金="0,12,0,0"/></RelativePanel></视图框></StackPanel>

I'm currently developing universal application that can run on both mobiles and desktops. But I have a little trouble. In my application I have a page to add new credit card to the user profile. So, I set the text on the image using margins, but when my application runs on the device with different resolution, the text will change its position (it's obvious). My question is, how can I do that to let text take its position according to the screen resolution?

Here is the correct variant of the text placement (Mobile version)

解决方案

You can use a ViewBox to wrap your custom control. The ViewBox will automatically scale its content to fit the size it has.

You can keep your "fixed" layout using fixed sized and margin and just wrap it within a ViewBox.

<ViewBox>
    <YourControl />
</ViewBox>

Here is a sample of a quick layout made using the same RelativePanel wrapped in view boxes of several sizes:

And the code (I've duplicated the RelativePanel just to make a quick sample but notice that the size of the view box is not the same as the one for the inner control):

    <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 在图像上放置文本块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！