UWP Place TextBlocks auf Bild

Question

Ich entwickle derzeit eine universelle Anwendung, die sowohl auf Handys als auch auf Desktops laufen kann. Aber ich habe ein paar Probleme. In meiner Anwendung habe ich eine Seite, um dem Benutzerprofil eine neue Kreditkarte hinzuzufügen. Also setze ich den Text auf dem Bild mit den Rändern, aber wenn meine Anwendung auf dem Gerät mit einer anderen Auflösung läuft, ändert der Text seine Position (es ist offensichtlich). Meine Frage ist, wie kann ich das tun, um Text seine Position entsprechend der Bildschirmauflösung nehmen zu lassen?

Hier ist die korrekte Variante der Textplatzierung (Mobil-Version)

Answer 1

Sie eine ViewBox verwenden können, um benutzerdefinierte Steuerelement zu wickeln. Die ViewBox wird ihren Inhalt automatisch an die Größe anpassen, die sie hat.

Sie können Ihr "festes" Layout mit fester Größe und Rand beibehalten und es einfach in eine ViewBox einbinden. Hier

<ViewBox> 
    <YourControl /> 
</ViewBox> 

ist eine Probe eines schnellen Layouts gemacht, um die gleiche RelativePanel im Hinblick Boxen von mehreren Größen gewickelt werden:

und den Code (Ich habe die RelativePanel nur dupliziert zu machen aber eine schnelle Probe feststellen, dass die Größe des Betrachtungsfeldes ist nicht das gleiche wie die für die innere Kontrolle):

<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>