Два пользовательских элемента управления или два стиля?

Question

В моем проекте UWP мне нужна кнопка со значком. Поэтому я создал UserControl. Теперь мне нужна одна и та же кнопка, только с меньшим шрифтом FontSize и меньшим символом значка.

Должен ли я создать два различных UserControls, или я должен передать имущество (размер) в UserControl, который в свою очередь используется UserControl применять различные стили к кнопке?

Если мне нужно передать стиль, как бы вы его реализовали?

Вот мой UserControl код:

<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> 

И это, как я это называю:

<controls:NavigationButton Title="Neste" Icon="Forward"></controls:NavigationButton> 

Answer 1

Должен ли я создать два различных UserControls, или я должен передать имущество (размер) в UserControl, который определяет, какой стиль он должен использовать (например: SmallButton, LargeButton)?

Есть много способов сделать это, вы можете просто создать две кнопки с различными FontSize, например:

<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> 

Это делает так:

Но если вы хотите использовать UserControl, вы можете создать свойство fontsize, чтобы вы могли установить шрифт при использовании этого UserControl, так как я не знаю, как вы создали свой UserControl, вот мой пример:

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> 

Код:

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); } 
    } 

} 

Теперь вы можете установить FontSize при использовании этого пользователя управления:

<local:ButtonWithSymbolAndText SymbolSize="25" TextSize="20" HorizontalAlignment="Center"/> 

Если я должен передать стиль, как бы вы пошли дополнять его?

Все это Важен FontSize из Button, вы можете создать два стиля для Button как это:

<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> 

И использовать эти стили с 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> 

В приведенных выше способов , Я думаю, что самый первый из них первый, но имейте в виду, что если вы использовали SymbolIcon для символа, его нельзя изменить, вы можете ссылаться к моему делу anohter: What is the 'right' way to resize a SymbolIcon?.