Custom Control and colors for dark and light theme challenges

04-27-2023 06:35 AM
Occasional Contributor II


I'm struggling to get a custom control to behave like a standard button on the ribbon.

My custom control is basically the same as a medium size button (text and image), a little notification badge appears on the button which is my embellishment and irrelevant to this question so I'll leave that out.

When I mouse over in dark mode it should be dark grey (like other standard controls), but it shows up as a pale blue (I think the same as the light theme).

Also the esri image I have embedded into the button doesn't seem to respect dark mode.

The following image should help explain:


Here is the XAML, which may prove useful:

                <extensions:DesignOnlyResourceDictionary Source="pack://application:,,,/ArcGIS.Desktop.Framework;component\Themes\Default.xaml"/>
    <Grid Width="120" Height="22">
        <Button BorderThickness="0" Background="Transparent"  Command="{Binding CommandShowDataGroups}" >
            <StackPanel Orientation="Horizontal"  Width="120" Height="22">

                <!--Grid only used to overlay the badge over the icon, it uses the same coloumn 0-->
                        <ColumnDefinition Width="18"></ColumnDefinition>

                    <Image Grid.Column="0" Margin="2 0 0 0" Source="pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/VariableCategoryKeyUSData16.png" Width="16" Height="16" Stretch="None"/>
                    <ui:BadgeControl Grid.Column="0" Visibility="{Binding IsBadgeVisible}" BadgeControlText="{Binding BadgeText}" BadgeControlColor="{Binding BadgeColor}" Width="15" Height="17"></ui:BadgeControl>
                    <TextBlock Foreground="{DynamicResource Esri_TextStyleDefaultBrush}" Grid.Column="1" Margin="4 0 0 0" FontSize="12" TextWrapping="Wrap" VerticalAlignment="Center" TextAlignment="left" Width="100" Text="Data Groups"></TextBlock>


Can anyone assist?




0 Kudos
3 Replies
Esri Regular Contributor

Button controls have a Pro Style. Can you try adding this style to you button element?

Style="{DynamicResource Esri_Button}"

0 Kudos
Occasional Contributor II

Hi Uma,

I tried this but it does something weird to the padding or margins, see below:




I think this style is meant for buttons on forms, not ribbons (maybe).

0 Kudos
by Esri Regular Contributor
Esri Regular Contributor

You are correct the Margins get set by the esri button style.  But you can override the Margins:

<Button BorderThickness="0" Background="Transparent" 
            Command="{Binding CommandShowDataGroups}" Style="{DynamicResource Esri_Button}" 
  <StackPanel Orientation="Horizontal"  Width="120" Height="22">

Now you get the same 'theme' behavior as if you use the Button in a Dockpane:

Ribbon - mouseover:


Dockpane mouseover:




0 Kudos