Should I create two different UserControls, or should I pass a property (Size) to the UserControl that defines which style it should use (ie: SmallButton, LargeButton)?
There are many ways to do this, you can just create two buttons with different fontsize for example:
<Button>
<StackPanel Orientation="Horizontal">
<TextBlock Text="" FontFamily="Segoe MDL2 Assets" FontSize="20"/>
<TextBlock Text="Button Tile" Margin="5,0,0,0" FontSize="15"/>
</StackPanel>
</Button>
<Button Margin="150,0">
<StackPanel Orientation="Horizontal">
<TextBlock Text="" FontFamily="Segoe MDL2 Assets" FontSize="35"/>
<TextBlock Text="Button Tile" Margin="5,0,0,0" FontSize="30"/>
</StackPanel>
</Button>
It renders like this:

But if you want to use UserControl
, you can create fontsize property so you can set the fontsize when using this UserControl
, since I don't know how did you create your UserControl
, here is my sample:
UserControl
<Button>
<StackPanel Orientation="Horizontal">
<TextBlock Text="" FontFamily="Segoe MDL2 Assets" FontSize="{x:Bind SymbolSize,Mode=OneWay}"/>
<TextBlock Text="Button Tile" Margin="5,0,0,0" FontSize="{x:Bind TextSize,Mode=OneWay}"/>
</StackPanel>
</Button>
Code behind:
public sealed partial class ButtonWithSymbolAndText : UserControl
{
public ButtonWithSymbolAndText()
{
this.InitializeComponent();
}
public static readonly DependencyProperty SymbolSizeProperty = DependencyProperty.Register("SymbolSize", typeof(int), typeof(ButtonWithSymbolAndText), null);
public static readonly DependencyProperty TextSizeProperty = DependencyProperty.Register("TextSize", typeof(int), typeof(ButtonWithSymbolAndText), null);
public string SymbolSize
{
get { return (string)GetValue(SymbolSizeProperty); }
set { SetValue(SymbolSizeProperty, value); }
}
public int TextSize
{
get { return (int)GetValue(TextSizeProperty); }
set { SetValue(TextSizeProperty, value); }
}
}
Now you can set the fontsize when use this user control:
<local:ButtonWithSymbolAndText SymbolSize="25" TextSize="20" HorizontalAlignment="Center"/>
If I should pass a style, how would you go about implementing it?
All it matters is the FontSize
of Button
, you can create two styles for Button
like this:
<Page.Resources>
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="FontSize" Value="15"/>
</Style>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="FontSize" Value="30"/>
</Style>
</Page.Resources>
And use these styles with StaticResource
:
<Button Grid.Row="3" Style="{StaticResource ButtonStyle}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="" FontFamily="Segoe MDL2 Assets" Margin="0,2,0,0"/>
<TextBlock Text="Button Tile" Margin="5,0,0,0" />
</StackPanel>
</Button>
<Button Grid.Row="3" Margin="150,0" Style="{StaticResource ButtonStyle1}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="" FontFamily="Segoe MDL2 Assets" Margin="0,2,0,0"/>
<TextBlock Text="Button Tile" Margin="5,0,0,0" />
</StackPanel>
</Button>
In the above methods, I think the most esay one is the first one, but be aware, if you used a SymbolIcon
for the symbol, it can not be resized, you can refer to my anohter case: What is the 'right' way to resize a SymbolIcon?.