A Foldable Content Control for UWP

Introduction

This is a Content Control which you can fold and expand by tapping on its header.

Background

One of the last projects I did was coding up the design of an enterprise app. And like in most enterprise apps, this app had a list which needs to be folded and expanded. But unfortunately, there was no such out of the box control in UWP (like we had in WPF). So I had to create one from scratch. And with the time limitation in mind, I decided to go with a User Control. Guess what, the final outcome was not too bad. So I decided to share it with the community.

Using the Code

You can use this control with any kind of framework element. It’s not just limited to a list. What you have to do is simply assign the property ‘FoldableContent’ to the content you want. Like below:

<controls:FoldableContentControl.FoldableContent>
    <ListView ItemsSource="{x:Bind MyItemList}">
        <ListView.ItemTemplate>
            <DataTemplate>
               <StackPanel BorderBrush="LightGray"
                        BorderThickness="0.5">
                    <TextBlock Text="{Binding}"
                           HorizontalAlignment="Center"
                           Padding="10"/>
               </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter  Property="Padding" Value="0"/>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>
</controls:FoldableContentControl.FoldableContent>

You can specify the content in the header from changing the ‘HeaderText’ property.

You can specify the content you want to display when there are no items in the content. Simply add a framework element to the ‘EmptyContent’ property or change the ‘EmptyText’ property. To display this emptiness, you have to set the ‘DisplayEmpty’ property to true (if an ItemsControl simply binds the ‘Count’ property with a value converter).

Points of Interest

You can find the source code in my GitHub repo.