WPF模仿QQ登录按钮

WPF模仿QQ登录按钮

原文: WPF模仿QQ登录按钮

如下图，第一张是未点击时按钮样式，第二张是鼠标划过时按钮样式。

样式代码：

<Style TargetType="{x:Type Button}">
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Foreground" Value="#FFFFFF"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Border Name="bd"
                            Background="#FD5E59"
                            CornerRadius="3">
                            <ContentPresenter Margin="0"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            RecognizesAccessKey="True" />
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="bd" Property="Background" Value="#FF726E" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="bd" Property="Background" Value="#F4433E" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

WPF前台xaml代码：

<Button Margin="5" Content="登 录" Width="270" Height="45" Style="{StaticResource btnLogin}"/>

看一下效果：

********WPF XAML技术交流群：477319939********

posted on 2019-03-15 13:19 NET未来之路 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/10536428.html