Wpf 初学---01设计一个优美的注册界面

1.实现效果(相关注释已写在代码中)：
（1）静态图：
（2）动态图：

2.
（1）文件结构：

（2）
MainWindow.xaml代码：

<Window x:Class="RegisterPage.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:fa="http://schemas.fontawesome.io/icons/"xmlns:uc="clr-namespace:RegisterPage.UserControls"mc:Ignorable="d"Title="MainWindow" Height="650" Width="850" Background="Transparent" WindowStyle="None"WindowStartupLocation="CenterScreen" AllowsTransparency="True"><!-- WindowStyle="None"取消默认样式,AllowsTransparency="True"允许窗体透明;WindowStartupLocation="CenterScreen"表示使该窗口在屏幕中心启动--><Grid><!--设置两列--><Grid.ColumnDefinitions><ColumnDefinition Width="350"/><ColumnDefinition Width="1*"/><!--使用*号就表示启用百分比方式来设置高宽--></Grid.ColumnDefinitions><!--左边部分--><Border Grid.Column="0" Background="#ffd500" Padding="30" CornerRadius="25 0 0 25"> <!--CornerRadius设置的是圆角属性，四个参数的顺序是：左上、右上、右下、左下--><StackPanel VerticalAlignment="Center"><Image Source="/Images/head.jpg" Width="160" Height="160" Margin="0 0 0 40"/><TextBlock Text="Let's get you set up" TextAlignment="Center" FontWeight="SemiBold"  FontSize="28" Foreground="#363636"/><!--FontWeight代表字体加粗--><TextBlock TextWrapping="Wrap"  FontSize="16" TextAlignment="Center" Foreground="#363636" Margin="0 20 0 20" Text="it should only take a couple of mnutes to pair with your watch"/><!--TextWrapping="Wrap"表示换行--><Button Style="{StaticResource buttonBlack}"><!--引用定义在APP.xaml中的样式--><fa:ImageAwesome Icon="AngleRight" Width="25" Height="25" Foreground="#ffd500" Margin="3 0 0 0"/><!--fa:ImageAwesome Icon="AngleRight"表示引用库中图标--></Button></StackPanel></Border><!--输入部分--><Border Grid.Column="1" Padding="20" Background="#ffffff" CornerRadius="0 25 25 0" MouseDown="Border_MouseDown"><Grid><Button  Width="25" Margin="0 4 5 0" Style="{StaticResource iconApp}"><fa:ImageAwesome Icon="Close" /></Button><Button   Width="25" Margin="0 7  40 0" Style="{StaticResource iconApp}"><fa:ImageAwesome Icon="Minus" /></Button><Grid  VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0 10 0 0"><Grid.ColumnDefinitions><ColumnDefinition Width="150"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition Height="auto"/></Grid.RowDefinitions><TextBlock Grid.Row="0" Text="Nmae" Style="{StaticResource text}"/><TextBlock Grid.Row="1" Text="Family" Style="{StaticResource text}"/><TextBlock Grid.Row="2" Text="Gender" Style="{StaticResource text}"/><TextBlock Grid.Row="3" Text="Date of Birth" Style="{StaticResource text}"/><TextBlock Grid.Row="4" Text="Email" Style="{StaticResource text}"/><TextBlock Grid.Row="5" Text="Mobile" Style="{StaticResource text}"/><TextBlock Grid.Row="6" Text="MemberShip" Style="{StaticResource text}"/><uc:MyTextBox Grid.Column="1" Grid.Row="0" Hint="Karim"/><uc:MyTextBox Grid.Column="1" Grid.Row="1" Hint="Doe"/><uc:MyTextBox Grid.Column="1" Grid.Row="3" Hint="01/02/1980"/><uc:MyTextBox Grid.Column="1" Grid.Row="4" Hint="KarimDoe@eamil.com"/><uc:MyTextBox Grid.Column="1" Grid.Row="5" Hint="+91 9876 54321"/><StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1" Margin="0 10"><uc:MyOption Icon="Male" Text="Male"/><uc:MyOption Icon="Female" Text="Female"/></StackPanel><StackPanel Orientation="Horizontal" Grid.Row="6" Grid.Column="1" Margin="0 10"><uc:MyOption Icon="CreditCard" Text="Classic"/><uc:MyOption Icon="CreditCard" Text="Silver"/><uc:MyOption Icon="CreditCard" Text="Gold"/></StackPanel><Grid Grid.Row="7" Grid.Column="1" Margin="0 40 0 0 "><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Button Content="Cancel" Margin="0 0 10 0" Grid.Column="0" Style="{StaticResource buttonMain}"/><Button Content="Save" Margin="10 0 0 0" Grid.Column="1" Style="{StaticResource buttonMainGreen}"/></Grid></Grid></Grid></Border></Grid>
</Window>

