We Keep Coding

Avalonia change part of FluentTheme

I use <FluentTheme Mode="Dark" /> for my application. I really like it but i want to change part of the design. For example swap the background to a bright pink.
I tried overriding the style like this:
<Application xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Avalonia.Test"
x:Class="Avalonia.Test.App">
<Application.DataTemplates>
<local:ViewLocator />
</Application.DataTemplates>
<Application.Styles>
<FluentTheme Mode="Dark" />
<Style>
<Style.Resources>
<Color x:Key="ThemeBackgroundColor">#CCFF0068</Color>
<SolidColorBrush x:Key="ThemeBackgroundBrush" Color="{DynamicResource ThemeBackgroundColor}" />
</Style.Resources>
</Style>
</Application.Styles>
But sadly it doesnt work. No errors are thrown but the change doesnt apply. Does anyone have a tip on how to only change part of the FluentTheme of avalonia?

For the Fluent theme the resource name is SystemControlBackgroundAltHighBrush.
I suggest overriding the resource instead of using style in your App.xaml -
<Application.Resources>
<SolidColorBrush x:Key="SystemControlBackgroundAltHighBrush" Color="#CCFF0068"/>
</Application.Resources>

WPF MaterialDesign SolidColorBrush Value Conflict

I am using Material Design to style my WPF app. I have used the following code to style a tab view:
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!-- Material Design -->
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
<!-- Styles -->
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!--<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />-->
</ResourceDictionary.MergedDictionaries>
<!-- Tab Controller Primary Styles -->
<SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#212121"/>
<SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#212121"/>
<!-- This causes a clash between the tabview and the textbox colors -->
<SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#212121"/>
<!--<SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#BB86FC"/>-->
<SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#FFFFFF"/>
<SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#212121"/>
<SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#212121"/>
</ResourceDictionary>
<!-- Tab Controller Secondary Styles -->
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
</ResourceDictionary.MergedDictionaries>
<SolidColorBrush x:Key="SecondaryAccentBrush" Color="#BB86FC"/>
<SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="#BB86FC"/>
</ResourceDictionary>
<ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}" />
</ResourceDictionary>
The issue I have is that to style the TabController primary style, it changes the color of the TextBox in my application.
When I apply a dark color to style the tab view, the TextBox loses its purple highlight.
But now in the second image, when I change the color back to purple for the TextBox, the TabView looks horrific.
They both depend on the same dictionary key for their styles. Is there a way I can change the x:Key value depending on what object type it is applied to? What is the best way to preserve the styles I need for both components.
This is for my university dissertation so I appreciate the help!
All the best.

The Material Design brushes are used in various styles of controls using DynamicResource. That means if you replace or register a brush with the same x:Key at runtime, all dynamic references will be adapted and the change will be applied to all controls in scope of the resource dictionary where you defined it.
In general, you would have to copy the default style and template for the control that you want to apply the changed color to and adapt it, e.g. by creating a separate brush and using it instead of the original, given the values are assigned in the control template directly instead of template bindings.
In case of the TabablzControl there might be an easier way. From its default style at GitHub, I can only see one usage of PrimaryHueMidBrush that is set as BorderBrush in a Setter. You can ovewrite this in your style.
<Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}">
<Setter Property="BorderBrush" Value="#212121"/>
</Style>
Of course, you could create a custom brush and reference it via DynamicResource instead of hardcoding it.
<Setter Property="BorderBrush" Value="{DynamicResource MyCustomPrimaryHueMidBrush}"/>

How to merge different resources in single App.xaml?

