Style to Follow Light/Dark Theme

[TedChapin]

Per the style guide:

ProGuide Style Guide · Esri/arcgis-pro-sdk Wiki · GitHub 

I am using 

<TextBlock Style="{DynamicResource Esri_TextBlockRegular}">

to make the text white in the dark theme and black in the light theme. But the text is dark gray in both themes.

Furthermore, the doc says

Certain UI elements such as TextBlocks, radio buttons, etc do not need any styling. ArcGIS Pro will automatically style them using the "Default" style.

but if I leave out the style altogether the text is just black in both themes.

[UmaHarano]

Hi

Can you please check if the code snippet below is in your xaml? Add this code snippet to your xaml so that these Dynamic resources will load in Design mode in Visual Studio. (The templates will automatically add this to the xaml)

<UserControl ...
      xmlns:extensions="clr-namespace:ArcGIS.Desktop.Extensions;assembly=ArcGIS.Desktop.Extensions"
      ...>
<UserControl.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
     <extensions:DesignOnlyResourceDictionary Source="pack://application:,,,/ArcGIS.Desktop.Framework;component\Themes\Default.xaml"/>
            </ResourceDictionary.MergedDictionaries>
      </ResourceDictionary>
 </UserControl.Resources>‍‍‍‍‍‍‍‍‍‍

[TedChapin]

Thanks Uma Harano‌ I added the extensions you specified but the text is still gray if I add 

Style="{DynamicResource Esri_TextBlockRegular}"

in both themes. It is black in both themes if I omit it. Looking for white in the dark theme and black in the light theme.

[UmaHarano]

Hi Ted,

If possible, can you please share your xaml with me?  

Thanks

Uma

[TedChapin]

Uma, how did you post the code snippet above?

[UmaHarano]

Hi Ted, 

Click the "Expand Toolbar" button and select "Syntax Highlighter" from the "More" drop down.

Thanks

Uma

[TedChapin]

Uma Harano‌

This is what I am seeing:

with this xaml:

<UserControl x:Class="ProjectSettingsView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"              
             xmlns:extensions="clr-namespace:ArcGIS.Desktop.Extensions;assembly=ArcGIS.Desktop.Extensions"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <extensions:DesignOnlyResourceDictionary Source="pack://application:,,,/ArcGIS.Desktop.Framework;component\Themes\Default.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/ArcGIS.Desktop.Framework;component\Themes\Default.xaml"/>
                
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <StackPanel Orientation="Vertical" Margin="5">
            <TextBlock Style="{DynamicResource Esri_TextBlockRegular}" Text="Project Number" VerticalAlignment="Center" />
            <TextBox Text="{Binding ProjectNumber, UpdateSourceTrigger=PropertyChanged}" Margin="10,2,0,2" Width="150" HorizontalAlignment="Left" />
            <TextBlock Style="{DynamicResource Esri_TextBlockRegular}" Text="Elevation Delta Tolerance (ft)" VerticalAlignment="Center"/>
            <TextBox Text="{Binding ElevationDeltaTolerance, UpdateSourceTrigger=PropertyChanged}" Margin="10,2,0,2" Width="150" HorizontalAlignment="Left" />
            <TextBlock Style="{DynamicResource Esri_TextBlockRegular}" Text="Proximity Delta Tolerance (ft)" VerticalAlignment="Center"/>
            <TextBox Text="{Binding ProximityDeltaTolerance, UpdateSourceTrigger=PropertyChanged}" Margin="10,2,0,2" Width="150" HorizontalAlignment="Left" />
            <TextBlock Style="{DynamicResource Esri_TextBlockRegular}">Config file</TextBlock>
            <TextBlock Text="{Binding ConfigFile}" Margin="10,2,4,2" Width="auto" HorizontalAlignment="Stretch" Style="{DynamicResource Esri_TextBlockRegular}" />
            <Button Height="25" Width="Auto"  Command="{Binding StatesButtonCommand}" HorizontalAlignment="Left" Margin="0, 2, 0, 2" ToolTip="Show a list of application conditions that drive ribbon enabled state">Button States</Button>
        </StackPanel>
    </Grid>
</UserControl>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[CharlesMacleod]

Ted, you have something else going on. When I put your xaml directly into a Dockpane it looks fine. I am thinking your UserControl is part of a larger UI on a dockpane?

If so, somewhere along the line, in one of your user control parents, I suspect the underlying foreground color for the default TextBlock style is getting overwritten or, less likely, the Foreground color itself (brush, technically speaking) is getting overwritten.

Paste this xaml into the bottom of your StackPanel and see how it looks on your UserControl...

<TextBlock Style="{DynamicResource Esri_TextBlockRegular}" Margin="0,10,0,0"
                 Text="Esri_TextStyleDefaultBrush" VerticalAlignment="Center" 
                 Foreground="{DynamicResource Esri_TextStyleDefaultBrush}"/>
      <Rectangle Width="200" Height="30" Fill="{DynamicResource Esri_TextStyleDefaultBrush}"/>

      <TextBlock Style="{DynamicResource Esri_TextBlockRegular}"
                 Text="Esri_Gray170_Brush" VerticalAlignment="Center" 
                 Foreground="{DynamicResource Esri_Gray170_Brush}"/>
      <Rectangle Width="200" Height="30" Fill="{DynamicResource Esri_Gray170_Brush}"/>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This is what I see...(the red box and arrow are mine - not in the xaml). See, on your dockpane, if the text and rectangle colors ~match~ your original text color (dim) or do not match (bright). I am thinking that both the text and boxes will look ok (bright).

[TedChapin]

Charles Macleod‌

[TedChapin]

Charles Macleod‌

This is a custom properties page, not a dock pane. The ViewModel inherits from Page, not DockPane. When I put your test TextBlocks and Rectangles on a DockPane it works as expected.

I followed this documentation to create the custom project settings page:

ProGuide Custom settings · Esri/arcgis-pro-sdk Wiki · GitHub