MainWindow.xaml.cs代码：


using System.Windows;
using System.Windows.Input;namespace RegisterPage
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void Border_MouseDown(object sender, MouseButtonEventArgs e){if (e.ChangedButton == MouseButton.Left)//如果按下了鼠标左键{this.DragMove();//允许拖动该窗口}}}
}

（3）App.xaml代码：

<Application x:Class="RegisterPage.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"StartupUri="MainWindow.xaml"><Application.Resources><!--该App.xaml文件定义了一些样式--><!--左部分黑色按钮样式--><Style x:Key="buttonBlack" TargetType="Button"><Setter Property="Background" Value="#363636"/><Setter Property="BorderThickness" Value="2"/><Setter Property="Width" Value="60"/><Setter Property="Height" Value="60"/><Setter Property="Margin" Value="0 20 0 0"/><Setter Property="Template"><!--设置模板样式--><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}" CornerRadius="50" Padding="5"><ContentPresenter /><!--ContentPresenter是一个基础控件，其他的控件可以继承他，主要作用是实现内容的显示，可以是任何内容--></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#000000"/></Trigger></Style.Triggers></Style><Style x:Key="iconApp" TargetType="Button"><!--最小化、关闭按钮的样式--><Setter Property="VerticalAlignment" Value="Top"/><Setter Property="HorizontalAlignment" Value="Right"/><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="RenderTransform"><Setter.Value><ScaleTransform ScaleX="1.2" ScaleY="1.2"/><!--ScaleTransform表示缩放;ScaleX表示X轴缩小值，正常为1;ScaleY表示Y轴缩小值，正常为1 --></Setter.Value></Setter></Trigger></Style.Triggers></Style><Style x:Key="text" TargetType="TextBlock"><Setter Property="Foreground" Value="#363636"/><Setter Property="FontWeight" Value="SemiBold"/><Setter Property="FontSize" Value="16"/><Setter Property="VerticalAlignment" Value="Center"/></Style><Style TargetType="TextBox"><Setter Property="Background" Value="#f5f7f9"/><Setter Property="Foreground" Value="#767676"/><Setter Property="BorderThickness" Value="1"/><Setter Property="BorderBrush" Value="#f5f7f9"/><Setter Property="FontSize" Value="12"/><Setter Property="Padding" Value="10"/><Setter Property="Margin" Value="0 10"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type TextBoxBase}"> <Border x:Name="border" CornerRadius="3" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="True"><ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="BorderBrush" Value="#d9d9d9" TargetName="border"/></Trigger><Trigger Property="IsKeyboardFocused" Value="True"><Setter Property="BorderBrush" Value="#d9d9d9" TargetName="border"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="button" TargetType="Button"><Setter Property="Background" Value="#c6c6c6"/><Setter Property="BorderThickness" Value="0"/><Setter Property="Width" Value="40"/><Setter Property="Height" Value="40"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}" CornerRadius="50" Padding="5"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#363636"/></Trigger><Trigger Property="IsMouseCaptured" Value="True"><Setter Property="Background" Value="#161616"/></Trigger></Style.Triggers></Style><Style x:Key="buttonMain" TargetType="Button"><Setter Property="Background" Value="#f5f7f9"/><Setter Property="Foreground" Value="#363636"/><Setter Property="BorderThickness" Value="0"/><Setter Property="Height" Value="40"/><Setter Property="FontSize" Value="16"/><Setter Property="FontWeight" Value="SemiBold"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}" CornerRadius="5" Padding="5"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#c9c9c9"/><Setter Property="Foreground" Value="#161616"/></Trigger></Style.Triggers></Style><!--Cancel按钮样式表--><Style x:Key="buttonMainGreen" TargetType="Button" BasedOn="{StaticResource buttonMain}"><!--Save按钮样式表--><Setter Property="Background" Value="#5fe7c4"/><Setter Property="Foreground" Value="#ffffff"/><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#4ec7a8"/><Setter Property="Foreground" Value="#ffffff"/></Trigger></Style.Triggers></Style></Application.Resources>
</Application>