I've a long coded App.xaml which contains code for a Custom stylable window that I downloaded from the Internet.
<Application x:Class="MyProject.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MyProject"
xmlns:sw="clr-namespace:MyProject.StyleableWindow"
StartupUri="MainWindow.xaml">
<Application.Resources>
<SolidColorBrush x:Key="WindowColor" Color="Red"/>
<SolidColorBrush x:Key="WindowBackColor" Color="#FFC3C3C3"/>
<SolidColorBrush x:Key="WindowForeColor" Color="Black"/>
<SolidColorBrush x:Key="WindowForeHighlightColor" Color="WhiteSmoke"/>
................
................
................
................
<Setter Property="Background" Value="Black"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="Template" Value="{StaticResource WindowTemplate}"/>
</Style>
Yesterday, I downloaded a custom Toggle Button Control. In order to make it function, I tried to merge below code in the App.xaml
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="SwitchTypeToggleButton.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
But it doesn't work. I keep getting the following error:
Each dictionary must have an associated key
My Toggle Button Control Code- (Stored in MyProject > Folder1 > Folder2)
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="SwitchTypeToggleButton"
TargetType="{x:Type ToggleButton}">
<Style.Resources>
<Color x:Key="Color.Additional.LightGrey">#989EA8</Color>
<Color x:Key="Color.Additional.MediumGrey">#61656B</Color>
............
............
What do I have to do to get rid of the error? Any help is appreciated.

The resources in app.xaml should look like this:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="SwitchTypeToggleButton.xaml" />
</ResourceDictionary.MergedDictionaries>
<SolidColorBrush x:Key="WindowColor" Color="Red"/>
...
<Setter Property="Template" Value="{StaticResource WindowTemplate}"/>
</ResourceDictionary>
</Application.Resources>
The reason is, that Application.Resources actually always needs to be a ResourceDictionary. As long as you use "simple" resources, the ResourceDictionary is created implicitly. But as soon as you want to merge another ResourceDictionary you have to specify the containing one explicitly.

Multiple DataGrids with different Resources?

I have two DataGrids with different styles and Resources but one DataGrid Resource overwrites the other DataGrid Resource.
So my question is can I set a specific resource to a DataGrid with for example a x:Key?
My XAML Code:
First DataGrid.Resources:
<DataGrid.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Black"/>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Black"/>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" Color="White"/>
</DataGrid.Resources>
Second DataGrid.Resources:
<DataGrid.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="{x:Static SystemColors.HighlightColor}"/>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" Color="{x:Static SystemColors.HighlightTextColor}"/>
</DataGrid.Resources>

I hope that I am understanding your question correctly, on how you want 2 data grid resources not to conflict with each other. You could try something likes this if they are going to be in the same file...
<DataGrid.Resources>
<Style x:Key="DataGrid1Style" TargetType="{x:Type DataGrid}">
<Setter Property="......" Value="....." />
...
...
...
</Style>
<Style x:Key="DataGrid2Style" TargetType="{x:Type DataGrid}">
<Setter Property="......" Value="....." />
...
...
...
</Style>
</DataGrid.Resources>
If they are not in the same file I would suggest that you create a Resource Dictionary file and add the 2 styles in there and just add it to your App.xaml like this assuming you have a Resource folder > Styles folder > and then your DatagridStyles.xaml file:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/DatagridStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
This allows you to have global access to the 2 datagrid styles
You would then assign the styles to your datagrid like this...
<DataGrid Style="{StaticResource DataGrid1Style}">
</DataGrid>
<DataGrid Style="{StaticResource DataGrid2Style}">
</DataGrid>
Let me know if this works

Change slider bar color

It should be very easy to do this but I haven't found the information that I need. What I want is as simple as changing the color of the slider bar:
I'm using ModernUI and the default bar color is very similar to my background and I want to make it a bit lighter.

You should be able to change it editing the template.
Right click your Slider, Edit Template -> Edit Copy.;.
A new window will appear asking you where VS should put the XAML code for the ControlTemplate and Styles. Chek the tags and such.
Good luck!
Edit:
Ok, here it goes.
Assuming that you already have a ModernUI App, create a new folder called Assets, right click it Add -> New Item... -> ModernUI Theme. Call it whatever you like it.
Inside the newly created XAML file insert these SolidColorBrush under the AccentColor Color tag:
<SolidColorBrush x:Key="SliderSelectionBackground" Color="Red" />
<SolidColorBrush x:Key="SliderSelectionBorder" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBackground" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBackgroundDisabled" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBackgroundDragging" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBackgroundHover" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBorder" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBorderDisabled" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBorderDragging" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBorderHover" Color="Red" />
Each one of these represents a state of the Thumb (the slider "rectangle"). After that open your App.xaml file and include your theme there (this is what my file looks like):
<Application x:Class="ModernUIApp1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
<ResourceDictionary Source="/Assets/ModernUI.Theme1.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
The <ResourceDictionary Source="/Assets/ModernUI.Theme1.xaml" /> bit represents my theme.
Setting all the colors to Red, this is what it looked like:
I guess that's more clear!
Hope you like it.
EDIT:
It will change when you apply your theme. But, as you're familiar with styles, I'm sending the complete template. What you can do is create a UserDictionary with only this template and when you you want to use it, change the slider Template property. You'll want to change only the Thumb Tags. Pastebin code
And if you want to change only THIS one put the template between <Windows.Resources> or <Slider.Resources> - Another option would be create your own control

