Wpf登录验证方式(3)-图标点选的实现
AIStudio框架汇总及介绍
实现思路：
1.随机生成四个图标
2.区域从左到右均分成四个区域，每个区域随机一个点
3.在随机的四个点上显示图标，图标随机旋转一定角度。
4.对这四个图标进行随机排序，然后选择前三个作为点击顺序，并显示在界面下方指引用户。
5.点击汉字显示一个定位标记，内部有个文字，按照点击顺序从1标记到3.
截图如下：
按照顺序点击后
XAML代码同 Wpf登录验证方式(2)-文字点选的实现
cs代码也基本相同。现在只贴出不同处
1.将随机汉字改成随机图标
if (IsEmoji) { var emoji = EmojiText.Emoji.OrderBy(p => ran.NextDouble()).Take(4).ToList(); str1 = emoji[0]; str2 = emoji[1]; str3 = emoji[2]; str4 = emoji[3]; } else { //调用函数产生4个随机中文汉字编码 object[] bytes = ChineseCode.CreateRegionCode(4); //根据汉字编码的字节数组解码出中文汉字 str1 = gb.GetString((byte[])Convert.ChangeType(bytes[0], typeof(byte[]))); str2 = gb.GetString((byte[])Convert.ChangeType(bytes[1], typeof(byte[]))); str3 = gb.GetString((byte[])Convert.ChangeType(bytes[2], typeof(byte[]))); str4 = gb.GetString((byte[])Convert.ChangeType(bytes[3], typeof(byte[]))); }
2. 是否为图标模式
public bool IsEmoji
{
get { return (bool)GetValue(IsEmojiProperty); }
set { SetValue(IsEmojiProperty, value); }
}
public static readonly DependencyProperty IsEmojiProperty =
DependencyProperty.Register("IsEmoji", typeof(bool), typeof(TextClickVerify), new PropertyMetadata(false));
图标类
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace Util.Controls { class EmojiText { public static Lazy<string[]> Emoji = new Lazy<string[]>(GetEmoji); public static string[] GetEmoji() { return new string[] { "😁", "😃", "😅", "😆", "😉", "😊", "😋", "😎", "😍", "😘", "😚", "😇", "😐", "😶", "😏", "😣", "😥", "😪", "😫", "😌", "😜", "😝", "😒", "😓", "😔", "😲", "😷", "😖", "😞", "😤", "😢", "😭", "😨", "😰", "😱", "😳", "😵", "😡", "😠", "😈", "👿", "👹", "👺", "💀", "👻", "👽", "👦", "👧", "👨", "👩", "👴", "👵", "👶", "👱", "👮", "👲", "👳", "👷", "👸", "💂", "🎅", "👰", "👼", "💆", "💇", "🙍", "🙎", "🙅", "🙆", "💁", "🙋", "🙇", "🙌", "🙏", "👤", "👯", "💃", "👫", "💏", "👪", "💪", "👈", "👉", "☝", "👆", "👇", "✋", "👌", "👍", "👎", "✊", "👊", "👋", "👏", "👐", "👣", "👀", "👂", "👃", "👅", "👄", "💋", "👓", "👔", "👕", "👖", "👗", "👘", "👙", "👚", "👛", "👜", "👝", "🎒", "💼", "👞", "👟", "👠", "👡", "👢", "👑", "👒", "🎩", "🎓", "💄", "💅", "💍", "🌂", "🙈", "🙉", "🙊", "🐵", "🐒", "🐶", "🐩", "🐺", "🐱", "😺", "😸", "😹", "😻", "😼", "😽", "🙀", "😿", "😾", "🐯", "🐴", "🐎", "🐮", "🐷", "🐗", "🐽", "🐑", "🐫", "🐘", "🐭", "🐹", "🐰", "🐻", "🐨", "🐼", "🐾", "🐔", "🐣", "🐤", "🐥", "🐦", "🐧", "🐸", "🐢", "🐍", "🐲", "🐳", "🐬", "🐟", "🐠", "🐡", "🐙", "🐚", "🐌", "🐛", "🐜", "🐝", "🐞", "💐", "🌸", "💮", "🌹", "🌺", "🌻", "🌼", "🌷", "🌱", "🌴", "🌵", "🌾", "🌿", "☘", "🍀", "🍁", "🍂", "🍃", "🍇", "🍈", "🍉", "🍊", "🍌", "🍍", "🍎", "🍏", "🍑", "🍒", "🍓", "🍅", "🍆", "🌽", "🍄", "🌰", "🍞", "🍖", "🍗", "🍔", "🍟", "🍕", "🍳", "🍲", "🍱", "🍘", "🍙", "🍚", "🍛", "🍜", "🍝", "🍠", "🍢", "🍣", "🍤", "🍥", "🍡", "🍦", "🍧", "🍨", "🍩", "🍪", "🎂", "🍰", "🍫", "🍬", "🍭", "🍮", "🍯", "☕", "🍵", "🍶", "🍷", "🍸", "🍹", "🍺", "🍻", "🍴", "🎪", "🎭", "🎨", "🎰", "🛀", "🎫", "🏆", "⚽", "⚾", "🏀", "🏈", "🎾", "🎱", "🎳", "⛳", "🎣", "🎽", "🎿", "🏂", "🏄", "🏊", "🎯", "🎮", "🎲", "🎷", "🎸", "🎺", "🎻", "🎬", "👾", "🌋", "🗻", "🏠", "🏡", "🏢", "🏣", "🏥", "🏦", "🏨", "🏩", "🏪", "🏫", "🏬", "🏭", "🏯", "🏰", "💒", "🗼", "🗽", "⛪", "⛲", "🌁", "🌃", "🌆", "🌇", "🌉", "🌌", "🎠", "🎡", "🎢", "🚃", "🚄", "🚅", "🚇", "🚉", "🚌", "🚏", "🚑", "🚒", "🚓", "🚕", "🚗", "🚚", "🚲", "⛽", "🚨", "🚥", "🚧", "⚓", "⛵", "🚤", "🚢", "✈", "💺", "🚀", "🎑", "🗿", "💌", "💎", "🔪", "💈 ", "🚪 ", "🚽", "⌛", "⏳", "⌚", "⏰", "🎈", "🎉", "🎊", "🎎", "🎏", "🎐", "🎀", "🎁", "📻", "📱", "📲", "☎", "📞", "📟", "📠", "🔋", "🔌", "💻", "💽", "💾", "💿", "📀", "🎥", "📺", "📷", "📹", "📼", "🔍", "🔎", "📡", "💡", "🔦", "🏮", "📔", "📕", "📖", "📗", "📘", "📙", "📚", "📓", "📃", "📜", "📄", "📰", "📑", "🔖", "💰", "💴", "💵", "💸", "💳", "✉", "📧", "📨", "📩", "📤", "📥", "📦", "📫", "📪", "📮", "✏", "✒", "📝", "📁", "📂", "📅", "📆", "📇", "📈", "📉", "📊", "📋", "📌", "📍", "📎", "📏", "📐", "✂", "🔒", "🔓", "🔏", "🔐", "🔑", "🔨", "🔫", "🔧", "🔩", "🔗", "💉", "💊", "🚬", "🗿", "🔮", "🚩", "🎌", "💦", "💨", "💣", "💩", "⌛", "⏳", "⌚", "⏰", "💘", "❤", "💓", "💔", "💕", "💖", "💗", "💜", "💝", "💞", "💟", "💐", "🌸", "💮", "🌹", "🌺", "🌻", "🌼", "🌷", "🌑", "🌓", "🌔", "🌕", "🌙", "🌛", "🍇", "🍈", "🍉", "🍊", "🍌", "🍍", "🍎", "🍏", "🍑", "🍒", "🍓", "📱", "📲", "☎", "📞", "📟", "📠", "🔋", "🔌", "💻", "💽", "💾", "💿", "📀", "🎥", "📺", "📷", "📹", "📼", "🔍", "🔎", "📡", "📔", "📕", "📖", "📗", "📘", "📙", "📚", "📓", "📃", "📜", "📄", "📰", "📑", "🔖", "💳", "✉", "📧", "📨", "📩", "📤", "📥", "📦", "📫", "📪", "📮", "✏", "✒", "📝", "📁", "📂", "📅", "📆", "📇", "📈", "📉", "📊", "📋", "📌", "📍", "📎", "📏", "📐", "✂", "🔒", "🔓", "🔏", "🔐", "🔑", "🔃", "🔙", "🔚", "🔛", "🔜", "🔝", "📱", "📲", "📶", "📳", "📴", "☎", "📞", "📟", "📠", "♻", "🏧", "♿", "🚹", "🚺", "🚻", "🚼", "🚾", "⚠", "⛔", "🚫", "🚭", "🔞", "💈", "🚃", "🚄", "🚅", "🚇", "🚉", "🚌", "🚏", "🚑", "🚒", "🚓", "🚕", "🚗", "🚚", "🚲", "⛽", "🚨", "🚥", "🚧", "⚓", "⛵", "🚤", "🚢", "✈", "💺", "🚀", "🏠", "🏡", "🏢", "🏣", "🏥", "🏦", "🏨", "🏩", "🏪", "🏫", "🏬", "🏭", "🏯", "🏰", "💒", "🗼", "🗽", "⛪", "🌆", "🌇", "🌉", "💴", "💵", "💰", "💸", "💳", "🌿", "🍀", "🍁", "🍂", "🍃", "☘", }; } } }
控件使用方法
<util:TextClickVerify x:Name="verify3" IsEmoji="True" Width="300" Height="300">
<i:Interaction.Triggers>
<i:EventTrigger EventName="ResultChanged">
<i:InvokeCommandAction Command="{Binding ResultChangedComamnd}" CommandParameter="{Binding Path=Result,ElementName=verify2}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</util:TextClickVerify>
好了，下一章我们写什么验证方式呢？
