WPF-21: WPF Implementation of imitation Android pattern password keyboard (Elementary)

I hope you can provide the Code in this regard. Thank you!

I want to use C # as a graphic and password keyboard that is the same as that on my mobile phone. It seems that there is little information in this regard. Although there is also winphone, there is no such code on the Internet. I had to use the conventional thinking to implement it. Of course, it is relatively simple. I hope all experts can give some good suggestions. This article is a reference and can be implemented using WPF.

The idea is as follows:
Use common controls to draw from the simplest patterns, place them on the corresponding controls, use the move event of the mouse to determine which controls the mouse slides over, and then collect the numbers of the corresponding passwords on the control, the final password is formed.
Specific implementation:
Project name: testpicturepassword
Generally, the password keys in the pattern are circular, so a circle is drawn using the re-painting event.

/// <Summary> /// key shape class /// </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> // set the painting area to a custom shape, here is the circle // </Summary> // <Param name = "DC"> </param> protected override void onrender (system. windows. media. drawingcontext DC) {base. onrender (DC); // draw a rectangle // 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); // draw a circular ellipsegeometry ellipse = new ellipsegeometry (new point (40, 40), 30, 30 ); // Set Properties for parameters in piont for external setting 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 );}}

Place the circle in another container and set the background of the Container Control to transparent.

<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. interaction logic of 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 ();}}

Finally, sort the buttons as required,
,

<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 "verticalignment =" center "background =" Transparent "> <grid. Resources> <! -- Keyboard button style --> <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 = "verticalignment" value = "stretch"/> <eventsetter event = "Mouse. mousemove "handler =" bordermousemove "/> </style> </grid. resources> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> </grid. rowdefinitions> <grid. columndefinitions> <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>

Background code, where password collection is implemented.
 

/// <Summary> /// patternpasswordkeyboard. interaction logic of XAML // </Summary> Public partial class patternpasswordkeyboard: usercontrol {Public String Password = string. empty; // The final password private bool ismousedonw = false; // The private list <keybutton> keybuttons = new list <keybutton> () is valid only when the mouse is clicked (); // The Public patternpasswordkeyboard () {initializecomponent (); this. mouseup + = new mousebuttoneventhandler (mainwi Ndow_mouseup); this. mousedown + = new mousebuttoneventhandler (mainwindow_mousedown);} // <summary> // reset /// </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 );}}

Test code:
,

<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. 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 = "Your entered password is: "verticalalignment =" center "fontsize =" 20 "fontfamily =" Microsoft yahei "margin =" 0, 0, 20, 0 "/> <textbox Height =" 50 "horizontalalignment =" Left "name =" textbox1 "verticalignment =" TOP "width =" 291 "margin =, 50,0 "/> <button content =" reset "Height =" 50 "horizontalalignment =" Left "name =" button1 "verticalignment =" TOP "width =" 110 "Click =" button#click "/> </stackpanel> </GRID> </WINDOW>

/// <Summary> /// mainwindow. interaction logic of 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> /// reset /// </Summary> /// <Param name = "sender"> </param> /// <Param name =" E "> </param> private void button#click (Object sender, routedeventargs e) {This. pkeyboard. patternpasswordkeyboard_resetpassword ();}}

Code download: http://download.csdn.net/detail/yysyangyangyangshan/5724829