在我的 UWP 项目中,我需要一个带有图标的按钮。所以我创建了一个用户控件。现在我需要相同的按钮,只是使用更小的 FontSize 和更小的图标符号。
我应该创建两个不同的 UserControl,还是应该将属性 (Size) 传递给 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>
最佳答案
有很多方法可以做到这一点,你可以创建两个不同字体大小的按钮,例如:
<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>
它呈现如下:
但是如果你想使用
UserControl
,你可以创建 fontsize 属性,这样你就可以在使用这个 UserControl
时设置 fontsize ,因为我不知道你是如何创建你的 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>
后面的代码:
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"/>
重要的是
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="" 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>
在上面的方法中,我认为最简单的一种是第一种,但要注意,如果您使用
SymbolIcon
作为符号,则无法调整大小,您可以引用我的另一个案例: What is the 'right' way to resize a SymbolIcon? 。关于c# - 两个用户控件还是两种样式?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38994698/