Alright, content will be basically the same with a previous blog, but with screenshots this time J
So you want to create a nifty and rockin control for a Windows 8 Store application to choose a number. There are a few reasons to do this and not a textbox. First you want to limit the entries to only numbers. Second, you want it to give your app’s user a nice experience. Something like this:
So here goes:
Fire up Visual Studio and create a new Windows 8 Store application
Then in mainpage.xaml, drop in a combobox and add a carouselpanel control inside it, you should have xaml that might look like this:
<Grid Background=”{StaticResource ApplicationPageBackgroundThemeBrush}”>
<ComboBox x:Name=”myCarousel” Height=”100″ Width=”100″>
<ItemsPanelTemplate>
<CarouselPanel/>
</ItemsPanelTemplate>
</ComboBox>
</Grid>
In case you are the drag and drop type of guy, you won’t be able to see the CarouselPanel control in the toolbox. So you should type it in 
Then what you will need to do is to populate the list. You can choose whatever way you want but for this sample I will populate it in code.
Nothing fancy. Then run this and see what it looks like. Weird right? So let’s add a little formatting J
So you should have something like this in your xaml
<Grid Background=”{StaticResource ApplicationPageBackgroundThemeBrush}”>
<ComboBox x:Name=”myCarousel”
Background=”Transparent” Height=”50″ Width=”50″>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<CarouselPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ComboBox>
</Grid>
If you run and use this you will see that it does open up a control that displays the numbers
But what will mess you up is the fact that if you choose a number, it will be behind the Combobox’s button!
Here I have encircled what remains (or what is visible) of the number 8 when I chose it.
So what do you do now?
Solution is to remove the Combobox’s dropdown button. The search term “How to remove or hide combobox dropdown button” might work fine at this point, or just read on.
What we want to do now, is to take the combobox control apart and remove that button. Wait, before you fire up blend, please allow me to stop you, I will use Visual Studio for this.
A nice addition to Visual Studio is the ability to edit the template of a xaml control, much like the way you can do it in blend.
You right-click the control you want to edit the template of and chose edit
I chose to Edit a Copy
And I also chose to place the definition in the Resource dictionary, and to apply the style only to this textbox.
Why?
- Place it in a common place like StandardStyles.xaml, away from your current page’s xaml file. As template styles tend to be in the form of huge xaml codeblocks.
- I didn’t apply it to all, as it would have made ALL comboboxes devoid of a button.
And now to edit the style, but read it first!
Here we see that a combobox has items inside a grid with 2 columns. One is explicitly sized at 32 units, and the other is sized to adjust (*)
Solution to the problem, I change the size of the column where the button is to zero.
Save and run it again and you will no longer see the button, and be able to see the number you choose.
Kinda looks weird so we set the alignments to center the displayed number by changing the property of the ContentPresenter, still in the combobox style
<ContentPresenter x:Name=”ContentPresenter” HorizontalAlignment=”Center” Margin=”{TemplateBinding Padding}” VerticalAlignment=”{TemplateBinding VerticalContentAlignment}”/>
And you will have:
I would say that is centered quite nicely.
And with all that done, you now have a control that shows a set of numbers in a very nice UX. J
Enjoy!
