Question

在我的UWP项目中，我需要一个带图标的按钮。所以我创建了一个UserControl。现在我需要相同的按钮，只需使用较小的FontSize和较小的图标符号。

我应该创建两个不同的UserControl，还是应该将属性（Size）传递给UserControl，UserControl又使用它来为按钮应用不同的样式？

如果我应该通过一种风格，你会如何实施它？

这是我的UserControl代码：

 <ListView x:Name="CollectedItemsListView"
                  ItemsSource="{Binding refreshedItems}"
...

这就是我所说的：

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

Answer 1

我应该创建两个不同的UserControl，还是应该将属性（Size）传递给UserControl，以定义它应该使用哪种样式（即：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时设置fontsize，因为我不知道您是如何创建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的{{1}}，你可以为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="" 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>作为符号，则无法调整大小，您可以参考我的anohter案例： What is the 'right' way to resize a SymbolIcon?

两个用户控件还是两个样式？

1 个答案: