Hello,
I've just converted our application which uses implicit styling over to use the Fluent theme. It looks great (in light) but i'd like to use the dark theme. The main page uses a docking control but i don't know what colour to set the page background to. is there a telerik resource i can bind to in order to get the correct colour?
If I use 'PrimaryBackgroundColor' it looks great in white (with the drop shadows) but not so good in black.
I've also noticed that some of your controls now use 'fluentresourceextension' in order to bind to the colour. Is this something i can use for the background so that i can maybe change between light and dark scheme at runtime?
Thanks
Andy
I've just converted our application which uses implicit styling over to use the Fluent theme. It looks great (in light) but i'd like to use the dark theme. The main page uses a docking control but i don't know what colour to set the page background to. is there a telerik resource i can bind to in order to get the correct colour?
If I use 'PrimaryBackgroundColor' it looks great in white (with the drop shadows) but not so good in black.
I've also noticed that some of your controls now use 'fluentresourceextension' in order to bind to the colour. Is this something i can use for the background so that i can maybe change between light and dark scheme at runtime?
Thanks
Andy
2 Answers, 1 is accepted
0
Andrew
Top achievements
Rank 1
Rank 1
answered on 08 Feb 2018, 10:21 AM
Update: I have solved my problem. The RadDocking control provides its own background colour, but i had forced this to be transparent. The application now looks beautiful in both color variations! I can also swap between light and dark flawlessly.
I am how ever still interested to know if this 'fluent resource extension', or these dynamic resource proxys are able to be leveraged within my own markup in order to choose correct colours at runtime.
Thanks
Andy
0
Hi,
I am glad you have found a solution for your case and that you are pleased with the appearance of the theme. Normally the RadDocking should provide background with AlternativeBrush from the Fluent palette, which is slightly different from the White/Black PrimaryBackgroundBrush.
We are aware of an issue with the floating Tool Window in the RadDocking in the dark variation of the Fluent theme (where it is not distinguished from the rest of the panes, since the shadow is not visible). To fix it, since at the moment we do not change the shadow color, we have introduced a border for the floating pane which should be available in our next internal build (LIB).
As for the resource extension and the proxies:
The FluentResourceExtension is a "wrapper" around the FluentPalette, which hosts the colors and other resources that are used in the theme and provides the ability to change them at runtime and apply the changes to all the places that they are used. You can use it in the same manner as any other markup extension. With this theme we had introduced quite a lot of resources in order to achieve the desired effect and look of the theme.
Starting with the brushes - there is a number of transparent ones:
- PrimaryBrush - used in backgrounds of inputs
- MouseOver and PressedBrush - used for interaction of buttons and button-like controls
- BasicBrush - used in the majority of the normal state borders
(and the variation of the BasicSolidBrush in cases when inevitably there are borders that overlap, like in grids and complex nested views; it takes the color of the BasicBrush, if it is modified, and overlays it on top of the PrimaryBackgroundBrush to achieve the same color, but opaque)
- MainBrush - used for backgrounds of buttons, headers and footers
- IconBrush - used for glyph and path icons, which should be 80% of black/white for the light/dark variation respectfully
The rest should all be opaque:
- PrimaryBackgroundBrush is used when backgrounds need to be solid white/black
- AlternativeBrush is for backgrounds of popups, windows, listboxes etc and is slightly darker/lighter.
- Complementary is slightly darker/lighter than the alternative in case of collisions
- accent brushes AccentBrush is for normal accent element and the rest - AccentMouseOverBrush, AccentPressedBrush are for their states respectfully.
- AccentFocusedBrush is for all the focus visuals, which in their part are tied to the FocusThickness property, which by default is 2,2,2,2
- MarkerBrush is for all the foregrounds which is black/white
- MarkerInvertedBrush is for interactions states which is white/white
- MarkerMouseOverBrush is for inputs (which by design are solid white (PrimaryMouseOverBrush) when hovered in both variations) and it is black/black
and ValidationBrush that is for invalid elements and is red
Then there are opacities:
- DisabledOpacity - for texts when they are disabled. Backgrounds are usually AlternativeBrush when disabled
- InputOpacity - for texts in input controls (TextBox, RadMaskedInput etc.) when they are in normal state
- ReadOnlyOpacity - for texts in inputs when they are in a read only state
The FontFamily in the palette is by default SegoeUI.
The usage is as in any of our previous palettes - i.e. Background="{telerik:FluentResource ResourceKey=AccentBrush}"
As for proxies - we have introduced this in order to avoid creating another resource for transparent variations of some of the solid brushes in the
palette, but still be able to use their ability to be changed globally and at runtime. In the most cases they are used in the backgrounds of active windows and dialogs, which need to be semi-transparent in order for the fluent-specific acrylic effect to be visible. They are used to bound and convert resources from the palette:
<ext:DynamicResourceProxy x:Key="AlternativeBrushProxy" ProxyValue="{Binding Source={x:Static telerik:FluentPalette.Palette}, Path=AlternativeColor, Converter={StaticResource ColorToBrushConverter}}" />
and then:
<Setter Property="Background" Value="{Binding Source={StaticResource AlternativeBrushProxy}, Path=ProxyValue, Converter={StaticResource OpacityConverter}, ConverterParameter=153, Mode=OneWay}" />
You might not need them unless you would like to create variations of the palette resources (in case that we do not provide such already).
Depending on what you would like to create for your custom case, you can explore the template of a similar control that we provide (buttons, list boxes etc.) and observe its structure and specifics. You can find them in Themes.Implicit/WPF40/Fluent/Themes in the appropriate resource dictionary there (they are separated based on assembly membership). We use shadows, helper controls and bindings to finalize the look of the theme (mat:Shadow, mat:FluentControl, telerik:ThicknessToOrientedThicknessConverter etc.)
I hope that this would be of help to you and if you have any further questions, do not hesitate to contact us further.
Regards,
Martin
Progress Telerik
I am glad you have found a solution for your case and that you are pleased with the appearance of the theme. Normally the RadDocking should provide background with AlternativeBrush from the Fluent palette, which is slightly different from the White/Black PrimaryBackgroundBrush.
We are aware of an issue with the floating Tool Window in the RadDocking in the dark variation of the Fluent theme (where it is not distinguished from the rest of the panes, since the shadow is not visible). To fix it, since at the moment we do not change the shadow color, we have introduced a border for the floating pane which should be available in our next internal build (LIB).
As for the resource extension and the proxies:
The FluentResourceExtension is a "wrapper" around the FluentPalette, which hosts the colors and other resources that are used in the theme and provides the ability to change them at runtime and apply the changes to all the places that they are used. You can use it in the same manner as any other markup extension. With this theme we had introduced quite a lot of resources in order to achieve the desired effect and look of the theme.
Starting with the brushes - there is a number of transparent ones:
- PrimaryBrush - used in backgrounds of inputs
- MouseOver and PressedBrush - used for interaction of buttons and button-like controls
- BasicBrush - used in the majority of the normal state borders
(and the variation of the BasicSolidBrush in cases when inevitably there are borders that overlap, like in grids and complex nested views; it takes the color of the BasicBrush, if it is modified, and overlays it on top of the PrimaryBackgroundBrush to achieve the same color, but opaque)
- MainBrush - used for backgrounds of buttons, headers and footers
- IconBrush - used for glyph and path icons, which should be 80% of black/white for the light/dark variation respectfully
The rest should all be opaque:
- PrimaryBackgroundBrush is used when backgrounds need to be solid white/black
- AlternativeBrush is for backgrounds of popups, windows, listboxes etc and is slightly darker/lighter.
- Complementary is slightly darker/lighter than the alternative in case of collisions
- accent brushes AccentBrush is for normal accent element and the rest - AccentMouseOverBrush, AccentPressedBrush are for their states respectfully.
- AccentFocusedBrush is for all the focus visuals, which in their part are tied to the FocusThickness property, which by default is 2,2,2,2
- MarkerBrush is for all the foregrounds which is black/white
- MarkerInvertedBrush is for interactions states which is white/white
- MarkerMouseOverBrush is for inputs (which by design are solid white (PrimaryMouseOverBrush) when hovered in both variations) and it is black/black
and ValidationBrush that is for invalid elements and is red
Then there are opacities:
- DisabledOpacity - for texts when they are disabled. Backgrounds are usually AlternativeBrush when disabled
- InputOpacity - for texts in input controls (TextBox, RadMaskedInput etc.) when they are in normal state
- ReadOnlyOpacity - for texts in inputs when they are in a read only state
The FontFamily in the palette is by default SegoeUI.
The usage is as in any of our previous palettes - i.e. Background="{telerik:FluentResource ResourceKey=AccentBrush}"
As for proxies - we have introduced this in order to avoid creating another resource for transparent variations of some of the solid brushes in the
palette, but still be able to use their ability to be changed globally and at runtime. In the most cases they are used in the backgrounds of active windows and dialogs, which need to be semi-transparent in order for the fluent-specific acrylic effect to be visible. They are used to bound and convert resources from the palette:
<ext:DynamicResourceProxy x:Key="AlternativeBrushProxy" ProxyValue="{Binding Source={x:Static telerik:FluentPalette.Palette}, Path=AlternativeColor, Converter={StaticResource ColorToBrushConverter}}" />
and then:
<Setter Property="Background" Value="{Binding Source={StaticResource AlternativeBrushProxy}, Path=ProxyValue, Converter={StaticResource OpacityConverter}, ConverterParameter=153, Mode=OneWay}" />
I hope that this would be of help to you and if you have any further questions, do not hesitate to contact us further.
Regards,
Martin
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.