Metro-style ComboBox for Windows Phone 7

Windows Phone 7 development tools come with a handy set of default controls that can be used in Windows Phone 7 applications. All of them are styled in compliance with the Metro UI layout, but one control – the ComboBox. It is pretty much styled like a regular Silverlight ComboBox:

Although this control is not directly available from the Visual Studio toolbox (or the Expression Blend 4 for Windows Phone 7 toolbox for that matter) you can add it directly via XAML. It doesn’t look too appealing, especially if you use other Metro-styled controls in your application.

That blue gradient is ruining the overall user experience. And although you can easily modify the ItemTemplate therefore setting the correct grid border and background color, the base selector will remain the same. What you can do here is create a custom control template based on the existing “skeleton”. The overall base template is quite large so here I might use some help from Expression Blend.

NOTE: By default, I cannot work with the ComboBox control in Expression Blend 4 for Windows Phone 7, therefore I am using the full version of Expression Blend 4 in the context of a Silverlight application.

Once I created a Silverlight project, I simply inserted a regular ComboBox control on the page:

Now I need to specify that this control should not follow the assigned template structure but rather let me customize it to the maximum. I need to edit the default template by creating a copy of the initial one. This can be done by right-clicking on the control in the Objects and Timeline tab and selecting Edit Template > Edit a Copy…

Once prompted to enter the name, enter whatever name you want to identify your template. I defined the template in the context of the initial document:

Once done, you will see that the actual control is now separated in a set of unique elements that correspond to various functionality tied to the ComboBox:

Now I am able to expand the ContentPresenterBorder and select the DropDownToggle that is a member of the container Grid:

The DropDownToggle is what the user sees before actually clicking on the ComboBox. I need to disable the default template. In the properties tab, there is the Miscellaneous section. In that section there is the Template property:

Click the square on the right from the property value field. This will open the Advanced Options menu:

Convert to Local Value is the option I need. This will cancel the existing template and will allow me to customize each property specific to the DropDownToggle. Now I can select the initial container Grid and customize its background. Basically, I set the brush to Black:

Since the control is a bit larger that the regular ComboBox, it makes sense to make the selection arrow also a bit larger than the standard one. If I expand the DropDownToggle, there is BtnArrow:

In the Properties tab I can select its fill color(in my case I set it to white, to follow the theme conventions):

Also, I modified its Height and Width properties to be larger, as well as the right margin, since there will be a white border around the control:

Let’s actually edit the border now. In the Objects and Timeline tab, select ContentPresenterBorder:

By default, there are no brushes set for the border, as well as the border thickness is set to zero.

Set the BorderBrush property to white and define the border a bit thicker (a value of 2 or 3 should work just fine, but you can adapt it depending on the circumstances).

Now you can actually modify the Popup - the list that is being shown when the user wants to select an item. But it’s not the Popup that defines the looks of the list, but rather the embedded ScrollViewer, so I expand the Popup element in my Objects and Timeline list till I reach the ScrollViewer component. Same as with the border discussed above, there is no default brush defined for the background color.

I am going to set the background to black and the border to white, so that it fits the theme (once again):

Don’t forget about setting the proper border thickness. Now, you have the base control template defined in a Metro style. To try it out, go to Visual Studio and create a sample Windows Phone 7 application (you can still use Expression Blend 4 for Windows Phone 7 if you like it) and insert a ComboBox control on your page. Define its control template based on the XAML you obtained from Expression Blend.

Here is how the control template looked for my Metro-style ComboBox:

<ControlTemplate TargetType="ComboBox">
<Grid>
	<Grid.Resources>
		<Style x:Name="comboToggleStyle" TargetType="ToggleButton">
			<Setter Property="Foreground" Value="#FF333333"/>
			<Setter Property="Background" Value="#FF1F3B53"/>
			<Setter Property="BorderBrush">
				<Setter.Value>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
					</LinearGradientBrush>
				</Setter.Value>
			</Setter>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="Padding" Value="3"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ToggleButton">
