1. Home
  2. Forum
  3. WPF
  4. Get element color from theme

Get element color from theme

Hi, I have created ControlTemplate for a GroupBox so that it looks like a panel with header. Now I want it to be color consistent with selected theme. But I don't know really how to achieve it. I recon that this should be simple.

For example I want to have Background of a specific theme color. Something like:
(pseudocode)

```
<ControlTemplate TargetType="GroupBox" x:Key="groupBoxPanel">
                    <Border Grid.Row="0"
                                  BorderThickness="1"
                                  Background="{TemplateBinding ThemeColorForButton}">
                   </Border>
</ControlTemplate>
```

So the question is - how can I set here currently selected theme color for button background? In my application, user can change the theme.



9 Replies 1 reply marked as answer
VR Vijayalakshmi Roopkumar Syncfusion Team November 5, 2020 11:48 AM UTC

Hi Adam, 
 
From your update, we understood that you want to change the background or foreground property according to the respective theme applied in appplication. For this you can use the following syntax to achieve it. 
 
Code:[XAML] 
 
 
<Border Background="{Binding Path=Background, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" BorderThickness="1" /> 
 
 
Please try this suggesiton and let us know if it is helpful. 
 
Regards, 
Vijayalakshmi VR 


AD Adam November 5, 2020 07:46 PM UTC

This should not work and it's not working (I've checked). I don't have any Button as a parent nor as a child. I just want to get the color from theme.

VR Vijayalakshmi Roopkumar Syncfusion Team November 6, 2020 12:16 PM UTC

Hi Adam 
 
Thank you for your update. 
 
Query : I don't have any Button as a parent nor as a child. I just want to get the color from theme. 
We have checked your query and understood that you are requirement is to get colors for particular control according to SfSkinManager themes.  For this, we suggest you to use the export option of the ThemeStudio. By using this, you can able to export the specified control theme file and refer the same in Application level in App.xaml .For your reference , we have attached the video on how to export the particular control xaml file. Also prepared the simple sample with exported theme file. Please find it from following location:  
  
  
  
For more information about export option in ThemeStudio, please refer the below links:  
  
   
Please try this solution and let us know if it is helps. 
 
Regards, 
Vijayalakshmi VR 


AD Adam November 8, 2020 04:57 PM UTC

Hi, I don't want to apply a new style, just get the color from current theme.

I have created custom control template for GroupBox. It has something like header panel and content panel. I want to set colors for these panels according to current theme. Like I said in my first mail, I just want to be able to do something like:

[code]
<ControlTemplate TargetType="GroupBox" x:Key="groupBoxPanel">
                    <Border Grid.Row="0"
                                  BorderThickness="1"
                                  Background="{TemplateBinding ThemeColorForButtonBackground}">
                     <Label ForegroundColor="{ThemeBinding ThemeColorForDataGridHeaderForeground}"/>
                   </Border>
</ControlTemplate>
[/code]

Button and DataGrid are just example controls. I just want to be able to get the color from control part in CURRENT theme (user can change themes).

BR Bharathi Rajakantham Syncfusion Team November 9, 2020 12:43 PM UTC

Hi Adam, 


Thanks for your update, 

We have checked your query “ Don't want to apply a new style, just get the color from current theme”. To customize the theme colors and fonts in the application, call RegisterThemeSettings method and pass the theme name and respective theme setting instance as parameters.Please check the sample and the  documentation for your reference. 



MaterialDarkThemeSettings themeSettings = new MaterialDarkThemeSettings(); 
themeSettings.PrimaryBackground = new SolidColorBrush(Colors.Red); 
themeSettings.PrimaryForeground = new SolidColorBrush(Colors.AntiqueWhite);themeSettings.BodyFontSize = 15; 
themeSettings.HeaderFontSize = 18; 
themeSettings.SubHeaderFontSize = 17; 
themeSettings.TitleFontSize = 17; 
themeSettings.SubTitleFontSize = 16; 
themeSettings.FontFamily = new FontFamily("Callibri"); 
SfSkinManager.RegisterThemeSettings("MaterialDark", themeSettings); 






Please let us know if you have anyother concerns. 

Regards, 
Bharathi R 


AD Adam December 3, 2020 01:20 PM UTC

No, it's not what I want to have.
I just really want this simple functionality.
For example I have applied Syncfusion Blend style:

```
SkinStorage.SetVisualStyle(Application.Current.MainWindow, "Blend");
```

where BLEND is Syncfusion.Themes.Blend.WPF

Now, I want to be able to get theme color for a control.
Let's say I create custom panel and I want it to have background color that every button have (defined in blend style), so:

```
<local:MyCustomPanel Background="{CurrentThemeColorForButton}" />
```


BR Bharathi Rajakantham Syncfusion Team December 4, 2020 04:24 PM UTC

Hi Adam, 
 
Thanks for your update, 
 
We are checking the reported query from our side and we will update you the further details on 8th December 2020.Please let us know if you have any other concerns.We will be glad to assist you. 
 
Regards, 
Bharathi R 


BR Bharathi Rajakantham Syncfusion Team December 9, 2020 03:40 AM UTC

Hi Adam,  
  
Sorry for the inconvenience, 
  
We are still checking the reported query from our side and we will update you the further details on 11th December 2020.Please let us know if you have any other concerns.We will be glad to assist you.  
  
Regards,  
Bharathi R  


BR Bharathi Rajakantham Syncfusion Team December 10, 2020 03:43 PM UTC

Hi Adam, 
Thanks for your Patience, 
We have checked your query “Need to get theme color for a control” and you can achieve it for Material themes and office 2019 themes by referring the Brushes.xaml resource dictionary from respective theme assembly. To check the available keys in brushes.xaml, you can export the theme project from themestudio and you can find Brushes.Xaml file in Common folder. Merge the Brushes.Xaml in application resources and use the keys in the brushes.xaml file to achieve your requirement. 
Note: You can use this approach for single theme applied to an application and will not work for switching themes dynamically. 
 
<Application.Resources> 
        <ResourceDictionary> 
            <ResourceDictionary.MergedDictionaries> 
                <ResourceDictionary Source="/Syncfusion.Themes.MaterialDark.WPF;component/Common/Brushes.xaml" /> 
            </ResourceDictionary.MergedDictionaries> 
        </ResourceDictionary> 
    </Application.Resources> 
 
Please find the documentation for exporting the theme from Themestudio and also check the sample for your reference. 
 
 
Please try the above solution and let us know if you need any further assistance on this. We will be glad to assist you. 
 
We are working on publishing the documentation on this and we will also intimate you once it gets published 
 
Regards, 
Bharathi R 


Marked as answer
Loader.
Up arrow icon