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