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

tipFrame图像附在下面。

问题2：

我将上图的拉伸模式设置为Stretch="Fill" 如果将图像的宽度设置得太大，则请尽快改变其4个角的半径。怎么解决呢？谢谢！

更多：

我添加了一张新图片来说明我的问题，希望对您有所帮助。

Answer 1

这是我的一些建议：

如果您的内容的宽度和高度是可变的，那么我不建议使用RelativePanel进行布局，但是建议使用Grid。
您提供的图像是一个圆角矩形。过度拉伸将不可避免地使图像变形。尝试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>

提示

“网格行/列定义”中的*指示剩余区域，这使您无法手动设置宽度/高度。

最诚挚的问候。

设置框架图像的尺寸

1 个答案: