Custom Control and colors for dark and light theme challenges

Vidar — Thu, 27 Apr 2023 13:38:31 GMT

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

Re: Custom Control and colors for dark and light theme challenges

UmaHarano — Fri, 28 Apr 2023 14:25:43 GMT

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

Style="{DynamicResource Esri_Button}"

Re: Custom Control and colors for dark and light theme challenges

Vidar — Tue, 02 May 2023 10:37:46 GMT

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

Re: Custom Control and colors for dark and light theme challenges

Wolf — Thu, 11 May 2023 17:22:10 GMT

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

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

Ribbon - mouseover:

Dockpane mouseover:

topic Custom Control and colors for dark and light theme challenges in ArcGIS Pro SDK Questions

Custom Control and colors for dark and light theme challenges

Re: Custom Control and colors for dark and light theme challenges

Re: Custom Control and colors for dark and light theme challenges

Re: Custom Control and colors for dark and light theme challenges