A time ago I had a requirement about an expendable paragraph control to support show/hide text when clicking into a button, that way the text is not fully displayed on the screen, and we can save space in the screen.
I’m this article I’m going to show you how to do it.
Let’s start step by step
The first thing we are going to do is to create a new ContentView class for our control -> ExpandParagraphControl.
In this class we are going to add all the properties we need in order to customize the paragraph:
- Text: Paragraph Text
- TextFontSize: Pagrapraph Font Size
- TextFontAttributes: Paragraph Font Attribute (Italic, Bold, etc)
- TextColor: Pagrapah Text Color
- ButtonTextColor: More button text color
- DefaultButtonTitle: It by default is “More”, but you can change it if you want.
- ExpandedButtonTitle: It by default is “Hide”, but you can change it if you want.
- DefaultVisibleLines: It by default is “3”, but you can change it if you want.
- IsExpanded: Property to indicate when the paragraph IsExpanded.
- MoreCommand: Command to show/hide, it can be overridable.
Now let’s add the UI of our control:
Let’s use it:
And that’s all, you can check the full source code used here.
Happy coding!
