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********