拿一个按钮来说:
HTML/css
<div class="btn"><div>icon</div>按钮</div> .btn { color: red; border: 1px solid #75a4ff; padding: 10px; border-radius: 15px; height: 32px; width: 76px margin: 0 0 0 8px; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; &:hover { color: #fff; background: #75a4ff; } } C# wpf:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls" xmlns:local="clr-namespace:WpfApp1.Components"> <Style TargetType="local:Button"> <Setter Property="Background" Value="White"/> <Setter Property="BorderBrush" Value="#75a4ff"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="Height" Value="32"/> <Setter Property="Width" Value="76"/> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="Padding" Value="2"/> <Setter Property="Marin" Value="8,0,0,0"/> <Setter Property="Foreground" Value="#75a4ff"/> <Setter Property="FontSize" Value="10"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:Button"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="15" Padding="2"> <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizOntalAlignment="Center"> <mah:FontIcon FOntFamily="Segoe MDL2 Assets" FOntSize="10" Glyph="" HorizOntalAlignment="Left"> <mah:FontIcon.Style> <Style TargetType="mah:FontIcon"> <Setter Property="Foreground" Value="#75a4ff"/> <Style.Triggers> <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=local:Button}}" Value="True"> <Setter Property="Foreground" Value="White"/> </DataTrigger> </Style.Triggers> </Style> </mah:FontIcon.Style> </mah:FontIcon> <TextBlock Text="{Binding Content, RelativeSource={RelativeSource AncestorType=local:Button}}" Margin="8, 0, 0, 0"> <TextBlock.Style> <Style TargetType="TextBlock"> <Setter Property="Foreground" Value="#75a4ff"/> <Style.Triggers> <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=local:Button}}" Value="True"> <Setter Property="Foreground" Value="White"/> </DataTrigger> </Style.Triggers> </Style> </TextBlock.Style> </TextBlock> </StackPanel> </Border> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="#75a4ff"></Setter> <Setter Property="Cursor" Value="Hand"></Setter> </Trigger> </Style.Triggers> </Style> </ResourceDictionary> 写起来相当难受= =。
