Intro

Drop down selector can be used in scenarios when a user has to choose an option from a short list of values, but it doesn’t make any sense to show the whole list of values at a page. Can be useful to choose a sorting order or a filter:

There is no a similar control in UWP SDK. How to build a custom one? My intent in this article is to demonstrate how to do it with few lines of code, using based UI elements.

Base properties

Let’s name the new control DropDownButton and inherit it from Windows.UI.Xaml.Controls.Control. As usual, in the default constructor, it’s required to define DefaultStyleKey, in order to apply a style defined in Generics.xaml file:

1

2

3

4

5

6

publicDropDownButton()

{

DefaultStyleKey=typeof(DropDownButton);

}

DropDownButton needs at least ItemsSource, ItemTemplate and SelectedItem. These properties allow to bind data, apply custom view for a data item and use a selected value. And of course, they supposed to be dependency properties:

There are two visual states defined in the template, PointerDown and PointerUp. They used to show when a user taps the control. I manage the animation with overridden OnPointerPressed and OnPointerReleased methods:

Codebehind

The core logic of the control is to show the list with available options, select an option, show the selected value an close the list on user tap outside of the control boundaries.

The easiest part is to open the list with items. To achieve that, I subscribe on Tapped event and call FlyoutBase.ShowAttachedFlyout in the event handler:

1

2

3

4

5

6

7

8

9

10

11

12

13

publicDropDownButton()

{

DefaultStyleKey=typeof(DropDownButton);

Tapped+=DropDownButtonTapped;

}

privatevoidDropDownButtonTapped(objectsender,TappedRoutedEventArgse)

{

if(_rootGrid!=null)

FlyoutBase.ShowAttachedFlyout(_rootGrid);

}

Another substantial part of any custom control is OnApplyTemplate method. This method is the entry point to subscribe for events of the elements, defined in the control template. It’s very important to have this method written correctly: