Ticket T1283185
Visible to All Users

Still searching for the proper way to pull a color for the theme - xaml syntax

created 6 months ago

Hi,

I've been beating my head against the wall to try to get this stuff to work. I have the following goal:

I want to be able to set a style (such as an font forecolor) to be mapped to a theme resource. My application can toggle between vs2019Light and vs2019Dark.

Here is what I have currently, but it's still not quite right

<dxi:ThemeResource x:Key="ColorRemove" ThemeKey="{dxt:ThemedWindowThemeKey ResourceKey=WindowContentForeground}" />

Code
<Style x:Key="StyleEmbeddedRemoveButton" BasedOn="{StaticResource _StyleEmbeddedButtonBase}" TargetType="dx:SimpleButton"> <Setter Property="Foreground" Value="{DynamicResource ColorRemove}" /> <Setter Property="Content" Value="{StaticResource CaptionRemoveSymbol}" /> </Style>
Code
<dxc:SimpleButton Command="{Binding ClearAllCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Self}}" DockPanel.Dock="Right" IsEnabled="{Binding ItemsPresent}" Style="{StaticResource StyleEmbeddedRemoveButton}" ToolTip="{x:Static properties:FilterResources.clear_all_items_tooltip1}" />

Here is my end goal: I want to make a fontawesome string, whose forecolor is the same color that the "little x that shows up in a combobox that clears it's contents". I recognize that I'm referring to a different resource in my example, it was just the starting point.

If I am TOTALLY going in the wrong direction, please let me know. I just need some colors that I know work with my themes, and can dyanmically switch as the light\dark mode switches.

Thanks.

Answers approved by DevExpress Support

created 6 months ago (modified 2 months ago)

Hello,

The ThemeResource extension in fact is a MultiBinding instance. Thus, it cannot be defined as a resource and should be explicitly defined as a property value. To resolve the issue, you need to move the ThemeResource definition directly to the required property setter:

XAML
<Style x:Key="StyleEmbeddedRemoveButton" TargetType="dx:SimpleButton"> <Setter Property="Foreground" Value="{dxi:ThemeResource {dxt:ThemedWindowThemeKey ResourceKey=WindowContentForeground}}" /> </Style>

Please try this on your side and let us know your results.

Thanks,
Kirill


Updated by Andrey Marten (DevExpress Support):

In v25.1 of our controls, we simplified the way customers define theme-dependent values for properties directly in XAML. This new feature may be helpful in use cases that we discussed in this thread. Please refer to the following article for additional information: What's New in DevExpress v25.1 => Set Theme-Specific Values in XAML.


    Show previous comments (3)
    Kirill (DevExpress Support) 6 months ago

      Hello,

      Thank you for the detailed description. As I understand, there are two global goals:

      1. Colorize custom icons according to an applied theme;
      2. Apply certain styles to our controls and standard controls according to the same theme.

      Let me described possible solutions for each goal separately.

      Colorize custom icons

      To do this, use SVG icons. As I can see, the FontAwesome library includes SVG icons, so there should be no issues with their usage. Our SVG engine accompanied by the theme engine
      can colorize SVG icons automatically according to an applied theme: SVG Image Palettes. Please ensure that an SVG icon uses one or several colors listed in the SVG Image Palettes section. If you cannot directly edit an SVG icon to meet this requirement, it's possible to use palette states to explicitly replace colors by keys. In this case, the key is a color name specified in the SVG icon's markup. You can bind the SvgImageHelper.State property to a currently applied theme and define palettes with theme names as keys:

      XAML
      dx:SvgImageHelper.State="{Binding Path=(dx:ThemeManager.TreeWalker).ThemeName, RelativeSource={RelativeSource Self}}"

      Apply certain styles to our and standard controls

      You can complete this task in different ways depending on what customization you wish to apply:

      1. For simple customizations (e.g., setting certain properties), use an implicit style and triggers for the (dx:ThemeManager.TreeWalker).ThemeName property.
      2. For theme-dependent color customizations, use the ThemeResource extension. To find an appropriate color/brush resource, you can create a custom theme based on our built-in one and inspect its resources in the WPF Theme Designer tool: Edit a Theme in XAML.
      3. For complex layout customizations, override our theme-dependent styles and templates. You can use the same WPF Theme Designer tool to find and override them locally in your application: Modify Theme Resources.
      4. If you use standard and other third-party controls, you can try one of the ways we described in the following KB article to implement theme support: How to implement the ThemeMananger theme support in custom controls.

      Thanks,
      Kirill

      Andrey Marten (DevExpress Support) 2 months ago

        Hello Greg,

        I hope this message finds you well.

        I'm happy to inform you that in v25.1 of our controls, we simplified the way customers define theme-dependent values for properties directly in XAML. This new feature may be helpful in use cases that we discussed in this thread. Please refer to the following article for additional information: What's New in DevExpress v25.1 => Set Theme-Specific Values in XAML.

        Regards,
        Andrey

          Thanks Andrey, this is a great improvement! Should make this stuff a lot easier for my job :)

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.