设置帧图像大小

Question

问题1：

我有一个如下的

DataTemplate

。在我的布局中，我需要将图像

tipFrame

放在

TextBlock

tipText

下面。

tipText's

文本将根据拉取的服务器文本进行更改，因此

tipFrame's

宽度应相应更改以覆盖tipText。

但问题是

tipText's

父控件，

RelativePanel's

宽度很大，例如1800。并且由于

tipText's

边距设置

Margin="35,7,100,0"

，所以tipText的宽度为

1800 - 35 = 1765

，与其内容大小不匹配。例如。内容可能只是

"hi"

。这会导致框架的尺寸无法正确设置。 怎么解决？

  <DataTemplate x:Key="singleRow">
            <StackPanel Orientation="Vertical" Height="388">
                <RelativePanel>
                    <TextBlock x:Name="titleText" Text="{Binding Path=titleText}" Foreground="White" FontSize="40" TextLineBounds="TrimToCapHeight" Margin="0,6,0,0" />
                    <TextBlock x:Name="tipText" Text="try something" FontSize="20" Foreground="#B9B9B9" RelativePanel.RightOf="titleText"
                               Margin="35,7,0,0" TextWrapping="WrapWholeWords"/>
                    <Image x:Name="tipFrame" Source="ms-appx:///Assets/Template/list1/tipFrame.png" RelativePanel.RightOf="titleText" 
                           Height="36" Width="{Binding ElementName=tipTextShadow,Path=Width}" Stretch="Fill"
                           Margin="35,5,0,0"/>

提示框图片附在下面：

问题2：

我将上图的拉伸模式设置为

Stretch="Fill"

。如果图像的宽度设置太大，则图像的四个角的半径变化太大，而且比较难看。怎么解决？

更多：

我添加一张新图片来说明我的问题：

Answer 1

这是我的一些建议：

1. 如果你的内容宽度和高度是可变的，那么我不建议使用

   RelativePanel

   进行布局，但建议使用

   Grid

   。
2. 您给出的图像是一个圆角矩形。过度拉伸将不可避免地使图像变形。尝试

   Stretch="Uniform"

   或

   Stretch="UniformToFill"

这是我给出的布局建议：

<DataTemplate x:Key="singleRow">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Horizontal">
            <TextBlock x:Name="titleText" Foreground="White" FontSize="40" TextLineBounds="TrimToCapHeight" Margin="0,6,0,0" />
            <TextBlock x:Name="tipText" Text="try something" FontSize="20" Foreground="#B9B9B9"
                       Margin="35,7,0,0" TextWrapping="WrapWholeWords"/>
        </StackPanel>
        <Image x:Name="tipFrame" Source="ms-appx:///Assets/Template/list1/tipFrame.png" Grid.Column="1"
                   Stretch="UniformToFill"
               Height="30"
               VerticalAlignment="Center"
                   Margin="0,5,0,0"/>
    </Grid>
</DataTemplate>

小贴士

网格行/列定义中的

*

表示剩余区域，这样您就无法手动设置宽度/高度。

致以诚挚的问候。