How to get the resource associated with a Theme color so it can be used in XAML?

Hi all,

I have some custom icons that I want to show inside a button. The Fill color of the icon should be the same as the Foreground color of the theme.


But it doesn't work for me...

If I set the color of the Icon to White, It is shown inside the button.

I have attached my demo project. Can you help me?

Thanks in advance,
Luca

Attachment: SyncFusionTest_7d8f11b7.7z

5 Replies 1 reply marked as answer

VR Vijayalakshmi Roopkumar Syncfusion Team September 3, 2020 11:36 AM UTC

Hi  Luca, 
 
Thank you for contacting Syncfusion Support. 
 
Query : I have some custom icons that I want to show inside a button. The Fill color of the icon should be the same as the Foreground color of the theme using themecolors 
 
We have checked your query and understood that you are trying to retrieve the resource from the  ThemeColors , which is supported only for skinstorage themes . But on analyzing your sample, you have been using SfSkinManager themes and the ThemeColors is not supported with it. Since SfSkinManager is a separate component. However in order to achieve the same theme foreground for the Fill icon, you can use the following syntax: 
 
 
Code:[XAML] 
 
 
<DataTemplate x:Key="DownIcon"> 
<Viewbox> 
<Canvas Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0"> 
<Path Width="76" Height="76" Canvas.Left="2" Canvas.Top="2" Stretch="Fill" 
Fill="{Binding Path=Foreground, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type Button}}}" 
Data="F1 M 37.8516,39.5833L 52.1016,24.9375L 52.1016,35.2292L 37.8516,50.2708L 23.6016,35.2292L 23.6016,24.9375L 37.8516,39.5833 Z "/> 
</Canvas> 
</Viewbox> 
</DataTemplate> 
 
 
 
 
Screenshot: 
 
 
 
 
Also if you want to access the particular theme file of the Material and office2019 theme, you can export that by using Export option in ThemeStudio. For more information about SfSkinManager, refer the below UG link: 
 
 
Please try this solution and let us know if you have any other concerns. 
 
Regards, 
Vijayalakshmi VR 


Marked as answer

LD Luca De Marco September 3, 2020 01:22 PM UTC

Thank you very much for your help! 

First of all, sorry but I didn't know that ThemeColors was only for SkinStorage themes.

I tried your solution it and it works like a charm. My only concern is that I would have to use a different Fill string for every different control I put the icon in.
Is there a way to get the color regardless of the control I'll put my icon in?

Thanks in advance,
Luca


VR Vijayalakshmi Roopkumar Syncfusion Team September 4, 2020 06:56 AM UTC

Hi Luca 
 
Thank you for your update. 
 
As mentioned earlier, in SfSkinManager themes, we don't have any common repository for the resources maintained in all varied themes. Since the resources will be varied for each controls according to the design. So 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 helpful, 
 
Regards, 
Vijayalakshmi VR 



LD Luca De Marco September 4, 2020 12:45 PM UTC

Thank you very much for your reply!

You can close this thread.


VR Vijayalakshmi Roopkumar Syncfusion Team September 7, 2020 05:03 AM UTC

Hi Luca 
 
Thank you for your update. 
 
Please get back to us, if you have any other concerns. 
 
Regards, 
Vijayalakshmi VR 


Loader.
Up arrow icon