WPF模仿QQ登录按钮

来源:互联网 发布:什么是网络民生新闻 编辑:程序博客网 时间:2024/05/17 02:07

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

样式代码:

<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

0 0