Button拥有三个状态:普通态、鼠标停留态、点击态。
在软件开发中Button的三态需要根据软件的风格灵活调整,另外有的需要添加图片来简明地提示用户Button的功能。WPF中原生的Button需要重写style才能改写三态的样式,每有一种需求就需要重新定义一个style,这样就很麻烦。
本文分享了一个自定义Button控件,来解决上述问题。
展示一下效果和xaml调用代码
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<FffControl:FffButton x:Name="OnlyFffButton1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Width="32" Height="32" Background="#171721"
Content="" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
IconWidth="10" IconHeight="10"
Icon="Pack://Application:,,,/Resources/ButtonDemo/关闭.png"
IconMouseOver="Pack://Application:,,,/Resources/ButtonDemo/关闭-鼠标经过.png"
IconPress="Pack://Application:,,,/Resources/ButtonDemo/关闭-按下.png"/>
<FffControl:FffButton x:Name="OnlyFffButton2" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="32" Height="32" Background="#171721"
Content="" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
IconWidth="10" IconHeight="10"
Icon="Pack://Application:,,,/Resources/ButtonDemo/关闭-鼠标经过.png"
IconMouseOver="Pack://Application:,,,/Resources/ButtonDemo/关闭-鼠标经过.png" MouseOverBackground="#5589FC"
IconPress="Pack://Application:,,,/Resources/ButtonDemo/关闭-鼠标经过.png" MouseDownBackground="#FA3846"/>
<FffControl:FffButton x:Name="OnlyTextButton" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="72" Height="26" CornerRadius="8"
Content="确定" FontSize="14" Foreground="#FFFFFF" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
IconWidth="0"
Background="#171721" MouseOverBackground="#5589FC" MouseDownBackground="#FA3846"/>
<FffControl:FffButton x:Name="ImageAndTextButton" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="36" CornerRadius="8"
Content="删除" FontSize="16" Foreground="#FFFFFF" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
IconWidth="16" IconHeight="16" IconContentMargin="5,0,0,0"
Icon="Pack://Application:,,,/Resources/ButtonDemo/删除.png" Background="#171721"
IconMouseOver="Pack://Application:,,,/Resources/ButtonDemo/删除.png" MouseOverBackground="#5589FC"
IconPress="Pack://Application:,,,/Resources/ButtonDemo/删除.png" MouseDownBackground="#FA3846"/>
</Grid>
源码地址:gitee.com/anyu1016/ff…
ctrl+CV直接使用,不用谢