We Keep Coding

DefaultTextForegroundThemeBrush overrides TextBox style

Problem
Hey guys,
I've got a problem regarding the DefaultTextForegroundThemeBrush in WinUi 3. I read here that I can use the DefaultTextForegroundThemeBrush to override the foreground value for all default text.
However if I override that Brush with my desired color (white) most of the TextBlocks get white (not all though and I do not know why either).
Strangely all TextBoxes will get gray by default and the Text inside will be black. Even though I did override the BackgroundBrush for TextBoxes as well.
For me it seems like a pretty strange behavior I couldn't get behind.
Furthermore only TextBoxes are affected. A PasswordBox I use remains unaffected.
I did not find anything googling for this strange behavior.
Maybe some of you guys can help me. Let me know if you need anything else.
Kind regards!
Code
Overriding TextControl Brushes
<Thickness x:Key="TextControlBorderThemeThickness">1,1,1,1</Thickness>
<SolidColorBrush x:Key="TextControlBackground" Color="{ThemeResource PrussianBlueColor}"/>
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="{ThemeResource VividSkyBlueColor}"/>
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{ThemeResource PrussianBlueColor}"/>
<SolidColorBrush x:Key="TextControlForeground" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="TextControlForegroundPointerOver" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="TextControlButtonForeground" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="TextControlButtonForegroundPointerOver" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="TextControlButtonForegroundPressed" Color="{ThemeResource LighterBlackColor}"/>
<SolidColorBrush x:Key="TextControlBorderBrush" Color="{ThemeResource VividSkyBlueColor}"/>
<SolidColorBrush x:Key="TextControlBorderBrushPointerOver" Color="{ThemeResource CarolinaBlueColor}"/>
<SolidColorBrush x:Key="TextControlPlaceholderForeground" Color="{ThemeResource LighterBlackColor}"/>
<SolidColorBrush x:Key="TextControlPlaceholderForegroundFocused" Color="{ThemeResource LighterBlackColor}"/>
<SolidColorBrush x:Key="TextControlPlaceholderForegroundPointerOver" Color="{ThemeResource LighterBlackColor}"/>
Overriding DefaultTextForegroundThemeBrush
<SolidColorBrush x:Key="DefaultTextForegroundThemeBrush" Color="{ThemeResource WhiteColor}"/>
Screenshots
TextBox without DefaultTextForegroundThemeBrush set
TextBox with DefaultTextForegroundThemeBrush set

Disable wpf resource inheritance

