We Keep Coding

WPF binding mahapps metro icons in template - Tag binding not working

I have a navbar with several buttons in it. The buttons all use the same style, defined in a ResourceDictionary.
I am trying to add an icon from Mahapps to each button. Each button will need a different kind of icon, which I'd like to set on the view.
In order to achieve this, I need to be able to pass the icon kind to the template via some property of the button.
I am unable to pass the icon kind to the template.
I am testing this on a new project (WPF netcore3.1)
I have seen other posts (post1, post2) that suggest using a rectangle rather than iconPacks, and binding the Visual property of the rectangle using the Tag property of the button:
<Application x:Class="WpfApp1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp1"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary Source="/IconStyle.xaml" />
</Application.Resources>
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<StackPanel>
<Button Style="{StaticResource IconStyle}" Foreground="Red">
<Button.Tag>
<iconPacks:Modern Kind="Home" Width="24" Height="24" />
</Button.Tag>
</Button>
</StackPanel>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp1">
<Style x:Key="IconStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal"
DataContext="{Binding RelativeSource={RelativeSource AncestorType=Button}}">
<Rectangle Width="24" Height="24" Fill="{Binding Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{Binding Tag}" />
</Rectangle.OpacityMask>
</Rectangle>
<TextBlock Margin="10 0 10 0" VerticalAlignment="Center" Text="John Doe"
FontSize="24" FontWeight="Normal" FontFamily="Segoe UI Light" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But doesn't display any icons at all for me.
Any suggestions?

With the IconPacks you don't need the OpacityMask usage. Instead you can work with the PackIconModern control or any other control from the IconPacks package.
Here is an example with only the PackIconModern control from the MahApps.Metro.IconPacks.Modern NuGet package (v4.11.0).
The button style:
<Style x:Key="IconStyle" TargetType="{x:Type Button}">
<Setter Property="Padding" Value="10 5" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="FontSize" Value="24" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontFamily" Value="Segoe UI Light" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<iconPacks:PackIconModern
Kind="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}, Path=Tag, Mode=OneWay}"
Width="24"
Height="24"
VerticalAlignment="Center" />
<TextBlock Margin="10 0 0 0"
VerticalAlignment="Center"
Text="{Binding}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
With that style you can the do something like that:
<Grid>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="5 10">
<Button Style="{StaticResource IconStyle}"
Foreground="Crimson"
Content="John Doe"
Tag="{x:Static iconPacks:PackIconModernKind.Home}" />
<Button Style="{StaticResource IconStyle}"
Foreground="ForestGreen"
Content="Works..."
Tag="{x:Static iconPacks:PackIconModernKind.Cloud}" />
</StackPanel>
</Grid>
The namespace for the IconPacks control is xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks".
If you need more icons from another package the simply add the NuGet package and use this control then. It's also possible to use the main IconPacks package which contains all icon controls and a control which can handle all possible icon kind enumerations. You will find more information at the wiki of the repository ion GitHub (MahApps.Metro.IconPacks).

Setting the Template property on a UserControl is not supported

I want to make a UserControl which can be used like the example below, however I don't know how to implement that. I found that example somewhere on WPF but seams like this is not supported anymore?
I get following error "WinRT information: Setting the Template property on a UserControl is not supported."
<UserControl
x:Class="Test.Gui.Widgets.WidgetFrame"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<UserControl.Template>
<ControlTemplate TargetType="UserControl">
<Grid BorderBrush="Red" BorderThickness="1">
<ContentPresenter/>
<TextBlock FontSize="100" Foreground="AntiqueWhite">This is a Test</TextBlock>
</Grid>
</ControlTemplate>
</UserControl.Template>
</UserControl>
Using the control
<local:WidgetFrame>
<TextBlock FontSize="20" Foreground="Green">Content Presentation</TextBlock>
</local:WidgetFrame>

I found the solution by looking into other github repos
Seperate xaml and cs file
WidgetFrame.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:local="using:Test.Gui.Widgets">
<Style TargetType="local:WidgetFrame">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid BorderBrush="Red" BorderThickness="1">
<ContentPresenter/>
<TextBlock FontSize="100" Foreground="AntiqueWhite">This is a Test</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</ResourceDictionary>
Add it to the App.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<ResourceDictionary Source="ms-appx:///Gui/Widgets/WidgetFrame.xaml"/>
<!-- Other merged dictionaries here -->
</ResourceDictionary.MergedDictionaries>
<!-- Other app resources here -->
</ResourceDictionary>
</Application.Resources>
WidgetFrame.cs
internal class WidgetFrame : ContentControl
{
public WidgetFrame() { }
}
Now I can place the content with xaml without overwriting the template
<widgets:WidgetFrame Width="200" Height="200">
<Button>Yes!</Button>
</widgets:WidgetFrame>

Button Style is not applying XAML