<Grid>
	<VisualStateManager.VisualStateGroups>
		<VisualStateGroup x:Name="CommonStates">
			<VisualState x:Name="Normal"/>
			<VisualState x:Name="MouseOver">
				<Storyboard>
					<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundOverlay"/>
					<ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
					<ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
					<ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
				</Storyboard>
			</VisualState>
			<VisualState x:Name="Pressed">
				<Storyboard>
					<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundOverlay2"/>
					<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Highlight"/>
					<ColorAnimation Duration="0" To="#E5FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
					<ColorAnimation Duration="0" To="#BCFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
					<ColorAnimation Duration="0" To="#6BFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
					<ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
				</Storyboard>
			</VisualState>
			<VisualState x:Name="Disabled"/>
		</VisualStateGroup>
		<VisualStateGroup x:Name="CheckStates">
			<VisualState x:Name="Checked">
				<Storyboard>
					<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BackgroundOverlay3"/>
					<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Highlight"/>
					<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BackgroundGradient2"/>
					<ColorAnimation Duration="0" To="#E5FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient2"/>
					<ColorAnimation Duration="0" To="#BCFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient2"/>
					<ColorAnimation Duration="0" To="#6BFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient2"/>
					<ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient2"/>
				</Storyboard>
			</VisualState>
			<VisualState x:Name="Unchecked"/>
		</VisualStateGroup>
		<VisualStateGroup x:Name="FocusStates">
			<VisualState x:Name="Focused">
				<Storyboard>
					<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
	<DiscreteObjectKeyFrame.Value>
		<Visibility>Visible</Visibility>
	</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
					</ObjectAnimationUsingKeyFrames>
				</Storyboard>
			</VisualState>
			<VisualState x:Name="Unfocused"/>
		</VisualStateGroup>
	</VisualStateManager.VisualStateGroups>
	<Rectangle x:Name="Background" Fill="{TemplateBinding Background}" RadiusY="3" RadiusX="3" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/>
	<Rectangle x:Name="BackgroundOverlay" Fill="#FF448DCA" Opacity="0" RadiusY="3" RadiusX="3" Stroke="#00000000" StrokeThickness="{TemplateBinding BorderThickness}"/>
	<Rectangle x:Name="BackgroundOverlay2" Fill="#FF448DCA" Opacity="0" RadiusY="3" RadiusX="3" Stroke="#00000000" StrokeThickness="{TemplateBinding BorderThickness}"/>
	<Rectangle x:Name="BackgroundGradient" Margin="{TemplateBinding BorderThickness}" RadiusY="2" RadiusX="2" Stroke="#FFFFFFFF" StrokeThickness="1">
		<Rectangle.Fill>
			<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
				<GradientStop Color="#FFFFFFFF" Offset="0"/>
				<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
				<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
				<GradientStop Color="#C6FFFFFF" Offset="1"/>
			</LinearGradientBrush>
		</Rectangle.Fill>
	</Rectangle>
	<Rectangle x:Name="BackgroundOverlay3" Fill="#FF448DCA" Opacity="0" RadiusY="3" RadiusX="3" Stroke="#00000000" StrokeThickness="{TemplateBinding BorderThickness}"/>
	<Rectangle x:Name="BackgroundGradient2" Margin="{TemplateBinding BorderThickness}" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FFFFFFFF" StrokeThickness="1">
		<Rectangle.Fill>
			<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
				<GradientStop Color="#FFFFFFFF" Offset="0"/>
				<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
				<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
				<GradientStop Color="#C6FFFFFF" Offset="1"/>
			</LinearGradientBrush>
		</Rectangle.Fill>
	</Rectangle>
	<Rectangle x:Name="Highlight" IsHitTestVisible="false" Margin="{TemplateBinding BorderThickness}" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
	<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
	<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" RadiusY="3.5" RadiusX="3.5" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Grid.Resources>
	<VisualStateManager.VisualStateGroups>
		<VisualStateGroup x:Name="CommonStates">
			<VisualState x:Name="Normal"/>
			<VisualState x:Name="MouseOver"/>
			<VisualState x:Name="Disabled">
				<Storyboard>
					<DoubleAnimation Duration="00:00:00" To=".55" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualElement"/>
				</Storyboard>
			</VisualState>
		</VisualStateGroup>
		<VisualStateGroup x:Name="FocusStates">
			<VisualState x:Name="Focused">
				<Storyboard>
					<DoubleAnimation Duration="00:00:00" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusVisualElement"/>
				</Storyboard>
			</VisualState>
			<VisualState x:Name="Unfocused"/>
			<VisualState x:Name="FocusedDropDown">
				<Storyboard>
					<ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PopupBorder">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
	<DiscreteObjectKeyFrame.Value>
		<Visibility>Visible</Visibility>
	</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
					</ObjectAnimationUsingKeyFrames>
				</Storyboard>
			</VisualState>
		</VisualStateGroup>
		<VisualStateGroup x:Name="ValidationStates">
			<VisualState x:Name="Valid"/>
			<VisualState x:Name="InvalidUnfocused">
				<Storyboard>
					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
	<DiscreteObjectKeyFrame.Value>
		<Visibility>Visible</Visibility>
	</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
					</ObjectAnimationUsingKeyFrames>
				</Storyboard>
			</VisualState>
			<VisualState x:Name="InvalidFocused">
				<Storyboard>
					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
	<DiscreteObjectKeyFrame.Value>
		<Visibility>Visible</Visibility>
	</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
					</ObjectAnimationUsingKeyFrames>
					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
	<DiscreteObjectKeyFrame.Value>
		<System:Boolean>True</System:Boolean>
	</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
					</ObjectAnimationUsingKeyFrames>
				</Storyboard>
			</VisualState>
		</VisualStateGroup>
	</VisualStateManager.VisualStateGroups>
	<Border x:Name="ContentPresenterBorder" BorderBrush="White" BorderThickness="2">
		<Grid Background="Black">
			<ToggleButton x:Name="DropDownToggle" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Right" Margin="0" Style="{StaticResource comboToggleStyle}" VerticalAlignment="Stretch">
				<ToggleButton.Template>
					<ControlTemplate TargetType="ToggleButton"/>
				</ToggleButton.Template>
				<Path x:Name="BtnArrow" Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z " HorizontalAlignment="Right" Height="25" Margin="0,0,15,0" Stretch="Uniform" Width="20">
					<Path.Fill>
