WPF-21:WPF实现仿安卓的图案密码键盘(初级)

希望大家有这方面好的代码给提供下,谢谢了!

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

你可能感兴趣的:(C#,WPF,图案键盘)