UWP Place TextBlocks on Image

问题

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)

回答1:

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>

来源：https://stackoverflow.com/questions/37411935/uwp-place-textblocks-on-image