A Foldable Content Control For UWP

This is a content control, which you can fold and expand by tapping on its header.

One of the last projects which I did was coding the design of an enterprise app. 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). Thus, I had to create a one from scratch. With the time limitation in mind, I decided to go with a user control. The final outcome was not too bad. Hence, I decided to share it with the community.

 

 

 

Properties 

 

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, as shown 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, which 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 a ItemsControl simply binds the ‘Count’ property with a value converter).

You can find the source code in my GitHub repo.