4

In my UWP project, I need a button with an icon. So I created a UserControl. Now I need the same button, just with smaller FontSize and smaller icon-symbol.

UserControl for Button with Icon

Should I create two different UserControls, or should I pass a property (Size) to the UserControl that in turn is used by the UserControl to apply different styles to the button?

If I should pass a style, how would you go about implementing it?

Here is my UserControl code:

<UserControl.Resources>
    <Style TargetType="Button" x:Key="NavigationButton" BasedOn="{StaticResource BaseButtonStyle}">
        <Setter Property="FontSize" Value="30"></Setter>
        <Setter Property="Padding" Value="30,20"></Setter>
        <Setter Property="FontWeight" Value="Thin"></Setter>
    </Style>
</UserControl.Resources>

<Grid>
    <Button Style="{StaticResource NavigationButton}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <StackPanel Orientation="Horizontal">
            <Viewbox Width="35" Height="35" Margin="0,0,10,0">
                <SymbolIcon Symbol="Home" x:Name="SymbolIconIcon"></SymbolIcon>
            </Viewbox>
            <TextBlock TextAlignment="Left" VerticalAlignment="Center" x:Name="TextBlockTitle">Button title</TextBlock>
        </StackPanel>
    </Button>
</Grid>

And this is how I call it:

<controls:NavigationButton Title="Neste" Icon="Forward"></controls:NavigationButton>
nitech
  • 1,822
  • 3
  • 21
  • 35
  • 1
    [This](http://stackoverflow.com/questions/38815049/setting-a-style-for-a-button-but-changing-some-properties-in-uwp-app/38815764#38815764) is similar. Replace symbol with your image, and tadaaa. No need for another control – lokusking Aug 17 '16 at 11:01

1 Answers1

4

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="&#59407;" 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="&#59407;" FontFamily="Segoe MDL2 Assets" FontSize="35"/>
        <TextBlock Text="Button Tile" Margin="5,0,0,0" FontSize="30"/>
    </StackPanel>
</Button>

It renders like this:

enter image description here

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="&#59407;" 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="&#59407;" 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="&#59407;" 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?.

Community
  • 1
  • 1
Grace Feng
  • 16,564
  • 2
  • 22
  • 45
  • This is an elaborate answer. Thank you. What I meant by "passing a style" was: Should I influence looks of the UserControl by passing a style to the control, or should I achieve the same by passing `FontSize` and `Padding` parameters? If the latter, I'd really like to pass a `Size` parameter, and have the UserControl apply different styles to the Button, depending on the passed size. – nitech Aug 18 '16 at 07:52
  • @nitech, since you created a usercontrol, it combines several controls together into one, and from outside, it has no style property which can be modified unless you register one. I should say, both method is doable, if you use the first method, it is needed to expose the self-defined style property, so can you pass style as parameter into this usercontrol. – Grace Feng Aug 18 '16 at 08:09
  • Yep, I realize that. I am just not sure how to pass a style as a parameter into the UserControl. This is probably basic stuff, but I haven't cracked the key just yet. – nitech Aug 18 '16 at 09:05
  • So if you could either: a) show me how to pass a style to a user control, or b) show me how to influence which button is visible in the user control (small, large), depending on an input parameter `Size`, I can accept your answer. Thank you so much Grace. – nitech Aug 19 '16 at 07:20