Set the size of frame image

问题

Question 1:

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.

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

The tipFrame image is attached below.

Question 2:

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!

More:

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

回答1:

This is some of my advice:

If your content width and height are variable, then I don't recommend using RelativePanel for layout, but Grid is recommended.
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>

tips

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

Best regards.

来源：https://stackoverflow.com/questions/57109481/set-the-size-of-frame-image

标签

uwp