For performance and isolation reasons, I have an application that uses cross-process communication, and utilizes System.AddIn.Pipeline.FrameworkElementAdapters.ContractToViewAdapter() and System.AddIn.Pipeline.FrameworkElementAdapters.ViewToContractAdapter() methods to transfer the GUI controls from the plugin processes to the host process.
The plugin GUI controls are mostly Microsoft-provided controls supporting a rehosted Microsoft Workflow Foundation interface. Many of these have hard-coded colors and brushes in their xaml definitions, and are not easily rethemed.
I support two different host applications. One of them has extensive theming via an Application-level ResourceDictionary, and the other does not do any custom theming.
In the application with no custom theming, controls display thusly
But in the application with custom theming, it looks like this
It picks up some of the theme from the host application, but because the Microsoft controls hard-code much of their colors, it's incomplete and looks awful.
I've used Snoop to find the brushes and colors that the themed application is forcing onto these controls, and from that, I made a resource dictionary with the right colors.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:s="clr-namespace:System;assembly=mscorlib">
<Color x:Key="aC03">#FF000000</Color>
<Color x:Key="aC09">#FFFFFFFF</Color>
<Color x:Key="aC10">#FF858C9D</Color>
<Color x:Key="aC11">#FF000000</Color>
<Color x:Key="aC13">#FF8C9097</Color>
<Color x:Key="aC14">#FFFFFFFF</Color>
<Color x:Key="aC15">#FF777D87</Color>
<Color x:Key="aC16">#FF6E7582</Color>
<Color x:Key="aC17">#FFE9ECEE</Color>
<Color x:Key="aC20">#FF000000</Color>
<Color x:Key="aC21">#FF000000</Color>
<GradientStopCollection x:Key="aG01">
<GradientStop Offset="0.00" Color="{StaticResource aC10}" />
<GradientStop Offset="0.10" Color="{StaticResource aC13}" />
<GradientStop Offset="0.49" Color="{StaticResource aC15}" />
<GradientStop Offset="0.50" Color="{StaticResource aC16}" />
<GradientStop Offset="1.00" Color="{StaticResource aC16}" />
</GradientStopCollection>
<SolidColorBrush x:Key="ControlTextBrush" PresentationOptions:Freeze="true" Color="{StaticResource aC03}" />
<SolidColorBrush x:Key="ControlBrush" PresentationOptions:Freeze="true" Color="{StaticResource aC14}" />
<SolidColorBrush x:Key="TextBox_Default_Layer1" PresentationOptions:Freeze="true" Color="{StaticResource aC14}" />
<SolidColorBrush x:Key="TextBox_Default_Layer2" PresentationOptions:Freeze="true" Color="{StaticResource aC21}" />
<SolidColorBrush x:Key="TextBox_Default_Layer3" PresentationOptions:Freeze="true" Color="{StaticResource aC11}" />
<SolidColorBrush x:Key="ComboBox_Default_Layer2" PresentationOptions:Freeze="true" Color="{StaticResource aC20}" />
<LinearGradientBrush x:Key="ComboBox_Default_Layer3" PresentationOptions:Freeze="true" GradientStops="{StaticResource aG01}" StartPoint="0,0" EndPoint="0,1" />
<SolidColorBrush x:Key="ComboBox_Default_Text" PresentationOptions:Freeze="true" Color="{StaticResource aC03}" />
<SolidColorBrush x:Key="WindowBrush" PresentationOptions:Freeze="true" Color="{StaticResource aC17}" />
<SolidColorBrush x:Key="ContextMenu_Layer1" PresentationOptions:Freeze="true" Color="{StaticResource aC09}" />
</ResourceDictionary>
If I apply this resource dictionary to either the root rehosted control, or that and all of its children, it looks like this
So even overriding the resources seems to be insufficient.
Is there a way to suppress/prevent/disable resource inheritance, or do I need to override each and every resource (color, brush, style, template, et.c) that affects my controls?
Edit: The style overriding code was requested. I've tested running the following on the Loaded event and the Initialized event (individually, not together), and running on the GUI thread vs in a task. Calling it on the loaded event produces some change, calling it on the initialized event does not
var resources = new ResourceDictionary { Source = new Uri("pack://application:,,,/WorkflowRemoting;component/Host/ResourceOverride.xaml") };
Action<DependencyObject, ResourceDictionary>
SetResources = null;
SetResources = (element, dictionary) =>
{
DependencyObject[]
children = null;
#if runInTask
Dispatcher.Invoke(() =>
{
#endif
var nChildren = VisualTreeHelper.GetChildrenCount(element);
children = Enumerable.Range(0, nChildren).Select(x => VisualTreeHelper.GetChild(element, x)).ToArray();
#if runInTask
});
#endif
foreach (var child in children)
{
#if runInTask
Dispatcher.Invoke(() =>
{
#endif
var fe = child as FrameworkElement;
if (fe != null)
if (this.Resources == null)
fe.Resources = dictionary;
else
fe.Resources.MergedDictionaries.Add(dictionary);
#if runInTask
});
#endif
SetResources(child, dictionary);
}
};
#if runInTask
Task.Run(() =>
{
#endif
SetResources(this, resources);
#if runInTask
});
#endif

If you are displaying the controls, just zero out the style for each of the controls as such:
<Button Style="{x:Null}" Content="Press me"/>

Template Button for reuse in code

