希望大家有這方面好的代碼給提供下，謝謝了！

? ? 想用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

?

轉載于:https://www.cnblogs.com/dyllove98/p/3180065.html

總結

以上是生活随笔為你收集整理的WPF-21：WPF实现仿安卓的图案密码键盘（初级）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。