Search code examples
c#wpfdatagridcomboboxcolumnmaterial-design-in-xaml

DataGridComboBoxColumn transparent ComboBoxItems


I'm trying to create a software to modify MODBUS devices, and per tag address of the device has its own tag type. I want to select it by using combobox. The strange behavior of the combobox occurs when placed inside the datagrid. But upon trying the same method but without the materialdesign package included the combobox behaves normally.

At first click

first click

At second click

second click

I tried creating combobox on one with materialDesign package and one without. On the former, the opacity of the combobox list is low upon first click, but when you click again it the opacity is at max. This never happens on the one without the package.

<DataGridTemplateColumn Header="Tag Type">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <ComboBox x:Name="TtypeComboBox" IsEditable="False" Width="140">
                <ComboBoxItem Content="Modbus Coil(0x)"/>
                <ComboBoxItem Content="Discrete Input(1x)" IsSelected="True"/>
                <ComboBoxItem Content="Input Register(3x)"/>
                <ComboBoxItem Content="Holding Register(4x)"/>
            </ComboBox>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

Solution

  • Note to all who will encounter this problem... (or maybe I'm the only one who encounters this)

    Just use binding to display the data for the ComboBox.

    Visit https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.datagridcomboboxcolumn?redirectedfrom=MSDN&view=netframework-4.8 for more information.

    Then, as for the design, assign the style for the combobox to the EditingElementStyle of the DataGridComboBoxColumn.

    <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>
    

    Hope this helps those who will encounter this problem in the future.