We Keep Coding

Changing Material Design Icon and Text to Primary Color

It is my first time using material design and whilst everything is working very affectly I was slightly confused with the icon colors.
In my App.xaml I have the following resource dictionaries;
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<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.Grey.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Yellow.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
And on my form I have an icon and textblock;
<DockPanel>
<materialDesign:PackIcon x:Name="iconWarning" Width="25" Height="25" Margin="5" Kind="Warning" Foreground="OrangeRed" />
<TextBlock x:Name="lblWarning" Text="Warning" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5" Padding="5" Foreground="OrangeRed"/>
</DockPanel>
However, in my C# code I have a method which can change the theme in use, and also changes the primary and secondary colors. However, how can I set my textblock and icon to use the primary color similarly to how you can set with a colorzone for example using mode as oppsoed to having to use Foreground="OrangeRed";
Mode="PrimaryMid"

You'll find the Primary* brush resources here:
<materialDesign:PackIcon x:Name="iconWarning" Width="25" Height="25" Margin="5" Kind="Warning"
Foreground="{StaticResource PrimaryHueMidBrush}" />
<TextBlock x:Name="lblWarning" Text="Warning" HorizontalAlignment="Left" VerticalAlignment="Center"
Margin="5" Padding="5"
Foreground="{StaticResource PrimaryHueMidBrush}" />

WPF line color is darker than its brush color

In my WPF application, I am using a line and some rectangles to make a graph. However, when I set the line to white, it appeared grey. I changed the line color to be the same as the red rectangle next to it and it is obvious that the line is darker. Here is my instantiation of the line and rectangle:
<Line Grid.Row="2" X1="0" Y1="0" X2="0" Y2="105"
StrokeThickness="1" Stroke="{StaticResource FgRedBrush}" SnapsToDevicePixels="True" UseLayoutRounding="True"
Margin="10 0 0 10" VerticalAlignment="Bottom" StrokeEndLineCap="Flat" />
<Rectangle Grid.Row="2" Width="100" Height="30"
Fill="{StaticResource FgGreenBrush}"
Margin="11 0 0 25" VerticalAlignment="Bottom" HorizontalAlignment="Left" />
<Rectangle Grid.Row="2" Width="170" Height="30"
Fill="{StaticResource FgRedBrush}"
Margin="11 0 0 70" VerticalAlignment="Bottom" HorizontalAlignment="Left" />
Also, here is a picture of the components:
Nevermind the hardcoding, I am just getting a feel for the layout.
File with the definition of brush resources:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Financial_Manager.Colors">
<Color x:Key="ForegroundLight">#D7F6F6</Color>
<Color x:Key="ForegroundDark">#898989</Color>
<Color x:Key="ForegroundPurple">#D228FF</Color>
<Color x:Key="ForegroundBlue">#4DC6D2</Color>
<Color x:Key="ForegroundOrange">#F99D10</Color>
<Color x:Key="ForegroundGreen">#37AE53</Color>
<Color x:Key="ForegroundRed">#CE260B</Color>
<Color x:Key="ForegroundYellow">#CCFF00</Color>
<SolidColorBrush x:Key="FgLightBrush" Color="{StaticResource ForegroundLight}" />
<SolidColorBrush x:Key="FgDarkBrush" Color="{StaticResource ForegroundDark}" />
<SolidColorBrush x:Key="FgPurpleBrush" Color="{StaticResource ForegroundPurple}" />
<SolidColorBrush x:Key="FgBlueBrush" Color="{StaticResource ForegroundBlue}" />
<SolidColorBrush x:Key="FgOrangeBrush" Color="{StaticResource ForegroundOrange}" />
<SolidColorBrush x:Key="FgGreenBrush" Color="{StaticResource ForegroundGreen}" />
<SolidColorBrush x:Key="FgRedBrush" Color="{StaticResource ForegroundRed}" />
<SolidColorBrush x:Key="FgYellowBrush" Color="{StaticResource ForegroundYellow}" />
<Color x:Key="BackgroundLight">#0D0A1C</Color>
<Color x:Key="BackgroundDark">#080610</Color>
<SolidColorBrush x:Key="BgLightBrush" Color="{StaticResource BackgroundLight}" />
<SolidColorBrush x:Key="BgDarkBrush" Color="{StaticResource BackgroundDark}" />

