希望大家有这方面好的代码给提供下,谢谢了!
想用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