<SolidColorBrush x:Name="BtnArrowColor" Color="White"/>
					</Path.Fill>
				</Path>
			</ToggleButton>
			<ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
				<TextBlock Text=" "/>
			</ContentPresenter>
		</Grid>
	</Border>
	<Rectangle x:Name="DisabledVisualElement" Fill="White" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
	<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
	<Border x:Name="ValidationErrorElement" BorderBrush="#FFDB000C" BorderThickness="1" CornerRadius="1" Visibility="Collapsed">
		<ToolTipService.ToolTip>
			<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}">
				<ToolTip.Triggers>
					<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
	<Storyboard>
		<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
			<DiscreteObjectKeyFrame KeyTime="0">
				<DiscreteObjectKeyFrame.Value>
					<System:Boolean>true</System:Boolean>
				</DiscreteObjectKeyFrame.Value>
			</DiscreteObjectKeyFrame>
		</ObjectAnimationUsingKeyFrames>
	</Storyboard>
</BeginStoryboard>
					</EventTrigger>
				</ToolTip.Triggers>
			</ToolTip>
		</ToolTipService.ToolTip>
		<Grid Background="Transparent" HorizontalAlignment="Right" Height="12" Margin="1,-4,-4,0" VerticalAlignment="Top" Width="12">
			<Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C" Margin="1,3,0,0"/>
			<Path Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff" Margin="1,3,0,0"/>
		</Grid>
	</Border>
	<Popup x:Name="Popup">
		<Border x:Name="PopupBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" HorizontalAlignment="Stretch" Height="Auto">
			<Border.Background>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FFFFFFFF" Offset="0"/>
					<GradientStop Color="#FFFEFEFE" Offset="1"/>
				</LinearGradientBrush>
			</Border.Background>
			<ScrollViewer x:Name="ScrollViewer" BorderThickness="2" Padding="1" Background="Black" BorderBrush="White">
				<ItemsPresenter/>
			</ScrollViewer>
		</Border>
	</Popup>
</Grid>
</ControlTemplate>

Now, in my test Windows Phone 7 application, I also set a custom ItemTemplate – of course, I have the ComboBox bound to an ObservableCollection to show how items are displayed. Before you proceed to launch the application, make sure you edit a line in your template:

<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}">

Remove the Template property reference. Otherwise, a runtime error will be thrown due to the fact that there is no registered resource named ValidationToolTipTemplate in your application. The edited line should look like this:

<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}">

Now launch your application and the ComboBox should closely resemble this:

Of course you can adjust the width of the popup for your needs, but you see that this kind of customized ComboBox is way more suitable for Metro-compatible UIs. This complete control overhaul saved me from using a third-party control - which, in my opinion, is a good thing.