Change MaxLength on click

How-to Discussions
1

Hello!
I want to change the MaxLength from 150 to 300 when you clicked on the Rectangle, but the change doesn’t happen. It workes if I want to change the Margin for example. Why’s that?

<Paragraph ux:Name="ReadMoreText" Value="{text}" Margin="20,0,20,20" IsReadOnly="True" MaxLength="150"  />
<Rectangle Background="Black" Width="40%" Height="40" Alignment="TopLeft" Margin="20,0,0,0">
   <Stroke Width="1" Color="White" />
   <Clicked>
      <Change ReadMoreText.MaxLength="300" Duration="0.3" />
   </Clicked>
</Rectangle>
2

I’m guessing that Paragraph extends from Text. Please include such important details.

Changing Text.MaxLength in UX during run-time isn’t desired, because rendering (and re-rendering) text is expensive.

You have two options here:

  1. Change the actual {text} in JavaScript from a callback function to show less/more characters. I imagine using .map on an Observable boolean for this would work out nicely.
  2. Set ClipToBounds="true" on a parent, and Change the height of the clipping element to reveal the hidden content.

Hope this helps!

3

Thanks! I will include it the next time!