Click here to Skip to main content
15,125,074 members
Articles / Desktop Programming / WPF
Posted 7 Nov 2011

Tagged as


21 bookmarked

iOS UIPickerView-like control in WPF

Rate me:
Please Sign up or sign in to vote.
4.95/5 (15 votes)
7 Nov 2011CPOL3 min read
Sample code and walkthrough for creating a UIPickerView (the "tumblers" UI common on the iPhone) control in WPF.


In this article, I will describe a UIPickerView-like control I created using WPF. The UIPickerView is an iOS control for picking an item from a list via a tumbler. Typically, this control is associated with touch input, but I have found it to work well with the mouse as well. I can envision it being potentially useful in a desktop application, especially if a touch-enabled monitor is part of the system.



A couple of months ago, while writing an article on user interface design, I was trying to think of different ways to construct a date/time control. One of the ideas I came up with was to use tumblers for the different date/time parts, just like in a UIPickerView control. During that exploration, I created a prototype WPF implementation. I have decided to clean up that prototype and share it with the CodeProject community.

Using the Code

Using the control is pretty straightforward. Simply include the WpfUIPickerLib namespace in your XAML file and create a WpfUIPickerControl element. There are only two custom dependency properties you need to be aware of:

  • AlwaysOpen: If set to True, WpfUIPickerControl will always be open and the tumblers will be visible. If set to False (the default), the control will look like a textbox displaying only the selected value(s). Clicking on the control will open it and the tumblers will then become visible, enabling the user to pick a new value. Clicking anywhere outside the control will close it (if AlwaysOpen is False).
  • Tumblers: This dependency property is a list of WpfUIPickerLib.TumblerData objects that represent the different tumblers you want to display. Each TumblerData instance represents a different tumbler in the control.

The following XAML demonstrates including the WpfUIPickerLib namespace and how to declare a WpfUIPickerControl object:

<Window x:Class="WpfUIPicker.MainWindow"
        Title="MainWindow" Height="300" Width="325"
        <TextBlock Text="WpfUIPickerControl with AlwaysOpen set to True" 
               HorizontalAlignment="Center" />
        <wpfui:WpfUIPickerControl HorizontalAlignment="Center" AlwaysOpen="True" 
           Tumblers="{Binding ApparelTumblers, ElementName=thisWnd}" />
        <TextBlock Text="WpfUIPickerControl with AlwaysOpen set to False" 
           HorizontalAlignment="Center" Margin="0,20,0,0"/>
        <wpfui:WpfUIPickerControl HorizontalAlignment="Center" 
           AlwaysOpen="False" Tumblers="{Binding DateTimeTumblers, ElementName=thisWnd}" />

The TumblerData object is a thin wrapper around the list of values you want to display in a single tumbler (ToString will be called on each value). It is needed by the control to trigger updates, to get/set the selected value, and to display a "seperator" (optional). Because I originally created this control for date/time, I wanted the "closed" version of the control to be able to display string tokens between tumbler values. For example, if I created three tumblers for the date (month, day, year), and the user picked 9 for the month, 5 for the day, and 2005 for the year, then I wanted the closed version of the control to display "09/05/2005". To support this usage, you can just set the string "/" to be the separator in the TumblerData object for the month and day tumblers. The TumblerData.Seperator property is ignored if the control is set to AlwaysOpen=true.

The following code demonstrates how to create TumblerData objects for a date/time implementation that supports dates from 1/1/1990 to 12/31/2011:

public List<TumblerData> DateTimeTumblers
        List<TumblerData> retVal = new List<TumblerData>();
        List<int> years = new List<int>();
        for (int i = 1990; i < 2012; ++i)

        List<string> months = new List<string>();
        for (int i = 1; i <= 12; ++i)
            months.Add(String.Format("{0:d2}", i));

        List<string> days = new List<string>();
        for (int i = 1; i <= 31; ++i)
            days.Add(String.Format("{0:d2}", i));

        List<string> hours = new List<string>();
        for (int i = 1; i <= 12; ++i)
            hours.Add(String.Format("{0:d2}", i));

        List<string> min = new List<string>();
        for (int i = 0; i < 60; ++i)
            min.Add(String.Format("{0:d2}", i));

        retVal.Add(new TumblerData(months, 8, "/"));
        retVal.Add(new TumblerData(days, 4, "/"));
        retVal.Add(new TumblerData(years, 12, ""));
        retVal.Add(new TumblerData(hours, 10, ":"));
        retVal.Add(new TumblerData(min, 0, ""));
        retVal.Add(new TumblerData(
               new string[] { "AM", "PM" }.ToList<object>(), 0, ""));
        return retVal;

Points of Interest

