Question

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

以下是文字展示位置的正确变体（移动版）

Answer 1

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

你可以保持＆＃34;固定＆＃34;使用固定大小和边距的布局，然后将其包装在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将TextBlocks置于图像上

1 个答案: