Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Can you get what you want by setting <code>MaxWidth</code> on the TextBlock? If you add <code>MaxWidth="460"</code> to your first example: </p> <pre><code>&lt;Grid x:Name="LayoutRoot" Width="500" HorizontalAlignment="Left" ShowGridLines="True" &gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="Auto" /&gt; &lt;ColumnDefinition Width="40"/&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;TextBlock MaxWidth="460" x:Name="textBlock" VerticalAlignment="Top" Height="25" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="0" &gt; &lt;TextBlock.Text&gt;longer keeps going and going testgrand you going and then t&lt;/TextBlock.Text&gt; &lt;/TextBlock&gt; &lt;Rectangle Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41" Width="41" Grid.Column="1"/&gt; &lt;/Grid&gt; </code></pre> <p>Then the TextBlock will grow horizontally and always have the rectangle immediately on its right. It won't be wider than 460, so the TextBlock plus the Rectangle shouldn't be wider than 500. If you need the Grid to resize dynamically then you can bind <code>TextBlock.MaxWidth</code> to <code>Grid.ActualWidth</code> with a converter that subtracts the width of the Rectangle. </p> <hr> <p>Edit: </p> <p>Actually, it should be even simpler than that. Use star sizing on the columns, but set <code>MaxWidth</code> instead of <code>Width</code> on the Grid. That way, the grid itself will get smaller when the text is smaller so that the rectangle is always at the edge of the text. </p> <pre><code>&lt;Grid x:Name="LayoutRoot" MaxWidth="500" HorizontalAlignment="Left" ShowGridLines="True" &gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="*" /&gt; &lt;ColumnDefinition Width="40"/&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;TextBlock x:Name="textBlock" VerticalAlignment="Top" Height="25" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="0" &gt; &lt;TextBlock.Text&gt;longer keeps going and going testgrand you going and then t&lt;/TextBlock.Text&gt; &lt;/TextBlock&gt; &lt;Rectangle Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41" Width="41" Grid.Column="1"/&gt; &lt;/Grid&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload