nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Does defining a style for a WPF control override the ArcGIS Pro Theme Style?

VidmasKondratas

I have an ArcGIS Pro AddIn I’m developing and I’m having an issue with ArcGIS Pro Theme Styles being overwritten (I think). I need to change a property in a ComboBox based on an event trigger. This needs to be done in the WPF control’s “Style” section. However, when I do this it seems to overwrite the ArcGIS Pro Theme Style (see below). Is this expected behavior and is there a way I can avoid this?

<ComboBox.Style>

</Style>

</ComboBox.Style>

</ComboBox>

タグ付きの投稿をもっと見る

Accepted answers

CharlesMacleod

Add the based on attribute to your style and you will be good to go. Is there some reason that does not work for you?

<ComboBox.Style>
   <SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>Style</SPAN> <SPAN class="attr-name token">TargetType</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{x:Type ComboBox}<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">BasedOn</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{StaticResource {x:Type ComboBox}}<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
       ....
   <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>Style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
</ComboBox.Style>‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

GKmieliauskas

Hi Vidmas,

Esri uses default combobox style in ArcGIS Pro.

https://github.com/Esri/arcgis-pro-sdk/wiki/proguide-style-guide#combo-boxCombo Box

Default Style: Yes

ArcGIS Pro provides default styling for text content of a Combo box control, including mouse over behavior and selection highlight. If needed, style the individual properties such as Background/Foreground by using Esri brushes.

<ComboBox Background="{DynamicResource Esri_BackgroundPressedBrush}"            Foreground="{DynamicResource Esri_TextMenuBrush}">                 <ComboBoxItem >Item1</ComboBoxItem>                 <ComboBoxItem >Item2</ComboBoxItem>                 <ComboBoxItem >Item3</ComboBoxItem> </ComboBox>

So one of the ways is to set comboboxitem template (add additional Setter from my code to your combobox style) :

P.s. Your buttons at the bottom of window (Reset, Cancel, Ok) needs Esri style too to look like in others ArcGIS Pro windows (Style="{DynamicResource Esri_SimpleButton}")

VidmasKondratas

I already tried this. It doesn't work for me. Have you tested this with the "Dark Theme" while adding a style section to the combobox? All the comboboxes in Pro use the "Dark Theme" when in "Dark Theme" by default (like the dark ones in the attached picture). Open any out-of-the-box tool in Pro while in "Dark Theme" and look what the comboboxes look like. Doing the dynamic resource brushes from the Esri style guide still just switches everything to "Light Theme" for me after adding the <ComboBox.Style> section. The items in the comboboxes still are using the "Dark Theme" however which makes them unreadable. I'm suspecting because I haven't added a "Style" section to the items. The "Style" section contains a "BasedOn" property to allow inheritance, but you can't use it with dynamic resources and I don't know how to set this. It appears that adding a "Style" section will override any Esri styles.

CharlesMacleod

Add the based on attribute to your style and you will be good to go. Is there some reason that does not work for you?

<ComboBox.Style>
   <SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>Style</SPAN> <SPAN class="attr-name token">TargetType</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{x:Type ComboBox}<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">BasedOn</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{StaticResource {x:Type ComboBox}}<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
       ....
   <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>Style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
</ComboBox.Style>‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

GKmieliauskas

Hi Vidmas,

It was part of my code.

control.png

VidmasKondratas

Yes, that works. Thanks! I was missing how to set the "BasedOn" property correctly:

BasedOn="{StaticResource {x:Type ComboBox}}"

So adding this ComboBoxStyle with the "BasedOn" property above as a static resource and setting all the ComboBox styles to it is giving me the exact behavior and look that I was expecting:

<controls:ProWindow.Resources>
	<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>ResourceDictionary</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
		<SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>Style</SPAN> <SPAN class="attr-name token"><SPAN class="namespace token">x:</SPAN>Key</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>ComboBoxStyle<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">TargetType</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{x:Type ComboBox}<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">BasedOn</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{StaticResource {x:Type ComboBox}}<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
			<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>Style.Triggers</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
				<SPAN class="selector token"><DataTrigger Binding="</SPAN><SPAN class="punctuation token">{</SPAN>Binding ElementName=DescriptionCheckBox, Path=IsChecked<SPAN class="punctuation token">}</SPAN><SPAN class="selector token">" Value="True">
					<Setter Property="DisplayMemberPath" Value="Description" />
				</DataTrigger>
				<DataTrigger Binding="</SPAN><SPAN class="punctuation token">{</SPAN>Binding ElementName=DescriptionCheckBox, Path=IsChecked<SPAN class="punctuation token">}</SPAN><SPAN class="string token">" Value="</SPAN>False">
					<Setter Property=<SPAN class="string token">"DisplayMemberPath"</SPAN> Value=<SPAN class="string token">"ManiceCode"</SPAN> />
				</DataTrigger>
			</Style.Triggers>
		<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>Style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
		<ResourceDictionary.MergedDictionaries>
			<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN><SPAN class="namespace token">extensions:</SPAN>DesignOnlyResourceDictionary</SPAN> <SPAN class="attr-name token">Source</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>pack://application:,,,/ArcGIS.Desktop.Framework;component\Themes\Default.xaml<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">/></SPAN></SPAN>
		</ResourceDictionary.MergedDictionaries>
	<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>ResourceDictionary</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
</controls:ProWindow.Resources>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>ComboBox</SPAN> <SPAN class="attr-name token"><SPAN class="namespace token">x:</SPAN>Name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>cboCT<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">Style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">{</SPAN>StaticResource ComboBoxStyle<SPAN class="punctuation token">}</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">Width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>60<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">MaxDropDownHeight</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>540<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">HorizontalContentAlignment</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>Center<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">ItemsSource</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{Binding Concentrations}<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">SelectedValuePath</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>ManiceCode<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">SelectedValue</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{Binding CT, Mode<SPAN class="punctuation token">=</SPAN>TwoWay, UpdateSourceTrigger<SPAN class="punctuation token">=</SPAN>PropertyChanged}<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.