WPF-分享一个自定义Button控件修改Button三态变化

342 阅读1分钟

Button拥有三个状态:普通态、鼠标停留态、点击态。
在软件开发中Button的三态需要根据软件的风格灵活调整,另外有的需要添加图片来简明地提示用户Button的功能。WPF中原生的Button需要重写style才能改写三态的样式,每有一种需求就需要重新定义一个style,这样就很麻烦。
本文分享了一个自定义Button控件,来解决上述问题。

展示一下效果和xaml调用代码

FffButton.gif

<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直接使用,不用谢