With the help of Clemens in the comments, I have discovered that as the line thickness approaches 2, the color value approaches the true color. While I still don't know why and would be open to learning, a temporary fix is to set the thickness to 1.99 so that the color appears the same. While the thickness is essentially 2, it still has the same visual appearance as 1.

WPF Override style in different assembly

I am trying to make a plugin WPF application that can be referenced on other applications and the latter can change the styles of the former.
My example is based on Xceed's BusyIndicator. I have a style for the BusyIndicator in my plugin WPF app and want the style of that BusyIndicator to be changed on other applications.
Example:
WPF Plugin Application: Let's call it OverrideBusyIndicator. The solution looks like the image below where a MainWindow containing the BusyIndicator exists and the BusyIndicator style is in BusyContextResourceDictionary.xaml
The content of BusyContextResourceDictionary.xaml is this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:xceed="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type xceed:BusyIndicator}">
<Setter Property="BusyContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Margin="4">
<TextBlock Text="Downloading Email" FontWeight="Bold" HorizontalAlignment="Center"/>
<StackPanel Margin="4">
<TextBlock Text="Downloading message 4/10..."/>
<ProgressBar Value="40" Height="15"/>
</StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="Pause" HorizontalAlignment="Right" Margin="0 0 2 0"/>
<Button Grid.Column="1" Content="Cancel" HorizontalAlignment="Left" Margin="2 0 0 0"/>
</Grid>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I created another solution that will reference my assembly above. Let's call it OverrideBusyIndicator2. This one has no main window and its App.xaml just calls the other OverrideBusyIndicator.MainWindow. I then added a BusyContextResourceDictionary2.xaml that I EXPECT to override the style of the BusyIndicator but it does not. Any way I could achieve this behavior?
<Application x:Class="OverrideBusyIndicator2.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xceed="http://schemas.xceed.com/wpf/xaml/toolkit"
StartupUri="pack://application:,,,/OverrideBusyIndicator;component/MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="BusyContextResourceDictionary2.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
For sample purposes BusyContextResourceDictionary2.xaml will just change the textblock text from "Downloading email" to "Not Downloading email".
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:xceed="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/OverrideBusyIndicator;component/BusyContextResourceDictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
<!--I am using BasedOn to override the BusyContextResourceDictionary.xaml-->
<Style TargetType="{x:Type xceed:BusyIndicator}" BasedOn="{StaticResource {x:Type xceed:BusyIndicator}}">
<Setter Property="BusyContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Margin="4">
<TextBlock Text="NOT Downloading Email" FontWeight="Bold" HorizontalAlignment="Center"/>**

It would be helpful to see the style for the xceed:BusyIndicator control. You might need to define the default style key property for your control.

How to disable the gray overlay when the hamburger menu is active in Material Design In XAML Toolkit (WPF)

