In this example we will look at how to create an expandable text block for a Windows 10 application. I want a control on which I tell it its default height before it is expended and of course the text that need to be shown, a control that has a XAML code that looks like this:
And that looks like this when its collapsed:
And like this when it is expended:
Let get coding:
First we will need to create a UserControl named ExpandableTextBlock, this control will contain one grid that holds 2 text blocks on that will hold our text and the other one that will hold our button or text that tells the user to click if he wishes to see the text.
Here is the XAML code:
We will need to create two DependencyProperty called Text and CollapsedHeight which will allow you to pass the Text and the Height of your textblock to the UserControl.
in the OnTextChanged method you can see that we check to see if we need to show the hint that there is more text or not, as you can imagine it is pointless to show to the user an element saying that there is more text is there is not really more text.
and lastly we now need to create the méthode linked to the LayoutRoot_OnTap event, this methode will have to check to see if the content is fully visible or not and if not then show the whole content.
And there you have it, when the user clicks on the text block it will show the reste of the text.
You could add a third DependencyProperty that would allow you to manage the width of your text block thus instead of having the textblock taking the whole width of the screen like this:
You could use a DependencyProperty to set the width.
Or you could also add another DependencyProperty which could manage the style of the TextBlock like this:
you can find the Github code here