设置帧图像的大小 [英] Set the size of frame image

问题描述

问题 1:

我有一个 DataTemplate 如下.在我的布局中，我需要将 Image tipFrame 放在 TextBlock tipText 下方.tipText's 文本会根据拉取的服务器文本而改变，因此 tipFrame's 宽度应该相应地改变以覆盖 tipText.

I have a DataTemplate as below. And in my layout I need to put Image tipFrame below TextBlock tipText. tipText's text will change according to pulled server text, hence tipFrame's width should change accordingly to cover tipText.

但问题是 tipText's 父控件，RelativePanel's 宽度很大，例如1800.由于tipText的 Margin设置Margin="35,7,100,0"，所以tipText的宽度为1800 - 35 = 1765，即与其内容大小不匹配.例如.内容可能只有 "hi".这会导致无法正确设置框架的大小.如何解决?谢谢！

But the issue is that tipText's parent control, the RelativePanel's width is big, e.g. 1800. And due to tipText's Margin setting Margin="35,7,100,0", so tipText's width is 1800 - 35 = 1765, which does not match its content size. E.g. the content maybe only "hi". That causes the frame's size cannot be set properly. How to solve it? Thanks!

  <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 图片附在下面.

The tipFrame image is attached below.

问题 2:

我将上图的拉伸模式设置为Stretch="Fill"如果图片的宽度设置得太大，那么它的4个角的半径变化太大了，urgly.如何解决?谢谢！

I set the Stretch mode of the above image as Stretch="Fill" If the the image's width is set too big, then the 4 corners' radius of it is changed too much, urgly. How to solve it? Thanks!

更多:

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

I add a new picture to illustrate my issue, hope it can help.

推荐答案

这是我的一些建议:

1. 如果您的内容宽度和高度是可变的，那么我不建议使用 RelativePanel 进行布局，但建议使用 Grid.
2. 您提供的图像是一个圆角矩形.过度拉伸不可避免地会扭曲图像.试试 Stretch="Uniform" 或 Stretch="UniformToFill"

1. If your content width and height are variable, then I don't recommend using RelativePanel for layout, but Grid is recommended.
2. The image you give is a rounded rectangle. Excessive stretching will inevitably distort the image. Try Stretch="Uniform" or Stretch="UniformToFill"

这是我给出的布局建议:

This is the layout suggestion I gave:

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

提示

Grid Row/Column Definitions中的*表示剩余区域，防止手动设置宽度/高度.

The * in the Grid Row/Column Definitions indicates the remaining area, which prevents you from manually setting the width/height.

最好的问候.

这篇关于设置帧图像的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！