How do I style the selected/current/active ComboBoxItem in SIlverlight?

Question

For some reason, the selected items in the ComboBoxes are not styled at all. Here is my user control resources

 <UserControl.Resources>
        <Style x:Key="cmbox" TargetType="ComboBox">
            <Setter Property="Background" Value="#3A3D9E"/>
            <Setter Property="Foreground" Value="DarkBlue"/>

        </Style>
        <Style x:Key="cmboxItem" TargetType="ComboBoxItem">
            <Setter Property="Background" Value="#3A3D9E"/>
            <Setter Property="BorderBrush" Value="AliceBlue"/>
            <Setter Property="Foreground" Value="DarkBlue"/>
        </Style>

And the code...

 <sdk:DataGridTextColumn Binding="{Binding Benamning}" Header="Benämning"/>
                            <sdk:DataGridTextColumn Binding="{Binding Antal}" Header="Antal"/>
                            <sdk:DataGridTemplateColumn Header="Item">
                                <sdk:DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <StackPanel>
                                            <StackPanel.Resources>
                                                <Style BasedOn="{StaticResource cmbox}" TargetType="ComboBox"/>
                                                <Style BasedOn="{StaticResource cmboxItem}" TargetType="ComboBoxItem"/>
                                            </StackPanel.Resources>
                                            <ComboBox SelectedIndex="0">
                                                <ComboBoxItem >Item1</ComboBoxItem>
                                                <ComboBoxItem >Item2</ComboBoxItem>
                                                <ComboBoxItem >Item3</ComboBoxItem>
                                            </ComboBox>
                                        </StackPanel>
                                    </DataTemplate>
                                </sdk:DataGridTemplateColumn.CellTemplate>
                            </sdk:DataGridTemplateColumn>
                                <sdk:DataGridTextColumn Binding="{Binding Dis_saldo}" Header="Disponibelt Saldo"/>
                </sdk:DataGrid.Columns>

PRINTSCREEN:

enter image description here

**EDIT: 2014-08-20 12:30 GMT. See my changes right here: **

  <sdk:DataGridTemplateColumn Header="Item">
                                <sdk:DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>

                                        <StackPanel>
                                            <StackPanel.Resources>
                                                <Style BasedOn="{StaticResource cmbox}" TargetType="ComboBox"/>
                                                <Style BasedOn="{StaticResource cmboxItem}" TargetType="ComboBoxItem"/>
                                            </StackPanel.Resources>
                                            <ComboBox  x:Name="TheCombo">
                                                <ComboBoxItem >Item1</ComboBoxItem>
                                                <ComboBoxItem >Item2</ComboBoxItem>
                                                <ComboBoxItem >Item3</ComboBoxItem>
                                            </ComboBox>
                                        </StackPanel>
                                    </DataTemplate>
                                </sdk:DataGridTemplateColumn.CellTemplate>
                                <sdk:DataGridTemplateColumn.CellEditingTemplate>
                                    <DataTemplate>
                                        <TextBlock  Text="{Binding SelectionBoxItem, ElementName=TheCombo}">
                                        </TextBlock>
                                    </DataTemplate>
                                </sdk:DataGridTemplateColumn.CellEditingTemplate>
                            </sdk:DataGridTemplateColumn>

Does not work :(

So far starters, you're probably going to want to incorporate a CellEditingTemplate along side your Cell Template so that control doesn't hijack your focus / tabbing order inside your DataGrid. As for the other part, what do you want your Selected Item to look like? It's all sitting in the Style Template for that control. — Chris W., Aug 19 '14 at 14:45

score 1 · Answer 1 · answered Aug 19 '14 at 15:05

Ok so your issue is you're only using a CellTemplate, you'll need to incorporate a CellEditingTemplate so your ComboBox only appears while that cell is being edited, YourComboBox appears to be behaving as expected (though not sure why you'd want such dark text on such a dark background) then when it's lost focus you'll see it look like everything else on your DataGrid. So (see comments also) something like;

<sdk:DataGridTextColumn Binding="{Binding Benamning}" Header="Benämning"/>
  <sdk:DataGridTextColumn Binding="{Binding Antal}" Header="Antal"/>
  <sdk:DataGridTemplateColumn Header="Item">
    <sdk:DataGridTemplateColumn.CellTemplate>
      <DataTemplate>
      <!-- PS, ya don't need this StackPanel but I'll leave it in here. -->
        <StackPanel>
          <StackPanel.Resources>
            <Style BasedOn="{StaticResource cmbox}" TargetType="ComboBox"/>
            <Style BasedOn="{StaticResource cmboxItem}" TargetType="ComboBoxItem"/>
          </StackPanel.Resources>
          <ComboBox SelectedIndex="0" x:Name="TheCombo">
            <ComboBoxItem >Item1</ComboBoxItem>
            <ComboBoxItem >Item2</ComboBoxItem>
            <ComboBoxItem >Item3</ComboBoxItem>
          </ComboBox>
        </StackPanel>
      </DataTemplate>
    </sdk:DataGridTemplateColumn.CellTemplate>
    <sdk:DataGridTemplateColumn.CellEditingTemplate>
      <DataTemplate>
        <!-- Not sure if it's SelectedValue, or SelectedItem, or Text, or whatever
             you'll need to bind to to display the selected item from your ComboBox
             you have in your CellTemplate but you get the jist -->
        <TextBlock Text="{Binding SelectedValue, ElementName=TheCombo}"/>
      </DataTemplate>
    </sdk:DataGridTemplateColumn.CellEditingTemplate>    
  </sdk:DataGridTemplateColumn>
  <sdk:DataGridTextColumn Binding="{Binding Dis_saldo}" Header="Disponibelt Saldo"/>
</sdk:DataGrid.Columns>

Hope this helps, cheers.

Thanks I get your point =) . Unfortunately it doesnot seem to work, have tried SelecteValue, SelectedItem and Text =/ — DeveloperDahak, Aug 19 '14 at 15:25
@DeveloperDahak Oh and had a sec to test, I think it's actually `SelectionBoxItem` you want to bind your TextBlock to. — Chris W., Aug 19 '14 at 20:08
Not sure about the property? I tried once again but it still doesn't work. Look at my "EDIT" — DeveloperDahak, Aug 20 '14 at 11:27
Oh that makes sense actually, I didn't think about it at the time, I just did a quick `ToolTipService.ToolTip="{Binding SelectionBoxItem, RelativeSource={RelativeSource Self}"` on one real quick to see if I couldnt grab the property but if it's sitting in a CellTemplate it's and not visible, there's not one there to grab from, you might try a direct like [this one](http://stackoverflow.com/questions/11916302/combobox-in-datagridtemplatecolumn-doesnt-display-selecteditem) — Chris W., Aug 20 '14 at 13:41

How do I style the selected/current/active ComboBoxItem in SIlverlight?

1 Answers1