Here's a picture of the overlay from the sample app:
Here's the git page of the Material Design In XAML Toolkit (you can download the demo project here): Toolkit:https://github.com/ButchersBoy/MaterialDesignInXamlToolkit
This is probably property somewhere in the Material Design In XAML Toolkit library and i am asking if anyone knows how to set it (or if the overlay can even be turned off).
<Window x:Class="MaterialDesignColors.WpfExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpfExample="clr-namespace:MaterialDesignColors.WpfExample"
xmlns:domain="clr-namespace:MaterialDesignColors.WpfExample.Domain"
xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:domain1="clr-namespace:MaterialDesignDemo.Domain"
xmlns:materialDesignDemo="clr-namespace:MaterialDesignDemo"
Title="Material Design in XAML" Height="800" Width="1100"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
TextElement.FontWeight="Regular"
TextElement.FontSize="13"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
Background="{DynamicResource MaterialDesignPaper}"
FontFamily="{StaticResource MaterialDesignFont}" Icon="favicon.ico">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Shadows.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ToggleButton.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- data template used for the dialogs example, defines a View for a ViewModel of type DateTime -->
<DataTemplate DataType="{x:Type system:DateTime}">
<StackPanel Margin="16">
<TextBlock>England win the World Cup:</TextBlock>
<TextBlock Margin="0 8 0 0" Text="{Binding }" />
<TextBlock Margin="0 8 0 0" >You will never see that again.</TextBlock>
<Button Margin="0 8 0 0" IsDefault="True" Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" Style="{DynamicResource MaterialDesignFlatButton}">AWESOME</Button>
</StackPanel>
</DataTemplate>
</ResourceDictionary>
</Window.Resources>
<materialDesign:DialogHost Identifier="RootDialog">
<materialDesign:DrawerHost IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
<materialDesign:DrawerHost.LeftDrawerContent>
<DockPanel MinWidth="212">
<ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}"
DockPanel.Dock="Top"
HorizontalAlignment="Right" Margin="16"
IsChecked="{Binding ElementName=MenuToggleButton, Path=IsChecked, Mode=TwoWay}" />
<ListBox x:Name="DemoItemsListBox" Margin="0 16 0 16" SelectedIndex="0"
PreviewMouseLeftButtonUp="UIElement_OnPreviewMouseLeftButtonUp">
<ListBox.ItemTemplate>
<DataTemplate DataType="domain:DemoItem">
<TextBlock Text="{Binding Name}" Margin="32 0 32 0" />
</DataTemplate>
</ListBox.ItemTemplate>
<domain:DemoItem Name="Home">
...
<domain:DemoItem Name="Shadows">
<domain:DemoItem.Content>
<wpfExample:Shadows />
</domain:DemoItem.Content>
</domain:DemoItem>
</ListBox>
</DockPanel>
</materialDesign:DrawerHost.LeftDrawerContent>
<DockPanel>
<materialDesign:ColorZone Padding="16" materialDesign:ShadowAssist.ShadowDepth="Depth2"
Mode="PrimaryMid" DockPanel.Dock="Top">
<DockPanel>
<ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="False"
x:Name="MenuToggleButton"/>
<materialDesign:PopupBox DockPanel.Dock="Right" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
<StackPanel>
<Button Content="Hello World" Click="MenuPopupButton_OnClick"/>
<Button Content="Nice Popup" Click="MenuPopupButton_OnClick"/>
<Button Content="Goodbye" Click="MenuPopupButton_OnClick"/>
</StackPanel>
</materialDesign:PopupBox>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22">Material Design In XAML Toolkit</TextBlock>
</DockPanel>
</materialDesign:ColorZone>
<ContentControl Margin="16" Content="{Binding ElementName=DemoItemsListBox, Path=SelectedItem.Content}" />
</DockPanel>
</materialDesign:DrawerHost>
</materialDesign:DialogHost>
</Window>

The black shade is due to a grid defined in Generic.xaml:
<Grid x:Name="PART_ContentCover" Background="{x:Null}" Opacity="0"
IsHitTestVisible="False" Focusable="False" />
Which is animated to set the opacity to 0.56 when the drawer is drawn. Unfortunatelly this grid does not belong to any template so you cannot change it in client xaml.
The other option is to change the shade's black brush which is also defined in Generic.xaml:
<SolidColorBrush x:Key="BlackBackground" Color="Black" />
But this is also something I wouldn't know how to change from a client xaml, so the only advice until someone with more WPF skillz gives a better option is to simply recompile the source and change the black brush to:
<SolidColorBrush x:Key="BlackBackground" Color="#00000000" />
Alternatively you can use the flyout control which is shown in the other demo that does not have the dark shade feature but other than that is the same.
Update: I've found one way to solve this. You can subclass DrawerHost like this:
public class DrawerHostEx : DrawerHost
{
public DrawerHostEx()
{
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
var grid = GetTemplateChild(TemplateContentCoverPartName) as System.Windows.Controls.Grid;
grid.Visibility = System.Windows.Visibility.Collapsed;
}
}
Then you simply replace DrawerHost with DrawerHostEx in the XAML.

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>