I'm using a ComboBox control in my app. I understand that there is no supported Metro theme for it - but a ComboBox fits my needs perfectly, so here we are... So my predicament is that I need to create a metro theme from scratch or I need to spend like 2 days to recreate the ComboBox control. I tried the first option (creating a metro theme) but am having some problems:
- The text is always white - cant figure out how to set this.
- I can not change the color of the selection box (not the drop down list)
- I can not change the color of the drop down list
I've played around with Blend for HOURS and can't see how to change these values. Any help much appreciated. Here's my current style:
<Style x:Key="ComboBoxItemStyle" TargetType="ComboBoxItem">
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border x:Name="LayoutRoot"
BorderThickness="{TemplateBinding BorderThickness}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected"/>
<VisualState x:Name="SelectedUnfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="LayoutStates">
<VisualState x:Name="AfterLoaded"/>
<VisualState x:Name="BeforeLoaded"/>
<VisualState x:Name="BeforeUnloaded"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer"
Background="Yellow"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Foreground="{StaticResource PhoneAccentBrush}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ItemsPanelTemplate x:Key="ComboxBoxItemsTemplate">
<StackPanel Background="Green"/>
</ItemsPanelTemplate>
<Style x:Key="ComboBoxStyle" TargetType="ComboBox">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="ItemContainerStyle" Value="{StaticResource ComboBoxItemStyle}" />
<Setter Property="ItemsPanel" Value="{StaticResource ComboxBoxItemsTemplate}" />
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<!-- The hue of the combo box selection box (not the drop down) -->
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
<!-- Effects BorderBrush for selection box and drop down -->
<Setter Property="BorderBrush" Value="Transparent"/>
<!-- Effects BorderThickness for selection box and drop down -->
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="6"/>
</Style>