The first time I saw this control I was amazed. Really slick UX, I told myself.
So I set out to use it. But.. can’t find it in the toolbox of VS2012.. such sadness and grief. So I go and research some more, and found that it was called a CarouselPanel. Nice!
Had some trouble getting it to work, specially on the UI. So to save you the trouble, here is how it goes:
So, open up visual studio and create a new store app..
Then add a combobox to it and modify the xaml to look like this:
<ComboBox x:Name=”CarouselContainer” Background=”Transparent” Height=”50″ Width=”50″
Aight, that, you can populate any way you want. Either through C# or xaml, whatever floats your boat.
Then using Visual Studio, while in design view.. do the following:
1. Rightclick the combobox
2. In the appearing popup, highlight Edit Template. this will trigger another panel where
3. you click Edit a Copy. This will open up a dialog. It will ask you for a name, remember it. You can also choose to apply whatever styling you will be creating to All comboboxes or just the one you are creating.
This “template” thingie can be viewed as the styling of the control. So in essence, what you will be doing is taking the combobox apart and modifying it to look like what you want.
4. So, what you just did results in VS adding a huge chunk of code showing you how the combobox is drawn. (in a nutshell) and you will need to observe some stuff. If you can’t find it, it will be here
<Style x:Key=”ComboBoxStyle1″ TargetType=”ComboBox”>
Looks logical right? It is a stlye called ComboBoxStyle1 that applies to a control of type ComboBox.
So sniff around a bit, click on the combobox and see how the Xaml shows that it is actually composed of a Grid with two columns. The column on the left holds the stuff that you will bind to your combobox, and the column on the right holds that button with a dropdown arrow (which is actually a glyph).
Next task is to determine how to remove the dropdown arrow from the combobox. Hey, it will be a store application UI so I want to remove that, and like I said in the first sentence, I want to copy a control that I saw on my phone.
5. Set the column that holds the button to Width=0. This will hide the button. Don’t worry about re sizing the column on the left, it’s width is defined as a star, so it will automatically widen to take all available space.
your resulting xaml will be
And with that, all you need to do next is to set the vertical and horizontal alignment of the ContentPresenter to Center.
You can bind or populate this any way is most comfortable to you. And you can still hook the selected*.* events to their respective triggers.