• 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

  • 相关阅读:
    本地快速搭建 FTP 服务器
    css 四个角
    时间
    两个json深度对比
    工作常用
    js模块化 中的变量可在局部 中的‘全局共享’
    datatables 的导出button自定义
    css布局技巧
    datables自定义排序
    js判断是否为空 或者全部为空
  • 原文地址:https://www.cnblogs.com/jiangu66/p/3181879.html
Copyright © 2020-2023  润新知