How to make a Carousel control for Windows 8 using C#

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″
ScrollViewer.IsVerticalScrollChainingEnabled=”True”
ScrollViewer.VerticalScrollBarVisibility=”Hidden”>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<CarouselPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ComboBox>

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

<Page.Resources>
<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).

<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate TargetType=”ComboBox”>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”32″/>
</Grid.ColumnDefinitions>

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

<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”0″/>
</Grid.ColumnDefinitions>

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.

 

Enjoy!

 

 

 

Advertisements
This entry was posted in Computers and Internet. Bookmark the permalink.

2 Responses to How to make a Carousel control for Windows 8 using C#

  1. Atley says:

    Can you leave a sample?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s