WpfUIPickerControl supports three different ways to change the value of a tumbler: drag, mouse wheel, and just click on the desired value. The control implements "closed" by hiding non-selected values (hence the funky binding in the valueTemplate). Each tumbler is rendered as a StackPanel within a grid on a canvas. Drag is implemented by changing the Canvas.Top property on the grid.


The first iPhone was unveiled by Steve Jobs on January 9, 2007.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Mike Heydlauf
Team Leader Siemens
United States United States
Mike Heydlauf is a Principal Informatics Engineer and Software Development Manager for Siemens Healthcare Diagnostics.

Mike is also a fisherman, a Brazilian Jiu Jitsu purple belt, a computer science hobbyist, a user experience evangelist, a mixed martial arts fight promoter, and a heck of a nice guy.

In his free time he enjoys spending time with his family and writing about himself in the third person.

A couple of Mike's personal software projects:

A physics-based puzzle game in WPF:

A fun little practical joke App for the iPhone:

Comments and Discussions

QuestionAdding Control to Windows Form Application Pin
Member 1357506921-Jan-18 8:51
MemberMember 1357506921-Jan-18 8:51 
QuestionSelecting Item From the Template Pin
sharril28-Jun-16 17:42
Membersharril28-Jun-16 17:42 
QuestionBinding selected values Pin
Adesse1-Feb-16 7:12
professionalAdesse1-Feb-16 7:12 
Questionchanging the number of elements on top - possible? Pin
danny04832-Sep-15 4:09
Memberdanny04832-Sep-15 4:09 
QuestionA great control but could it be adapted....... Pin
Member 1057627729-May-15 1:31
MemberMember 1057627729-May-15 1:31 
BugStrange view after changing Tumblers Pin
Member 1156004427-Mar-15 3:57
MemberMember 1156004427-Mar-15 3:57 
GeneralRe: Strange view after changing Tumblers Pin
Mike Heydlauf27-Mar-15 8:36
professionalMike Heydlauf27-Mar-15 8:36 
QuestionWhere is the difference between C# & working with List variables Pin
Member 103541723-Feb-15 3:48
MemberMember 103541723-Feb-15 3:48 
AnswerRe: Where is the difference between C# & working with List variables Pin
Mike Heydlauf3-Feb-15 11:35
professionalMike Heydlauf3-Feb-15 11:35 
GeneralRe: Where is the difference between C# & working with List variables Pin
Member 103541724-Feb-15 0:30
MemberMember 103541724-Feb-15 0:30 
QuestionHow can I prevent wrong Culture Infos Pin
Member 1035417229-Jan-15 0:36
MemberMember 1035417229-Jan-15 0:36 
AnswerRe: How can I prevent wrong Culture Infos Pin
Mike Heydlauf29-Jan-15 5:57
professionalMike Heydlauf29-Jan-15 5:57 
QuestionNull Reference Exception Pin
tpoal14-Sep-14 3:19
Membertpoal14-Sep-14 3:19 
AnswerRe: Null Reference Exception Pin
Member 103541723-Feb-15 3:57
MemberMember 103541723-Feb-15 3:57 
QuestionHow to update selected value from code Pin
Jacco Dieleman3-Apr-14 2:12
MemberJacco Dieleman3-Apr-14 2:12 
AnswerRe: How to update selected value from code Pin
Mike Heydlauf3-Apr-14 6:33
professionalMike Heydlauf3-Apr-14 6:33 
QuestionThe tumblers doesn't update after set new ones Pin
Haytham Katby26-Mar-13 3:45
MemberHaytham Katby26-Mar-13 3:45 
AnswerRe: The tumblers doesn't update after set new ones Pin
Mike Heydlauf29-Jan-15 6:00
professionalMike Heydlauf29-Jan-15 6:00 
GeneralMy vote of 2 Pin
Haytham Katby26-Mar-13 3:40
MemberHaytham Katby26-Mar-13 3:40 
GeneralRe: My vote of 2 Pin
Mike Heydlauf26-Mar-13 4:51
professionalMike Heydlauf26-Mar-13 4:51 
GeneralMy vote of 4 Pin
Marco Balestri15-Nov-11 0:22
MemberMarco Balestri15-Nov-11 0:22 
AnswerRe: My vote of 4 Pin
Mike Heydlauf17-Nov-11 5:59
professionalMike Heydlauf17-Nov-11 5:59 
QuestionWindows Phone 7 Silverlight Pin
Rodrigo Ratan [R2]14-Nov-11 9:48
MemberRodrigo Ratan [R2]14-Nov-11 9:48 
GeneralMy vote of 5 Pin
SledgeHammer018-Nov-11 15:11
MemberSledgeHammer018-Nov-11 15:11 
QuestionImages Pin
Dave Kerr8-Nov-11 0:19
mentorDave Kerr8-Nov-11 0:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.