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