views:

137

answers:

1

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:

  1. The text is always white - cant figure out how to set this.
  2. I can not change the color of the selection box (not the drop down list)
  3. 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>
A: 

Side stepping your actual question, Alex Yakhnin has created a ListPicker control which may act as a suitable alternative for you. It also matches the metro style very well.
It's also Open Source, so you could dive into the code to see how he handled the theming.

Matt Lacey
Great, exactly what I was looking for. Will take a look and get back.
will
Seems to be exactly what I was after. Thanks for the pointer... Incidentally, seems kind of crazy that the tools don't ship with something as basic as a ComboBox-like control. Seems like a pretty fundamental asset in UI design...
will
I think the primary thinking the MS team had was "how do we ship a solid core?" UI Elements like this, while really, really nice to have, can be delivered out of the box (like Alex's blog, etc). Core funtionality, on the other hand, has to go through all of the QA and testing of the platform, and then it has to wait for the entire beast to be ready to ship. I think shipping out-of-band via blogs, Codeplex, etc is actually perferrable, as it allows much faster publication and upgrading of features than waiting for official releases.
ctacke
Hi Will, The team is consulting with the community now on controls to be included in the Windows Phone Developer Toolkit. ListPicker has been raised.
Mick N
Thanks Mick. Just curious, how are you guys consulting with community? Is there a page I can go to to add my wish list? Thanks,
will