Search code examples
wpfdevexpressdevexpress-wpf

How to bind the actual theme name in DevExpress GridControl CellTemplate


I have a GridControl and I use some cell editing with a few buttons inside a cell.

This is a sample column with 3 buttons:

xmlns:dxet="http://schemas.devexpress.com/winfx/2008/xaml/editors/themekeys"
xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
xmlns:my="clr-namespace:MyProject.DevExpress.View"


<dxg:GridColumn Width="Auto"
                AllowEditing="False"
                AutoFilterCondition="Default"
                FieldName="Information"
                Header="Info"
                ShowInColumnChooser="False"
                VisibleIndex="1">
                <dxg:GridColumn.CellTemplate>
                    <DataTemplate>
                        <dxe:ButtonEdit Name="PART_Editor" AllowDefaultButton="False">
                            <dxe:ButtonEdit.Buttons>                                    
                                <!--  Button Action 1  -->
                                <my:ButtonInfoCustom Tag="Info1">
                                    <my:ButtonInfoCustom.Template>
                                        <DataTemplate>
                                            <Button x:Name="PART_Item"
                                                    Height="Auto"
                                                    Content="{Binding DataContext.RowData.Row.InfoName}"
                                                    Style="{DynamicResource {dxet:ButtonsThemeKey ResourceKey=ButtonStyle,
                                                                                                  ThemeName=DeepBlue}}"
                                                    ToolTip="{Binding DataContext.RowData.Row.CustomTooltip}" />
                                        </DataTemplate>
                                    </my:ButtonInfoCustom.Template>
                                </my:ButtonInfoCustom>
                                <!--  Button Action 2  -->
                                <my:ButtonInfoCustom Tag="Info2">
                                ...

The problem is the theming.

If I set the theme name explicitly, it works okay:

Style="{DynamicResource {dxet:ButtonsThemeKey ResourceKey=ButtonStyle, ThemeName=DeepBlue}}"

If I try to bind:

Style="{DynamicResource {dxet:ButtonsThemeKey ResourceKey=ButtonStyle, ThemeName={Binding ThemeToUse}}}"

I get this:

XamlParseException: A 'Binding' cannot be set on the 'ThemeName' property of type 'ButtonsThemeKeyExtension'. A 'Binding' can only be set on a DependencyProperty of a DependencyObject.

What should I do?


Solution

  • Well, you shouldn't put any theme name into your XAML code.

    Instead, use DevExpress built-in controls as they consider the actual theme and change their appearance accordingly.

    Check this example (I removed the Style tag entirely and replaced Button with SimpleButton):

    <dxg:GridColumn Width="Auto"
                AllowEditing="False"
                AutoFilterCondition="Default"
                FieldName="Information"
                Header="Info"
                ShowInColumnChooser="False"
                VisibleIndex="1">
                <dxg:GridColumn.CellTemplate>
                    <DataTemplate>
                        <dxe:ButtonEdit Name="PART_Editor" AllowDefaultButton="False">
                            <dxe:ButtonEdit.Buttons>                                    
                                <!--  Button Action 1  -->
                                <my:ButtonInfoCustom Tag="Info1">
                                    <my:ButtonInfoCustom.Template>
                                        <DataTemplate>
                                            <dx:SimpleButton x:Name="PART_Item"
                                                    Height="Auto"
                                                    Content="{Binding DataContext.RowData.Row.InfoName}"                                                                                                       ToolTip="{Binding DataContext.RowData.Row.CustomTooltip}" />
                                        </DataTemplate>
                                    </my:ButtonInfoCustom.Template>
                                </my:ButtonInfoCustom>
                                <!--  Button Action 2  -->
                                <my:ButtonInfoCustom Tag="Info2">
        ...