I was trying to create a control with two TextBlock>
s, having a "Show more" & "Show less" functionality. Considering an initial threshold X
, if the TextBlock
's height is bigger than the Threshdold, the TextBlock
will be resized to the Threshold's value (collapse till hits the value). Clicking again, would expand the TextBlock
to MaxHeight="Auto"
.
Here's what I tried so far :
<StackPanel>
<TextBlock x:Name="ResizeableTextBlock"
Text="{Binding Description}"
TextWrapping="Wrap" MaxHeight="{Binding ResizeThreshold}"/>
<TextBlock Text="{Binding ResizeLabel}"
Foreground="{StaticResource PhoneAccentBrush}"
Tapped="OnResizeLabelTapped"/>
</StackPanel>
and the Tapped
event handler would look like this :
private void OnResizeLabelTapped(object sender, TappedRoutedEventArgs e)
{
if (ResizeableTextBlock.ActualHeight > viewModel.ResizeThreshold)
{
ResizeableTextBlock.MaxHeight = ResizeThreshold;
ResizeLabel = ShowLessLabel;
}
else if (ResizeableTextBlock.ActualHeight < viewModel.ResizeThreshold)
{
ResizeableTextBlock.ClearValue(MaxHeightProperty);
ResizeLabel = ShowMoreLabel;
}
}
The issue with this approach is that the ActualHeight
of an element is most likely slightly different than the Height
assigned initially to the element.
For example, setting Height = 200
, and then querying the ActualHeight
value, results in a value similar to 201.00747494...
because of all the calculations done by the system and the layout.
Any ideas on a more reliable approach?
P.S. There's also a nice property MaxLines
which gives exactly what I need but going with this path is not quite helpful, because I still need to determine initally whether the "Show More" or "show Less" has to be applied and... MaxLines
is just a setter, there isn't something like "CurrentLines" getter to compare with.