c# - 两个用户控件还是两种样式？

Question

在我的 UWP 项目中，我需要一个带有图标的按钮。所以我创建了一个用户控件。现在我需要相同的按钮，只是字体大小更小，图标符号更小。

我应该创建两个不同的 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

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

有很多方法可以做到这一点，例如您可以只创建两个具有不同字体大小的按钮:

<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，这是我的示例:

用户控件

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

}

现在您可以在使用此用户控件时设置字体大小:

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

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

重要的是 Button 的 FontSize，您可以像这样为 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作为symbol，它是不能调整大小的，你可以引用我的另一个案例:What is the 'right' way to resize a SymbolIcon? .