WPF binding mahapps metro icons in template - wpf

Question

I would like to transform this button code into a template version and put it in a style xaml file:
<Button Background="Transparent" BorderBrush="Transparent" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="20" Foreground="White" Opacity="1">
<StackPanel Orientation="Horizontal">
<Rectangle Width="24" Height="24" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{iconPacks:PackIconMaterial Kind=Face, Width=24, Height=24}" />
</Rectangle.OpacityMask>
</Rectangle>
<TextBlock Margin="10 0 10 0" VerticalAlignment="Center" Text="John Doe" FontSize="24" FontWeight="Normal" FontFamily="Segoe UI Light" />
</StackPanel>
</Button>
I have this until now:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Name="ButtonGrid" RenderTransformOrigin="0.5,0.5">
<Rectangle Width="48" Height="48" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{Binding Path=(extensions:Icons.IconKind), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
</Rectangle.OpacityMask>
</Rectangle>
<iconPacks:PackIconSimpleIcons x:Name="btnIcon" Kind="{Binding Path=(**extensions:Icons.IconKind**), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" Width="48" Height="48" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="{TemplateBinding Foreground}" />
<TextBlock x:Name="tButton" HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="{TemplateBinding Foreground}" FontWeight="Bold" Text="{Binding Path=Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" />
<StackPanel.RenderTransform>
<ScaleTransform ScaleX="1.0" ScaleY="1.0" CenterX="0.5" CenterY="0.5"/>
</StackPanel.RenderTransform>
</StackPanel>
<ControlTemplate.Triggers>
...
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
In a perfect world, the icon specified in the visual property should be set dynamically in the visual attribute of the template.
I came up with this solution but it doesn't work. Binding can only be done on DependencyProperty.
<VisualBrush Stretch="Fill" Visual="{iconPacks:PackIconMaterial Kind={Binding Path=(extensions:Icons.IconKind)}, Width=48, Height=48}"/>
Any idea how to do it? i'm not this good with template expressions :/

Answer 1

You could define a Template with a VisualBrush that binds to the Tag property of the Button:
<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>
...and then set the Tag property to an icon:
<Button Style="{StaticResource IconStyle}" Foreground="Green">
<Button.Tag>
<iconPacks:PackIconMaterial Kind="Face" Width="24" Height="24" />
</Button.Tag>
</Button>