Custom Control and colors for dark and light theme challenges

[Vidar]

Hi

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:

 <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <extensions:DesignOnlyResourceDictionary Source="pack://application:,,,/ArcGIS.Desktop.Framework;component\Themes\Default.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <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-->
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="18"></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>

                    <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>
                </Grid>
            </StackPanel>
        </Button>
    </Grid>

Can anyone assist?

[UmaHarano]

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

Style="{DynamicResource Esri_Button}"

[Vidar]

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

[Wolf]

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}" 
            Margin="0">
  <StackPanel Orientation="Horizontal"  Width="120" Height="22">
   ...
  </StackPanel>
</Button>

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

Ribbon - mouseover:

Dockpane mouseover: