UWP Custom Style for Button with Icon and Text - xaml

Question

I'm have a Custom ToggleButton that contains an icon and a Text. At the end I want to use this style to different buttons, each with a different Text and Icon
<Style TargetType="ToggleButton" x:Key="CustomButton">
<Setter Property="Width" Value="180"/>
<Setter Property="Height" Value="90"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Foreground" Value="Gray"/>
<Setter Property="Content" Value="hola"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icono">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Texto">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icono">
<DiscreteObjectKeyFrame KeyTime="0" Value="DarkRed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Texto">
<DiscreteObjectKeyFrame KeyTime="0" Value="DarkRed" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icono">
<DiscreteObjectKeyFrame KeyTime="0" Value="DarkRed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Texto">
<DiscreteObjectKeyFrame KeyTime="0" Value="DarkRed" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icono">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderBrush="Gray" BorderThickness="{TemplateBinding BorderThickness}" Background="Gray" CornerRadius="15">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Foreground="LightGray" HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<iconPacks:PackIconMaterial Margin="0,0,10,0" x:Name="Icono" Kind="AccountPlus" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#B8B8B8" Width="24" Height="24"/>
<TextBlock x:Name="Texto" Margin="0,5,0,0" Text="{TemplateBinding Content}"/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the xaml like this
<ToggleButton x:Name="BotonUsuarioNuevo"
HorizontalAlignment="Center"
Margin="0,30,0,20"
Content="New User"
Style="{StaticResource CustomButton}"/>
The thing is that I can't find a way to pass the icon "Kind" in the xaml so the style can be reusable.
Any thoughts??
Cheers!!!

Answer 1

ToggleButton doesn't provide Icon property, so you can't pass Icon property directly.
One workaround is you can use AppBarToggleButton instead.
<AppBarToggleButton x:Name="toggleBtn" Icon="UnFavorite" Label="UnFavorite"/>
Another is that you need to write a custom ToggleButton's Content property.
<ToggleButton>
<StackPanel>
<SymbolIcon Symbol="Admin"/>
<TextBlock Text="Admin"/>
</StackPanel>
</ToggleButton>
The third method is to write your own user control, which contains an Icon control, or a class derive from Button class.