I found two approaches:
You can customize your slider by insert corresponding brushes in
appropriate Slider.Resources section.
You can add brushes to separate xaml file with dictionary and then
merge it with corresponding slider in the Slider.Resources. In some cases it fits better because you can change colors of few controls at once.
Any does not need to changing of the control's template.
Both approaches are presented below:
Page1.xaml
<Grid Style="{StaticResource ContentRoot}">
<StackPanel>
<!-- Slider with default theme and colors from ModernUI -->
<Slider/>
<!-- Slider with custom colors from approach 1 -->
<Slider>
<Slider.Resources>
<SolidColorBrush x:Key="SliderSelectionBackground" Color="Green" />
<SolidColorBrush x:Key="SliderSelectionBorder" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBackground" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBackgroundDisabled" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBackgroundDragging" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBackgroundHover" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBorder" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBorderDisabled" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBorderDragging" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBorderHover" Color="Green" />
</Slider.Resources>
</Slider>
<!-- Slider with custom colors from approach 2 -->
<Slider>
<Slider.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary1.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Slider.Resources>
</Slider>
</StackPanel>
</Grid>
Dictionary1.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="SliderSelectionBackground" Color="Blue" />
<SolidColorBrush x:Key="SliderSelectionBorder" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBackground" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBackgroundDisabled" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBackgroundDragging" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBackgroundHover" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBorder" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBorderDisabled" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBorderDragging" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBorderHover" Color="Blue" />
</ResourceDictionary>
As result you get following:

Foreground property is used to fill the "completed" part of the slider with a particular color. (Background does the uncompleted part.)
<Slider Value="40" Maximum="100" Foreground="Red" />

Here you have the templates you should use: Slider Styles and Templates
The property you are looking to edit is the TrackBackground.BackGround.
If you define a style for this control template and put it either in you app.xaml or in the window.resources or in any other file, as long as you give it a key you can use it in a specific slider through the "Style" property of that slider using that same key.

Windows 8.1 Store/Phone Apps.
Add this to the App.xaml and change the color values to your liking:
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="SliderTrackDecreaseBackgroundThemeBrush" Color="#FFFF0000" />
<SolidColorBrush x:Key="SliderTrackDecreasePointerOverBackgroundThemeBrush" Color="#FF00FF00" />
<SolidColorBrush x:Key="SliderTrackDecreasePressedBackgroundThemeBrush" Color="#FF0000FF" />
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrastBlack">
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrastWhite">
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
You probably only want to change the slider for the default theme and probably only the three color values shown above. For all colors / resources that you can change, see this link at MSDN: Slider styles and templates.

For what it's worth, the only way I could change the Slider Thumb color on Win10 UWP for Phone was to overwrite the System Foreground brush. (You can also apparently completely re-template the whole Slider)
So, I put into my App.xaml
<Application
x:Class="App1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
RequestedTheme="Dark">
<Application.Resources>
<SolidColorBrush x:Key="SystemControlForegroundAccentBrush" Color="White" />
</Application.Resources>
</Application>
The addition to Application.Resources is the really important thing here. It's where we're overwriting the Foreground color for ALL common elements, like Checkbox, ContentDialog, ProgressRing, etc.... So, that's the downside to this method too.
Changing the Thumb color on a Slider is a known problem point for XAML UWP. Microsoft has plans to make it easier in the immediate future.