ComboBox in DataGrid with transparent background if the row is not selected

[kunjiangkun]

MaterialDesign Version 2.6.0 MahApps.Metro 2.0.0-alpha0589

When use ComboBox in DataGrid. thepull down menu of the ComboBox has semi-transparent background which makes the text hard to see. This happens intermittently. Seems first time you open the combobox, it shows transparent background.

                <DataGridTemplateColumn Header=" Logic State ">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <ComboBox ItemsSource="{Binding ElementName=ViewRoot, Path=DataContext.MyModel.AvaliblePatterns, Mode=OneWay}"
                                      SelectedItem="{Binding Path=DutLogicState, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                      Visibility="{Binding Path=ElementVisibility, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
                                      BorderThickness="0">
                            </ComboBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

[kunjiangkun]

I think this is duplicate of Issue #1459

[Dorokun192]

I also discovered this issue when doing the same process.

Apparently the applicable fix for now is to use DataGridComboBoxColumn and set the binding there. A little bit ugly but at least the transparency is solved.

[grandangelo]

use DataGridComboBoxColumn and set the binding

Do you have any suggestion about how to solve it when not using DataGrid? I've a single ComboBox in a Grid, not a complete column.

[kunjiangkun]

The workaround for me is to apply the style MaterialDesignDataGridComboBox to the combo box directly. I think you can use this with any combo box in a List not just DataGrid. You can also use "MaterialDesignComboBox" style for individual Combo box but that's should be the default style anyway.

<ComboBox 
                        HorizontalAlignment="Stretch" VerticalAlignment="Center" MinWidth="120"
                        DisplayMemberPath="Name" Style="{StaticResource MaterialDesignDataGridComboBox}"
                        ItemsSource="{Binding ElementName=ViewRoot, Path=DataContext.MyModel.AvaliblePatterns, Mode=OneWay}"
                        SelectedItem="{Binding Path=ParameterModel.LogicState, Mode=TwoWay}">
                    </ComboBox>

[Dorokun192]

@kunjiangkun This is a great answer too. When using DataGridComboBoxColumn, you can set this style too by assigning it to the EditingElementStyle.

<DataGrid DockPanel.Dock="Left" ScrollViewer.CanContentScroll="True" x:Name="TagSelection" Margin="5" CanUserAddRows="False" CanUserSortColumns="False" AutoGenerateColumns="False" materialDesign:DataGridAssist.CellPadding="5 5 5 5" materialDesign:DataGridAssist.ColumnHeaderPadding="5" IsEnabled="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="ID" IsReadOnly="True" Binding="{Binding TagID}" ElementStyle="{StaticResource centerAligned}" EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}"/>
        <DataGridTextColumn Header="Address"  Binding="{Binding TagAddress}" ElementStyle="{StaticResource centerAligned}" EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}"/>
        <DataGridComboBoxColumn x:Name="TagTypeCombo" EditingElementStyle="{StaticResource MaterialDesignDataGridComboBox}" Header="Tag Type" SelectedValueBinding="{Binding TagType}">
        </DataGridComboBoxColumn>
    </DataGrid.Columns>
</DataGrid>

[grandangelo]

Ciao kunjiangkun, issue should have been closed with release 3.1.0, take a look at it and close also here if possible.

[ElieTaillard]

@kunjiangkun is it solved?