I'm sorry if this is very obvious, but it's been years since I used C#, and I can't seem to find the correct google search term for this.
I am trying to create a button template in XAML that will be used in a, for example, 2x2 grid. This button has to be added in code, because the user should be able to define how many buttons he wants during runtime. The button is supposed to contain another button and a label.
<Window x:Class="Soundboard.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="750" Width="1200">
<Window.Resources>
<ControlTemplate x:Key="myButton" TargetType="Button">
<Canvas x:Name="mainCanvas">
<Button x:Name="childButton" Height="30" Width="30" HorizontalAlignment="Right" VerticalAlignment="Top">
<Button.Background>
<ImageBrush ImageSource="Resources/picture.png"/>
</Button.Background>
</Button>
<Label x:Name="nameLabel" Content="Label" HorizontalAlignment="Center" VerticalAlignment="Bottom"></Label>
</Canvas>
</ControlTemplate>
</Window.Resources>
<Grid x:Name="myGrid">
</Grid>
I can call the button fine by adding this line in XAML myGrid (to test)
<Button Template="{StaticResource myButton}" Height="200" Width="200" Margin="300,0,0,0"></Button>
<Button Template="{StaticResource smyButton}" Height="200" Width="200" Margin="0,0,0,0"></Button>
But I don't seem to be able to find a way to add that button in code. This is one of my tries that will not work:
Button b = (Button)FindResource("myButton");
b.SetValue(Grid.RowProperty, r); // r is int from row for loop
b.SetValue(Grid.ColumnProperty, c); // c is int from column for loop
myGrid.Children.Add(b);
But b will always be null. Can someone help me? I am guessing I am using some wrong method in the XAML, but I really have no idea at the moment.

myButton is a ControlTemplate instead of a Button as currently being accessed in the code, so you may modify the code as follows
Button b = new Button();
b.Template = (ControlTemplate)FindResource("myButton");
so in above example you retrieve the ControlTemplate via FindResource method and apply it to a newly created button.
rest remains the same

Like this line and it has been used on app.xaml files :
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="ListBoxItemDisabledForegroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxItemPointerOverBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxItemPointerOverForegroundThemeBrush" Color="#f7f6f6" />
<SolidColorBrush x:Key="ListBoxItemPressedBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxItemPressedForegroundThemeBrush" Color="#f7f6f6" />
<SolidColorBrush x:Key="ListBoxItemSelectedBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxItemSelectedDisabledBackgroundThemeBrush" Color="#66FFFFFF" />
<SolidColorBrush x:Key="ListBoxItemSelectedDisabledForegroundThemeBrush" Color="#99000000" />
<SolidColorBrush x:Key="ListBoxItemSelectedForegroundThemeBrush" Color="#f7f6f6" />
<SolidColorBrush x:Key="ListBoxItemSelectedPointerOverBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxBorderThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxDisabledForegroundThemeBrush" Color="#66FFFFFF" />
<SolidColorBrush x:Key="ListBoxFocusBackgroundThemeBrush" Color="#f7f6f6" />
<SolidColorBrush x:Key="ListBoxForegroundThemeBrush" Color="#f7f6f6" />
</ResourceDictionary>

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.

Custom GridViewItem Selection - Windows Store App C#/XAML

I'm trying to change the style of selecting items in a gridview. Below the code I'm using in StandardStyles.xaml:
<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="Transparent"/>
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Opacity="0.25" Color="Blue"/>
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Opacity="0.7" Color="Blue"></SolidColorBrush>
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="Blue"/>
But I need what the border with the selected icon stay with some style and the background transparent, like this:
Selected Image Style
Could someone help me?

When I use a rectangle in StandardStyles.xaml beneath each GridViewItem the custom selection works.
<DataTemplate x:Key="MyTemplete">
<Grid HorizontalAlignment="Left" Background="Transparent">
<Rectangle>
<Rectangle.Fill>
<SolidColorBrush Color="White" Opacity="1"/>
</Rectangle.Fill>
</Rectangle>
...
</Grid>
</DataTemplate>

Use the code below to set the style of a selected item. It will set the border color, the text color and the check icon color.
<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="#323232"></SolidColorBrush>
<SolidColorBrush x:Key="ListViewItemSelectedForegroundThemeBrush" Color="White"></SolidColorBrush>
<SolidColorBrush x:Key="ListViewItemCheckThemeBrush" Color="White"></SolidColorBrush>
Regards.