写一个简约的WPF登录窗体

最新推荐文章于 2024-07-31 10:48:01 发布
最新推荐文章于 2024-07-31 10:48:01 发布
阅读量1.1k 收藏 6
点赞数 1
分类专栏： WPF 文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40374647/article/details/114917571
版权

Hello，大家好，我是若汝棋茗，今天让我来给大家水一篇WPF窗口的博客。
在这里插入图片描述

先看效果图
在这里插入图片描述
还比较满意吧，那就让我们开始吧！！

首先引入RRQMSkin包，因为窗体有圆角，并且需要改变尺寸，所以使用RRQMEffectWindow来实现。

在这里插入图片描述
在这里插入图片描述

然后修改window继承类为RRQMEffectWindow，后台代码一致。

然后，重写RRQMEffectWindow模板。

 <Style x:Key="MainWindowStyle" TargetType="{x:Type Custom:RRQMEffectWindow}">
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Custom:RRQMEffectWindow}">
                    <Grid x:Name="windowGrid">
                        <Border x:Name="mainBorder"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                CornerRadius="{TemplateBinding CornerRadius}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="100" />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <Border Background="#667B85" CornerRadius="10,10,0,0" />
                                <Grid x:Name="header" Grid.Row="0" Panel.ZIndex="1">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Grid x:Name="title" Background="Transparent" />
                                    <StackPanel Grid.Column="1" VerticalAlignment="Top" Orientation="Horizontal">
                                        <Button x:Name="closeButton" Content="&#xE62C;"
                                                Command="{Binding CloseWindowCommand, RelativeSource={RelativeSource TemplatedParent}}">
                                            <Button.Style>
                                                <Style TargetType="{x:Type Button}">
                                                    <Setter Property="FontFamily" Value="/RRQMSkin;component/Fonts/#iconfont" />
                                                    <Setter Property="FontSize" Value="16" />
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="{x:Type Button}">
                                                                <Border x:Name="border" CornerRadius="3" Background="Transparent" BorderThickness="1" Height="25"
                                                                        Margin="5" Width="25">
                                                                    <TextBlock Foreground="{TemplateBinding Foreground}"
                                                                               HorizontalAlignment="Center"
                                                                               Text="{TemplateBinding Content}"
                                                                               VerticalAlignment="Center" />
                                                                </Border>
                                                                <ControlTemplate.Triggers>
                                                                    <Trigger Property="IsMouseOver" Value="True">
                                                                        <Setter Property="BorderBrush" TargetName="border" Value="#FFE9E3B1" />
                                                                    </Trigger>
                                                                    <Trigger Property="IsMouseOver" Value="False">
                                                                        <Setter Property="BorderBrush" TargetName="border" Value="Transparent" />
                                                                    </Trigger>
                                                                </ControlTemplate.Triggers>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                </Style>
                                            </Button.Style>
                                        </Button>
                                    </StackPanel>
                                </Grid>
                                <AdornerDecorator x:Name="content" HorizontalAlignment="Stretch" Grid.Row="1" Grid.RowSpan="2" VerticalAlignment="Stretch">
                                    <ContentPresenter Content="{TemplateBinding Content}"
                                                      HorizontalAlignment="Stretch"
                                                      Margin="{TemplateBinding Padding}"
                                                      VerticalAlignment="Stretch" />
                                </AdornerDecorator>
                            </Grid>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

然后写窗体内容布局代码。

<Win:RRQMEffectWindow x:Class="SimpleLoginWindow.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SimpleLoginWindow"
        xmlns:Win="若汝棋茗_Windows"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="500" CornerRadius="10" Style="{DynamicResource MainWindowStyle}">
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="40"/>
            <RowDefinition Height="40"/>
            <RowDefinition Height="60"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="250"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="用户名" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0"/>
        <TextBox Grid.Column="1" VerticalAlignment="Center" Style="{DynamicResource TextBoxStyle}"/>

        <TextBlock Text="密码" HorizontalAlignment="Right" Grid.Row="1" VerticalAlignment="Center" Margin="0,0,10,0"/>
        <TextBox Grid.Column="1" Grid.Row="1" VerticalAlignment="Center" Style="{DynamicResource TextBoxStyle}"/>

        <CheckBox Content="记住我" Grid.Row="2" Grid.Column="1" VerticalAlignment="Center"/>
        <TextBlock Text="忘记密码？" Grid.Row="2" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right" Style="{DynamicResource TextBlockStyle}"/>

        <Button Grid.Column="1" Grid.Row="3" Width="100" Height="40" Content="登录" HorizontalAlignment="Left" Style="{DynamicResource ButtonStyle}"/>
    </Grid>
</Win:RRQMEffectWindow>

最后对TextBox，Button重写模板，TextBlock重写样式。

 <Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="AllowDrop" Value="true"/>
        <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition Height="2"/>
                        </Grid.RowDefinitions>
                        <Decorator x:Name="PART_ContentHost" Focusable="false"/>
                        <ProgressBar x:Name="progressBar" Grid.Row="1"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="GotKeyboardFocus">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="progressBar" Storyboard.TargetProperty="Value" To="100" Duration="0:0:0.5"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="LostKeyboardFocus">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="progressBar" Storyboard.TargetProperty="Value" To="0" Duration="0:0:0.5"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="border" CornerRadius="20" SnapsToDevicePixels="true">
                        <Border.Background>
                            <SolidColorBrush x:Name="solidColor" Color="#57B846"/>
                        </Border.Background>
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="solidColor" Storyboard.TargetProperty="Color" To="#333333" Duration="0:0:0.5"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="solidColor" Storyboard.TargetProperty="Color" To="#57B846" Duration="0:0:0.5"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 <Style x:Key="TextBlockStyle" TargetType="{x:Type TextBlock}">
        <Setter Property="TextWrapping" Value="NoWrap"/>
        <Setter Property="TextTrimming" Value="None"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="TextDecorations" Value="None"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="TextDecorations" Value="Underline"/>
            </Trigger>
        </Style.Triggers>
    </Style>