So I have been learning WPF for a little while now and I am starting to use styles to make my forms look a little better.
The issue I am running into is for some reason my button style will not be applied anywhere. I am pretty sure I am overwriting the default button style. All of my other styles are working just fine I just can't figure this one out. Here is my code.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Employee_Time_Entry">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Colors.xaml" />
<ResourceDictionary Source="Fonts.xaml" />
<ResourceDictionary Source="Texts.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- Regular button -->
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Background" Value="{StaticResource BackgroundOrangeBrush}" />
<Setter Property="Foreground" Value="{StaticResource ForegroundLightBrush}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="FontSize" Value="{StaticResource FontSizeLarge}" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Padding" Value="50 10" />
<Setter Property="Margin" Value="0 10" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border x:Name="border"
CornerRadius="10"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="True">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here is the form code where the button will not apply the style.
<Page x:Class="Employee_Time_Entry.Views.Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Employee_Time_Entry"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="500"
Title="Login">
<Border>
<Border.Background>
<ImageBrush ImageSource="/Backgrounds/BlueWaveBackground.jpg"/>
</Border.Background>
<Grid>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" HorizontalAlignment="Center">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" TextBlock.TextAlignment="Center" >
<Border Background="{StaticResource ForegroundLightBrush}"
CornerRadius="10"
Padding="15 10 15 15"
Width="250"
Margin="50 50 50 0">
<StackPanel>
<TextBlock Text="Sign In" Padding="0 0 0 10" FontSize="{StaticResource FontSizeLarge}" FontFamily="{StaticResource LatoBold}"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<StackPanel>
<TextBlock HorizontalAlignment="Left" Margin="0 10 5 0" Text="User Name:" Style="{StaticResource DefaultTextBox}"/>
<TextBlock HorizontalAlignment="Left" Margin="0 15 5 0" Text="Password:" Style="{StaticResource DefaultTextBox}"/>
</StackPanel>
</Grid>
<Grid Grid.Column="1">
<StackPanel>
<TextBox/>
<PasswordBox/>
<Button Content="Login"
Margin = "10 10"/>
</StackPanel>
</Grid>
</Grid>
</StackPanel>
</Border>
</StackPanel>
</ScrollViewer>
</Grid>
</Border>
Here is a picture of my form

You need to make sure the resource file is referenced either application wide or within the page you want to apply it.
To apply the resources from the file to a specific page, you need to add it to the page resources.
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Assembly.Namespace;component/MyResourceFileName.xaml"
x:Name="Dict" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
To apply the resource to your entire application, you would do the same but to your app.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Assembly.Namespace;component/MyResourceFileName.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
It should be noted that your button style will not display any content. Your style only has a Border which cannot display content. Make sure you add a ContentPresenter inside of the Button

Bind the style to your button, Like this
<Button Style="{StaticResource /the name of your style here/}" Content="Login" Margin = "10 10"/>
On your button style
<Style TargetType="{x:Type Button}" x:Key="/nameyourstyle/" BasedOn="{StaticResource BaseStyle}">
.....

static resource cannot be resolved

I am trying to implement MahApps style in my accounting system I follow the step needed here the link that I used MahApps .
Here is the code that I have I stuck in a error the resource appbar_cupcake cannot be resolved here is the code
<Controls:MetroWindow x:Class="Hassab_Accounting_System.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
</Grid>
<Controls:MetroWindow.RightWindowCommands>
<Controls:WindowCommands>
<Button Content="settings" />
<Button>
<StackPanel Orientation="Horizontal">
<Rectangle Width="20" Height="20"
Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_cupcake}" />
</Rectangle.OpacityMask>
</Rectangle>
<TextBlock Margin="4 0 0 0"
VerticalAlignment="Center"
Text="deploy cupcakes" />
</StackPanel>
</Button>
</Controls:WindowCommands>
</Controls:MetroWindow.RightWindowCommands>
</Controls:MetroWindow>
`
![here is the error ][2]

Assuming you haven't done this already, since it is not included in the question, make sure you include the resource file, in your case icon.xaml in the ResourceDictionary at the top of your file.
Something like:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resource/icon.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
Or to your App.xaml like:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resource/icon.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

Style not being picked up WPF

I am trying to set up styles in an external DLL that will be used to define how certain controls should look.
I have a resource dictionary defined in an external DLL that has a style targeted at TextBoxes:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type TextBox}" x:Key="TextStyle">
<Setter Property="Text" Value="Moo"/>
</Style>
</ResourceDictionary>
I then reference this built DLL in another application. This works:
<Window x:Class="HTMLTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/GX3Resources;component/Resources.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<TextBox Height="23" HorizontalAlignment="Left" Margin="45,217,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Style="{StaticResource TextStyle}"/>
</Grid>
</Window>
This does not:
<Window x:Class="HTMLTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/GX3Resources;component/Resources.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<TextBox Height="23" HorizontalAlignment="Left" Margin="45,217,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
</Grid>
</Window>
I would hope the above would pick up the TextStyle as is it a text box and the style is targetted at textboxes.

If you can edit the original style, you can use it for all Textboxes automatically by setting its key property to the target type:
<Style TargetType="{x:Type TextBox}" x:Key="{x:Type TextBox}">
If you can't change the style, try to create another one based on it:
<Style TargetType="{x:Type TextBox}"
BasedOn="{StaticResource TextStyle}"
x:Key="{x:Type TextBox}">
</Style>