App.xaml.cs代码：

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;namespace RegisterPage
{/// <summary>/// App.xaml 的交互逻辑/// </summary>public partial class App : Application{}
}

（4）MyOption.xaml代码:

<UserControl x:Class="RegisterPage.UserControls.MyOption"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:fa="http://schemas.fontawesome.io/icons/"mc:Ignorable="d" Name="myOption"><StackPanel Orientation="Horizontal"><Button Style="{StaticResource button}"><!--引用定义在APP.xaml中的样式--><fa:ImageAwesome Icon="{Binding Path=Icon,ElementName=myOption}" Width="15" Height="15" Foreground="White"/></Button><TextBlock Text="{Binding Path=Text,ElementName=myOption}" Foreground="#363636" VerticalAlignment="Center" Margin="10 0 20 0" FontWeight="SemiBold"/></StackPanel>
</UserControl>

MyOption.xaml.cs代码:

using System.Windows;
using System.Windows.Controls;namespace RegisterPage.UserControls
{/// <summary>/// MyOption.xaml 的交互逻辑/// </summary>public partial class MyOption : UserControl{public MyOption(){InitializeComponent();}public string Text{get { return (string)GetValue(TextProperty); }  set { SetValue(TextProperty, value); }}//DependencyProperty.Register方法：第一个参数是依赖属性的名字；第二个参数是依赖属性的类型；第三个参数是依赖属性所属的类名，也就是所有者类名；第四个参数是该属性的默认值public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(MyOption));public FontAwesome.WPF.FontAwesomeIcon Icon{get { return (FontAwesome.WPF.FontAwesomeIcon)GetValue(IconProperty); }set { SetValue(IconProperty, value); }}//DependencyProperty.Register方法：第一个参数是依赖属性的名字；第二个参数是依赖属性的类型；第三个参数是依赖属性所属的类名，也就是所有者类名；第四个参数是该属性的默认值public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(FontAwesome.WPF.FontAwesomeIcon), typeof(MyOption));}}

（5）MyTextBox.xaml代码：

<UserControl x:Class="RegisterPage.UserControls.MyTextBox"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" Name="myTextBox"><UserControl.Resources><BooleanToVisibilityConverter x:Key="boolToVis"/></UserControl.Resources><Grid><TextBlock  Foreground="#868686" Margin="10 0" VerticalAlignment="Center" Panel.ZIndex="1" IsHitTestVisible="False" Text="{Binding Path=Hint,ElementName=myTextBox}"Visibility="{Binding ElementName=textBox,Path=Text.IsEmpty,Converter={StaticResource boolToVis}}"/><TextBox x:Name="textBox"/><!--IsHitTestVisible表示设置/获取控件是否接受输入事件，Visibility表示设置/获取控件是否可见--></Grid>
</UserControl>

MyTextBox.xaml.cs代码：

using System.Windows;
using System.Windows.Controls;namespace RegisterPage.UserControls
{/// <summary>/// MyTextBox.xaml 的交互逻辑/// </summary>public partial class MyTextBox : UserControl{public MyTextBox(){InitializeComponent();}public string Hint{get { return (string)GetValue(HintProperty); }set { SetValue(HintProperty, value); }}//DependencyProperty.Register方法：第一个参数是依赖属性的名字；第二个参数是依赖属性的类型；第三个参数是依赖属性所属的类名，也就是所有者类名；第四个参数是该属性的默认值public static readonly DependencyProperty HintProperty = DependencyProperty.Register("Hint", typeof(string), typeof(MyTextBox));}
}

3.工程已经放在压缩包里,提取码：3f93

Wpf 初学---01设计一个优美的注册界面相关推荐

Winform初学 ---01设计一个简易的浏览器
1.说明: 最近想利用winform设计一个简易的浏览器.winform自带一个WebBrowser组件,但是WebBrowser具有非常大的局限性,用的是IE的内核,使用该组件打开网址后非常地不美观 ...
如何用Java设计一个简单的窗口界面（学习中.1）
如何用Java设计一个简单的窗口界面一.前言二.简单了解 1.Swing简介 2.框架(frame) 3.层次三.步骤 1.打开eclipse,依次创建项目,包,类. 2.代码 2.1最简单的可 ...
html+css+javaScript实现一个简单的注册界面
html+css+javaScript实现一个简单的注册界面自学html,css,js也有一小段时间了,尝试着做点东西来巩固一下,就决定实现这个简单的注册界面.实现的注册界面很普通,没有加上华丽的装 ...
用vue设计一个漂亮的登录界面
你好! 在 Vue 中设计一个漂亮的登录界面可以使用以下步骤: 准备好所需的图片和样式文件,包括背景图片和字体. 在 Vue 组件的 template 部分中,使用 HTML 元素和组件创建登录表单的 ...
Python列表实现矩阵的创建、输入输出、转化转置、加减乘运算并设计一个矩阵计算器GUI界面
背景:在解决一些编程问题中如棋盘的初始化,链表,队列的构建:数据处理中如用SAS软件输入数据等涉及到矩阵的概念,而用编程语言实现矩阵的方式有C中的数组,python中的列表等.现在给你一个数据如下,或 ...
如何在自己的信息管理系统里集成第三方权限控制组件 - 设计一个漂亮的WEB界面...
我们大家都梦想有个完美的各种信息管理系统,其实一个人又会数据库,又会C#.NET程序,还要精通HTML,还要精通CSS,更要精通JS,还有精力去写很多东西,又要调试前台又要调试后台,而且每开发一个系统 ...
前端基础之设计一个个人工作室介绍界面
先上效果图: 包含五个板块 home.about.portfolio.contact和footer 底部的图片不动,就像板块浮在上面. css文件:(取名为studio.css) 1 html,bod ...
如何用Java设计一个简单的窗口界面（初级二）
如何添加组件一.准备 1.这里介绍的是eclipse 2.常用组件的了解 3.常用布局 1.BorderLayout 布局 2.FlowLayout 布局二.代码 1.简单的 2.构造中间容器,顺 ...
python做一个登录注册界面_Python 实现简单的登录注册界面
Python 实现简单的登录注册界面注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...
如何利用宝塔面板+JavaWeb+MySQL设计一个注册登录界面
最近闲来无事,想设计一个网页注册登录的页面.因为看到好多人的毕业设计都是和JavaWeb有关的,所以不做白不做,咱们大三就给毕业设计开个头! 当然做一个网页不发布到服务器,难道数据库留给自己一个人看? ...

Wpf 初学---01设计一个优美的注册界面

Wpf 初学---01设计一个优美的注册界面相关推荐

最新文章

热门文章