完工

好了今天的分享就到这里，源码在Gitee主页ShareProjects仓库中，如果有其他想法的猿友可以来我们动物园看看喔。

交流方式

若汝棋茗
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
WPF制作无边框窗体、圆角窗体、支持改变大小、拖动分屏等（一）
若汝棋茗 的博客
02-26 3649
目录概述需求说明无边框窗体 概述 Windows Presentation Foundation (WPF) 是一个可创建桌面客户端应用程序的 UI 框架。 WPF 开发平台支持广泛的应用开发功能，包括应用模型、资源、控件、图形、布局、数据绑定、文档和安全性。 此框架是 .NET Framework 的一部分，因此，在未来如果想快速的开发桌面软件，WPF腚是你的不二选择。 需求说明 WPF既然是桌面软件UI，那一定绕不开桌面软件的多元化（chan pin jing li de chou pi）显示方式，最常
简单的wpf制作一个登陆界面
03-13
这是通过两个grid容器进行分割的简单登陆界面的设计,而且限定了界面的大小,可以拖动但是不可以拉伸
WPF用户登录界面设计-使用SQLite数据库进行存储
最新发布
weixin_67244432的博客
07-31 512
SQLite是一款轻量级的关系型数据库，它小巧高效，无需服务器配置，仅需单一文件即可存储数据。SQLite跨平台支持，易于集成到各种应用程序中，并支持SQL语言进行数据操作。它保证了数据的完整性、一致性和持久性，通过文件级锁定实现并发访问的安全。SQLite广泛应用于移动、桌面和嵌入式系统，是管理本地数据的理想选择。其长期稳定性和开发团队的支持承诺，使其成为数字内容存储的可靠选择。
一个非常好看登录界面，用WPF完成的
05-24
这是一个界面非常好看的一个登录界面，采用WPF完成的，图片可以动态显示。
WPF的登录界面
07-16
使用WPF技术制作的软件登录界面，用户名、密码窗口中显示“请输入用户名”和“请输入密码”
WPF 登录界面
01-08
一星空为主题的比较漂亮的登录界面，在牛人基础上改的
WPF登录界面
05-26
WPF界面设计（很帅）+登录验证用户名跟密码固定值123+跳转功能+按钮的键盘快捷键添加（登录用键盘键enter替代）
WPF登录窗体demo.zip
11-27
下面我们将详细探讨如何在WPF中设计和实现一个功能完备的登录窗体。 1. **XAML布局设计** 在WPF中，我们使用Extensible Application Markup Language (XAML)来定义用户界面的布局。登录窗体的XAML代码应包括`...
WPF中窗体最大化问题的解决方法
12-31
在创建WPF应用的时候，你第一个看到的就是窗体类。它作为窗体的基础，提供标准的边框、工具条、最大化、最小化和关闭按钮。WPF窗体是XAML文件和后台代码文件的混合体。 本文将详细介绍关于WPF窗体最大化问题的相关...
C#WPF窗体在同一个位置实现不同页面切换
03-06
在C# WPF（Windows Presentation Foundation）开发中，创建一个应用程序时，我们经常需要在一个固定的窗口内展示不同的页面或视图。这样的需求在构建多页面应用、导航式UI或者模拟多面板工作区时非常常见。本篇文章...
WPF 窗体拖拽效果，窗体随鼠标移动
03-24
首先，我们需要创建一个新的WPF窗体项目。在Visual Studio中，选择“新建项目”，然后选择“WPF应用程序”。在项目中，你会看到一个默认的`MainWindow.xaml`文件，这是我们的主窗体。我们需要在这个文件中添加必要的...
WPF做的漂亮的登陆界面[附源码]
11-04
WPF登陆界面美化： 1：账号和密码框都做了美化， 2：关闭按钮和登陆按钮都做了美化，当鼠标移动上去，都做了处理， 3：总体界面四个边角是圆弧形，挺好看的。。。。
wpf登录界面设计
08-23
wpf 直接跑起来的源代码 仿2013登录界面
Wpf 的一个登陆窗口设计
03-27
Wpf 的一个登陆窗口设计
一个简单的Qt登录窗体进到主窗体的例子
08-26
一个简单的Qt登录窗体进到主窗体的例子，对Qt框架有一个直接得了解，对其编程模式又一个基本认识和入门，不要怕，如果你开发经验丰富的话，Qt is very easy.
WPF窗体登录淡入淡出
01-24
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现窗体登录时的淡入淡出效果。WPF是.NET Framework提供的一种强大的、面向对象的用户界面框架，它允许开发者创建丰富的桌面应用程序。 ...
WPF实现登录界面
Zzu_zzx的博客
08-12 3992
WPF实现简约登录界面
WPF做登陆界面
devops
06-13 632
<Window x:Class="zhaoxi.CourseManagement.View.LoginView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/b.
WPF实现窗体悬浮按钮：拖动与吸附功能
"该资源提供了一种在WPF（Windows Presentation Foundation）中创建悬浮...通过理解这些知识点，开发者可以创建一个功能完备且用户体验良好的WPF悬浮按钮，使其能够在用户界面中自由移动并吸附到窗体边缘，提高交互性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

若汝棋茗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值