List of colors in a ComboBox with a difference style for the selected item and items in the dropdown

Question

Forum,

I'm struggling with trying to make a font color selection control that is just about like the one you might see in, say, WordPad in a Metro style app.  Specifically, I am trying to make a ComboBox with one style for the selected item (basically the letter A in the currently selected color) and a second for the color list (something like boxes with the name of the color following).  I can't seem to get things bound correctly.  I just see blank items and a drop down full of blanks the length of my color list.  What am I dong wrong?

The C# code:

List<ColorNamePair> pairList = new List<ColorNamePair>();    
foreach (PropertyInfo item in typeof(Colors).GetTypeInfo().DeclaredProperties)
            {
                Color currentColor = (Color)item.GetValue(null);
                ColorNamePair currentPair = new ColorNamePair();
                currentPair.color = currentColor;
                currentPair.name = currentColor.ToString();
                pairList.Add(currentPair);
            }
            btnFgc.ItemsSource = pairList.OrderBy((p) => -1 * (p.color.R + p.color.G + p.color.B + p.color.A));
            btnFgc.SelectedIndex = 0;

My XAML:

<UserControl.Resources>
        <ControlTemplate x:Key="ForegroundColorTemplate" TargetType="ComboBoxItem">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding name}">
                    <TextBlock.Foreground>
                        <SolidColorBrush Color="{Binding color}"/>
                    </TextBlock.Foreground>
                </TextBlock>
            </StackPanel>
        </ControlTemplate>
    </UserControl.Resources>
<!--snip-->
<ComboBox Name="btnFgc" BorderThickness="0" Padding="2" Margin="5,10,5,10" 
                      SelectionChanged="btnFgc_SelectionChanged" 
                      >
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <!--<Rectangle Width="20" Height="20" Fill="{Binding SelectedItem}" />-->
                            <TextBlock Text="{Binding name}" />
                        </StackPanel>
                        
                    </DataTemplate>
                </ComboBox.ItemTemplate>
                <ComboBox.ItemContainerStyle>
                    <Style TargetType="ComboBoxItem">
                        <Setter Property="Template" Value="{StaticResource ForegroundColorTemplate}"/>
                    </Style>
                </ComboBox.ItemContainerStyle>
            </ComboBox>

Thanks in advance!

ila

Answer 1

I'd start with the default templates and then edit those. If you choose to edit the template from the Xaml designer it will create and hook up a copy for you. You can then replace the ContentPresenter with the Xaml you want for your static header and the ItemTemplate with the drop-down information.

For the dropdown you'll have an ItemTemplate something like the following: Brush is a property on your pairList which returns a Brush (you could use an IValueConverter to convert from a Color to a Brush) and Name is a property returning the color name:

            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Rectangle Width="20" Height="20" Stroke="Black" Fill="{Binding Path=Brush}" />
                            <TextBlock  Text="{Binding Path=Name}" />
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>

--Rob