希望大家有这方面好的代码给提供下,谢谢了!
想用C#做一个和手机上一样的图形密码键盘,貌似这方面资料比较少,虽然winphone手机上也有但是网上也没有这方面的代码。只好用常规的思维去实现一下,当然是比较简单的,希望各路高手能给一些好的建议,这篇文章算是抛砖引玉吧,用WPF实现。
思路如下:
使用常用控件从最简单的图案绘制,然后放在相应的控件上,利用鼠标的Move事件,判断鼠标滑过哪些控件,然后将控件上的对应密码的数字收集,最终形成密码。
具体实现:
工程名:TestPicturePassword
一般常见的图案密码按键都是圆形的,所以利用重绘事件画一个圆形。
/// <summary>
/// 按键形状类
/// </summary>
public class KeyBorder:Border
{
public Brush SelfBacground
{
get { return (Brush)GetValue(SelfBacgroundProperty); }
set
{
SetValue(SelfBacgroundProperty, value);
this.InvalidateVisual();
}
}
public static readonly DependencyProperty SelfBacgroundProperty =
DependencyProperty.Register("SelfBacground", typeof(Brush), typeof(KeyBorder), new UIPropertyMetadata());
/// <summary>
/// 使绘制区域为自定义形状,这里是圆形
/// </summary>
/// <param name="dc"></param>
protected override void OnRender(System.Windows.Media.DrawingContext dc)
{
base.OnRender(dc);
//画矩形的
//SolidColorBrush mySolidColorBrush = new SolidColorBrush();
//mySolidColorBrush.Color = Colors.LimeGreen;
//Pen myPen = new Pen(Brushes.Blue, 10);
//Rect myRect = new Rect(0, 0, 500, 500);
//dc.DrawRectangle(mySolidColorBrush, myPen, myRect);
//画圆形
EllipseGeometry ellipse = new EllipseGeometry(new Point(40, 40), 30, 30);//piont中的参数最好要设置属性进行外部设置
ellipse.RadiusX = 30;
ellipse.RadiusY = 30;
RectangleGeometry rect = new RectangleGeometry(new Rect(50, 50, 50, 20), 5, 5);
GeometryGroup group = new GeometryGroup();
group.FillRule = FillRule.EvenOdd;
group.Children.Add(ellipse);
//group.Children.Add(rect);
dc.DrawGeometry(SelfBacground, new Pen(Brushes.Green, 2), group);
}
}
再将这个圆形放在另一个容器中,将容器控件的背景设置为透明。
<UserControl x:Class="TestPicturePassword.KeyButton"
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:local="clr-namespace:TestPicturePassword"
mc:Ignorable="d" Background="Transparent"
BorderThickness="0">
<Grid>
<local:KeyBorder x:Name="ellipseBorder" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
</UserControl>
/// <summary>
/// KeyButton.xaml 的交互逻辑
/// </summary>
public partial class KeyButton : UserControl
{
public Brush SelfBacground
{
get { return (Brush)GetValue(SelfBacgroundProperty); }
set
{
SetValue(SelfBacgroundProperty, value);
this.ellipseBorder.SelfBacground = value;
}
}
public static readonly DependencyProperty SelfBacgroundProperty =
DependencyProperty.Register("SelfBacground", typeof(Brush), typeof(UserControl), new UIPropertyMetadata());
public KeyButton()
{
InitializeComponent();
}
}
最终将按键按要求排布,
如图,
<UserControl x:Class="TestPicturePassword.PatternPasswordKeyboard"
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:local="clr-namespace:TestPicturePassword"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid HorizontalAlignment="Center" Name="grid1" VerticalAlignment="Center"
Background="Transparent">
<Grid.Resources>
<!--键盘按钮的样式-->
<Style x:Key="PasswordBorderStyle" TargetType="local:KeyButton">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="SelfBacground" Value="Gray"/>
<Setter Property="Width" Value="80" />
<Setter Property="Height" Value="80" />
<Setter Property="Margin" Value="10"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<EventSetter Event="Mouse.MouseMove" Handler="BorderMouseMove"/>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<local:KeyButton Grid.Row="0" Grid.Column="0" x:Name="border1" Style="{StaticResource PasswordBorderStyle}" Tag="1" />
<local:KeyButton Grid.Row="0" Grid.Column="1" x:Name="border2" Style="{StaticResource PasswordBorderStyle}" Tag="2" />
<local:KeyButton Grid.Row="0" Grid.Column="2" x:Name="border3" Style="{StaticResource PasswordBorderStyle}" Tag="3" />
<local:KeyButton Grid.Row="1" Grid.Column="0" x:Name="border4" Style="{StaticResource PasswordBorderStyle}" Tag="4" />
<local:KeyButton Grid.Row="1" Grid.Column="1" x:Name="border5" Style="{StaticResource PasswordBorderStyle}" Tag="5" />
<local:KeyButton Grid.Row="1" Grid.Column="2" x:Name="border6" Style="{StaticResource PasswordBorderStyle}" Tag="6" />
<local:KeyButton Grid.Row="2" Grid.Column="0" x:Name="border7" Style="{StaticResource PasswordBorderStyle}" Tag="7" />
<local:KeyButton Grid.Row="2" Grid.Column="1" x:Name="border8" Style="{StaticResource PasswordBorderStyle}" Tag="8" />
<local:KeyButton Grid.Row="2" Grid.Column="2" x:Name="border9" Style="{StaticResource PasswordBorderStyle}" Tag="9" />
</Grid>
</UserControl>
后台代码,在这里实现密码收集。
/// <summary>
/// PatternPasswordKeyboard.xaml 的交互逻辑
/// </summary>
public partial class PatternPasswordKeyboard : UserControl
{
public string password = string.Empty;//最终密码
private bool isMouseDonw = false;//控制只有鼠标按下的滑动才有效
private List<KeyButton> keyButtons = new List<KeyButton>();//密码所在的控件
public PatternPasswordKeyboard()
{
InitializeComponent();
this.MouseUp += new MouseButtonEventHandler(MainWindow_MouseUp);
this.MouseDown += new MouseButtonEventHandler(MainWindow_MouseDown);
}
/// <summary>
/// 重置
/// </summary>
internal void PatternPasswordKeyboard_ResetPassword()
{
this.password = string.Empty;
foreach (KeyButton item in keyButtons)
{
item.SelfBacground = new SolidColorBrush(Colors.Transparent);
}
}
void MainWindow_MouseDown(object sender, MouseButtonEventArgs e)
{
isMouseDonw = true;
}
void MainWindow_MouseUp(object sender, MouseButtonEventArgs e)
{
isMouseDonw = false;
}
private void BorderMouseMove(object sender, MouseEventArgs e)
{
if (!isMouseDonw)
{
return;
}
KeyButton border = sender as KeyButton;
if (border == null)
{
return;
}
string key = border.Tag.ToString();
if (string.IsNullOrEmpty(key))
{
return;
}
if (!password.Contains(key))
{
password += key;
}
border.SelfBacground = new SolidColorBrush(Colors.Blue);
keyButtons.Add(border);
}
}
测试代码:
如图,
<Window x:Class="TestPicturePassword.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestPicturePassword"
Title="MainWindow" xmlns:my="clr-namespace:TestPicturePassword">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<local:PatternPasswordKeyboard Grid.Row="0" x:Name="pkeyboard"/>
<StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="您输入的密码是:" VerticalAlignment="Center" FontSize="20" FontFamily="Microsoft YaHei" Margin="0,0,20,0"/>
<TextBox Height="50" HorizontalAlignment="Left" Name="textBox1" VerticalAlignment="Top" Width="291" Margin="0,0,50,0"/>
<Button Content="重 置" Height="50" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="110" Click="button1_Click" />
</StackPanel>
</Grid>
</Window>
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.MouseUp += new MouseButtonEventHandler(MainWindow_MouseUp);
}
void MainWindow_MouseUp(object sender, MouseButtonEventArgs e)
{
this.textBox1.Text = pkeyboard.password;
}
/// <summary>
/// 重置
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void button1_Click(object sender, RoutedEventArgs e)
{
this.pkeyboard.PatternPasswordKeyboard_ResetPassword();
}
}
效果图
代码下载:http://download.csdn.net/detail/yysyangyangyangshan/5724829
分享到:
相关推荐
GongSolutions.WPF.DragDrop 一种易于使用的WPF拖放框架。 支持.NET Framework 4.5+和.NET Core 3(3.0和3.1) 产品特点 与MVVM一起使用:拖放的逻辑可以放在ViewModel中。 无需在代码背后放置任何代码,而是将...
WPF-Diagram-Designer:WPF图表设计器源代码
gong-wpf-dragdrop, GongSolutions.WPF.DragDrop 库是WPF的拖动'n'拖放框架 简介GongSolutions.WPF.DragDrop 库是一个易于使用的拖拉'n'拖放框架。特性使用 MVVM: 拖放逻辑可以放在ViewModel中。 代码不需要放在in中...
WPF-Demo:WPF示例源代码
c#-的WPF---MVVM例子,大家共同学习
vavatech-rittal-wpf-mvvm:Przykładyze szkolenia WPF MVVM
一个简单的WPF程序
WPF-ControlBase OverView 动画封装 属性表单 消息对话 在WPF中应用MVC 其他功能说明 支持
bootstrap-wpf-style-master 样式代码 。。。。。。。。
Prism-Samples-Wpf-master06-10的VS2017版本实现,下载手动重新安装一下nuget包即可,方便大家学习
用WPF实现的一个简单的图案密码键盘,功能还没实现完整,主要是和大家交流下,争取完善。 文章:http://blog.csdn.net/yysyangyangyangshan/article/details/9280439
WPF数学 WPF-Math是一个.NET库,用于WPF框架,使用LaTeX排版样式呈现数学公式。 入门 使用WPF-Math的最简单方法是在XAML文件中呈现静态公式,如下所示。 < Window xss=removed clr-namespace:WpfMath.Controls;...
wpf--ListBox分组-排序 wpf--ListBox分组-排序
C#开发WPF-Silverlight动画及游戏系列教程-深蓝色右手 C#开发WPF-Silverlight动画及游戏系列教程-深蓝色右手 C#开发WPF-Silverlight动画及游戏系列教程-深蓝色右手
WPF 引导程序通过 使用此 WPF Bootstrap 启动带有 Telerik 控件的 WPF PRISM 应用程序。 它为 WPF PRISM 应用程序创建一个项目结构,然后继续与 Telerik WPF UI 控件集成,以提供一个停靠和选项卡丰富的用户界面,...
我最近打算学习WPF ,在寻找MVVM框架的时候发现了PRISM,在此之前还从一些博客上了解了其它的MVVM框架,比如浅谈WPF中的MVVM框架--MVVMFoundation 中提到的MVVMFoundation,再比如 ViewModel从未如此清爽 - 轻量级...
Syncfusion WPF文档 这是Syncfusion WPF组件技术产品文档的GitHub存储库。 本文档已发布到 捐款欢迎! 我们欢迎有关改进WPF组件用户指南文档的。 您对此的贡献将不胜感激。
WPF编程宝典:使用C# 2012和.NET 4.5(第4版),完整扫描版. 带书签,经本人整理裁剪适合手机屏,1-3章为清晰版,其它为扫描版
WPF-:wpf入门系列源码
SingleInstance-WPF-样本基于工作代码的示例单实例WPF项目使用Mutex检查单个实例/// < summary>/// This identifier must be unique for each application./// </ summary>private const string ...