Wpf登入驗證方式(4)-語序點選的實現
阿新 • • 發佈：2020-12-16
實現思路:（和驗證方式2,3基本相似）
1.隨機選擇一條成語，按照順序拆成漢字，儲存到一個數組內
2.區域從左到右均分成漢字個數區域，每個區域隨機一個點
3.對這漢字進行隨機排序
3.在隨機的漢字按照順序顯示在2生成的點上
5.點選漢字顯示一個定位標記，內部有個文字，按照點選順序從1開始標記.
6.如果點選的文字順序和1儲存的陣列一致，那麼通過驗證
截圖如下：
按照順序點選後
XAML程式碼如下：
<UserControl x:Class="Util.Controls.TextClickVerify"
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:controls="clr-namespace:Util.Controls"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Resources>
<!--Button模板-->
<ControlTemplate x:Key="DefaultButton_Template" TargetType="{x:Type Button}">
<Border x:Name="border" Background="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background}"
Height="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Height}"
CornerRadius="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(controls:ControlAttachProperty.CornerRadius)}"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
Width="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Width}">
<!--Text-->
<Grid VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
<ContentPresenter RecognizesAccessKey="True" VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</Border>
<!--觸發器-->
<ControlTemplate.Triggers>
<!--設定滑鼠進入時的背景、前景樣式-->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},
Path=(controls:ControlAttachProperty.MouseOverBackground)}" TargetName="border" />
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},
Path=(controls:ControlAttachProperty.MouseOverForeground)}"/>
</Trigger>
<!--滑鼠按下時的前景、背景樣式-->
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},
Path=(controls:ControlAttachProperty.PressedBackground)}" TargetName="border" />
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},
Path=(controls:ControlAttachProperty.PressedForeground)}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value="0.5" TargetName="border"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="DefaultButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{DynamicResource AccentColorBrush}" />
<Setter Property="Foreground" Value="{DynamicResource WhiteBrush}" />
<Setter Property="controls:ControlAttachProperty.MouseOverBackground" Value="{DynamicResource GrayBrush8}" />
<Setter Property="controls:ControlAttachProperty.MouseOverForeground" Value="{DynamicResource BlackBrush}" />
<Setter Property="controls:ControlAttachProperty.PressedBackground" Value="{DynamicResource AccentColorBrush}" />
<Setter Property="controls:ControlAttachProperty.PressedForeground" Value="{DynamicResource WhiteBrush}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="controls:ControlAttachProperty.CornerRadius" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Content" Value="{x:Null}" />
<Setter Property="MinHeight" Value="22" />
<Setter Property="Template" Value="{StaticResource DefaultButton_Template}"/>
<Setter Property="BorderThickness" Value="1"/>
</Style>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Canvas x:Name="myCanvas">
</Canvas>
<TextBlock x:Name="txtInfo" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Button x:Name="btnReset" Grid.Row="1" Visibility="Collapsed" Style="{StaticResource DefaultButtonStyle}"/>
</Grid>
</UserControl>
cs程式碼如下：和2和3是一個控制元件，稍微整理了一下，和之前的略有不同
using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Threading; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Controls.Primitives;using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace Util.Controls { /// <summary> /// TextClickVerify.xaml 的互動邏輯 /// </summary>public partial class TextClickVerify : UserControl { public TextClickVerify() { InitializeComponent(); this.Loaded += TextClickVerify_Loaded; ; myCanvas.MouseLeftButtonDown += MyCanvas_MouseLeftButtonDown; btnReset.Click += BtnReset_Click; } private void BtnReset_Click(object sender, RoutedEventArgs e) { Restart(); } private void MyCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { if (btnReset.Visibility == Visibility.Visible) { Restart(); return; } var position = e.GetPosition(myCanvas); AddPath(clicklength - strs.Count + 1, position.X, position.Y); if (e.OriginalSource.GetType() == typeof(Grid)) { Grid grid = (Grid)e.OriginalSource; if (grid.Tag.ToString() == strs.FirstOrDefault()) { strs.RemoveAt(0); if (strs.Count == 0) { Result = true; RaiseResultChanged(Result); txtInfo.Visibility = Visibility.Collapsed; btnReset.Visibility = Visibility.Visible; btnReset.Content = "驗證成功"; btnReset.Background = Brushes.Green; } } else { RaiseResultChanged(Result); txtInfo.Visibility = Visibility.Collapsed; btnReset.Visibility = Visibility.Visible; btnReset.Content = "驗證失敗，請重試"; btnReset.Background = Brushes.Red; } } else { RaiseResultChanged(Result); txtInfo.Visibility = Visibility.Collapsed; btnReset.Visibility = Visibility.Visible; btnReset.Content = "驗證失敗，請重試"; btnReset.Background = Brushes.Red; } } public bool Result { get { return (bool)GetValue(ResultProperty); } set { SetValue(ResultProperty, value); } } public static readonly DependencyProperty ResultProperty = DependencyProperty.Register("Result", typeof(bool), typeof(TextClickVerify), new PropertyMetadata(false)); public string ImageUri { get { return (string)GetValue(ImageUriProperty); } set { SetValue(ImageUriProperty, value); } } public static readonly DependencyProperty ImageUriProperty = DependencyProperty.Register("ImageUri", typeof(string), typeof(TextClickVerify), new PropertyMetadata(null)); #region Routed Event public static readonly RoutedEvent ResultChangedEvent = EventManager.RegisterRoutedEvent("ResultChanged", RoutingStrategy.Bubble, typeof(ResultChangedEventHandler), typeof(TextClickVerify)); public event ResultChangedEventHandler ResultChanged { add { AddHandler(ResultChangedEvent, value); } remove { RemoveHandler(ResultChangedEvent, value); } } void RaiseResultChanged(bool result) { var arg = new RoutedEventArgs(ResultChangedEvent, result); RaiseEvent(arg); } #endregion private void TextClickVerify_Loaded(object sender, RoutedEventArgs e) { Restart(); } private List<string> strs; private int clicklength; private void Restart() { if (!myCanvas.IsVisible) return; Result = false; Random ran = new Random(); BitmapImage image = GetBitmapImage(); SetBackground(image); //獲取GB2312編碼頁（表） Encoding gb = Encoding.GetEncoding("gb2312"); string tooltip = string.Empty; if (IsEmoji) { var emoji = EmojiText.Emoji.Value.OrderBy(p => ran.NextDouble()).Take(4).ToList(); strs = new List<string>(); strs.Add(emoji[0]); strs.Add(emoji[1]); strs.Add(emoji[2]); strs.Add(emoji[3]); clicklength = 3; } else if (IsIdioms) { var idioms = IdiomsText.Idioms.Value; var idiomkey = idioms.Keys.ToArray()[ran.Next(0, idioms.Count)]; tooltip = idioms[idiomkey]; clicklength = idiomkey.Length; strs = new List<string>(); for(int i = 0; i < clicklength; i ++) { strs.Add(idiomkey.Substring(i, 1)); } } else { //呼叫函式產生4個隨機中文漢字編碼 object[] bytes = ChineseCode.CreateRegionCode(4); //根據漢字編碼的位元組陣列解碼出中文漢字 strs = new List<string>(); strs.Add(gb.GetString((byte[])Convert.ChangeType(bytes[0], typeof(byte[])))); strs.Add(gb.GetString((byte[])Convert.ChangeType(bytes[1], typeof(byte[])))); strs.Add(gb.GetString((byte[])Convert.ChangeType(bytes[2], typeof(byte[])))); strs.Add(gb.GetString((byte[])Convert.ChangeType(bytes[3], typeof(byte[])))); clicklength = 3; } int width = (int)(myCanvas.ActualWidth - 30); int height = (int)(myCanvas.ActualHeight - 40); var brush = Application.Current.FindResource("AccentColorBrush") as Brush; var clickstrs = strs.OrderBy(p => ran.NextDouble()).ToArray(); myCanvas.Children.Clear(); for (int i = 0; i < clicklength; i++) { AddChild(clickstrs[i], i, clicklength, brush, width, height, ran); } strs = strs.Take(clicklength).ToList(); txtInfo.Visibility = Visibility.Visible; if (clicklength == 3) { txtInfo.Text = $"請依次點選\"{strs[0]}\"\"{strs[1]}\"\"{strs[2]}\""; txtInfo.ToolTip = txtInfo.Text; } else { txtInfo.Text = "請按語序依次點選文字"; txtInfo.ToolTip = $"\"{string.Join("", strs)}\"{tooltip}"; } btnReset.Visibility = Visibility.Collapsed; btnReset.Background = Brushes.Transparent; } public void AddChild(string str, int index, int totalindex, Brush brush, int width, int height, Random ran) { Grid grid = new Grid(); grid.Tag = str; OutlineText outlinetext = new OutlineText() { FontSize = 30, Text = str, FontWeight = FontWeights.Bold, Fill = new SolidColorBrush (Color.FromRgb(Convert.ToByte(ran.Next(0, 255)), Convert.ToByte(ran.Next(0, 255)), Convert.ToByte(ran.Next(0, 255)))),//brush, IsHitTestVisible = false, }; grid.Children.Add(outlinetext); SetLeft(grid, ran.Next((int)(width * index / totalindex) , (int)(width * (index + 1)/ totalindex))); SetTop(grid, ran.Next(0, (int)height)); RotateTransform rtf = new RotateTransform(ran.Next(0, 360), 15, 20); grid.RenderTransform = rtf; grid.Background = new SolidColorBrush(Colors.Transparent); myCanvas.Children.Add(grid); } private void AddPath(int number, double left, double top) { Grid grid = new Grid(); Path path = new Path(); path.Fill = Application.Current.FindResource("AccentColorBrush") as Brush;// Application.Current.FindResource("BlackBrush") as Brush; path.Stroke = Application.Current.FindResource("WhiteBrush") as Brush; string sData = "M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"; var converter = TypeDescriptor.GetConverter(typeof(Geometry)); path.Data = (Geometry)converter.ConvertFrom(sData); path.Height = 40; path.Width = 30; path.StrokeThickness = 2; path.Stretch = Stretch.Fill; path.HorizontalAlignment = HorizontalAlignment.Center; path.VerticalAlignment = VerticalAlignment.Center; grid.Children.Add(path); TextBlock text = new TextBlock(); text.Text = number.ToString(); text.Foreground = Application.Current.FindResource("WhiteBrush") as Brush; text.HorizontalAlignment = HorizontalAlignment.Center; text.VerticalAlignment = VerticalAlignment.Center; text.Margin = new Thickness(0, 0, 0, 2); grid.Children.Add(text); myCanvas.Children.Add(grid); SetLeft(grid, left - path.Width / 2); SetTop(grid, top - path.Height); } private BitmapImage GetBitmapImage() { Random ran = new Random(); int value = ran.Next(1, 3); // Create source. BitmapImage image = new BitmapImage(); // BitmapImage.UriSource must be in a BeginInit/EndInit block. image.BeginInit(); image.UriSource = new Uri(ImageUri ?? $"pack://application:,,,/Util.Controls;component/Resources/{value}.jpg"); image.DecodePixelWidth = (int)myCanvas.ActualWidth; image.DecodePixelHeight = (int)myCanvas.ActualHeight; image.EndInit(); return image; } private void SetBackground(BitmapImage image) { ImageBrush ib = new ImageBrush(); ib.ImageSource = image; myCanvas.Background = ib; } private void SetVerCenter(FrameworkElement element) { double top = (myCanvas.ActualHeight - element.ActualHeight) / 2; Canvas.SetTop(element, top); } private void SetLeft(FrameworkElement element, double left) { Canvas.SetLeft(element, left); } private void SetTop(FrameworkElement element, double top) { Canvas.SetTop(element, top); } 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)); public bool IsIdioms { get { return (bool)GetValue(IsIdiomsProperty); } set { SetValue(IsIdiomsProperty, value); } } public static readonly DependencyProperty IsIdiomsProperty = DependencyProperty.Register("IsIdioms", typeof(bool), typeof(TextClickVerify), new PropertyMetadata(false)); } }
成語大全文字上傳一部分，大家可以百度搜一下完整的，完整的太多，上傳失敗
樽酒論文 拼音：zūn jiǔ lùn w釋義：一邊喝酒，一邊議論文章。出處：唐·杜甫《春日憶李白》詩何時一樽酒，重與細論文。”示例：連年客裡度初度，～第一遭。★陳世宜《上巳社集是日值餘初度》詩 遵養時晦 拼音：zūn yǎng shí huì釋義：遵遵循，按照；時時勢；晦隱藏。原為頌揚周武王順應時勢，退守待時◇多指暫時隱居，等待時機。出處：《詩經·周頌·酌》於鑠王師，遵養時晦。”示例：段祺瑞經了此險，越發杜門謝客，～，連幾個圍棋好友，也不甚往來了。★蔡東藩、許厪父《民國通俗演義》第五十一回 樽前月下 拼音：zūn qián yuè xià釋義：酒樽之前，月亮之下。指對酒賞月的悠閒情境。出處：清·龔自珍《與吳虹生書八》弟此節俗冗，焦頭爛額，對月對酒皆不樂。樽前月下，尚有剝啄之聲，如御十萬敵，必須在家首先搪拒，竟無福前來望見顏色矣。”示例：無 樽俎折衝 拼音：zūn zǔ zhé chōng釋義：指不以武力而在宴席交談中制勝敵人◇泛指外交談判活動。折衝，使敵人戰車後撤，指擊退敵軍。出處：語出漢·劉向《新序·雜事一》示例：今吾國以存亡關係而不簽字，各國當能見諒，必可留作懸案，為他日～之餘地。★《五四”愛國運動資料·學界風潮記下編》 左道旁門 拼音：zuǒ dào páng mén釋義：原指不正派的宗教派別。借指不正派的宗教派別。現泛指不正派的東西。出處：明·許仲琳《封神演義》第三十四回左道旁門亂似麻，只因昏主起波查。”示例：這又不過是～，借書符唸咒惑眾騙錢罷了。★《晚清文學叢鈔·掃迷帚》第十三回 左輔右弼 拼音：zuǒ fǔ yòu bì釋義：圃、弼本指輔助帝王或太子的官，後引伸為左右輔佐的人。比喻在左右輔助。出處：《晉書·潘尼傳》左輔右弼，前疑後承。一日萬機，業業兢兢。”示例：以後還望中堂忍辱負重，化險為夷，兩公～，折衝禦侮。★清·曾樸《孽海花》第二十七回 左顧右眄 拼音：zuǒ gù yòu miǎn釋義：左看右看。細看。出處：宋·洪邁《夷堅丁志·奢侈報》信自僦一齋，好絜其衣服，左顧右眄，小不整即呼匠治之。”示例：無 左顧右盼 拼音：zuǒ gù yòu pàn釋義：顧、盼看。向左右兩邊看。形容人驕傲得意的神情。出處：晉·左思《詠史》詩左眄澄江湘，右盼定羌胡。”示例：都尉朝天躍馬歸，香風吹人花亂飛。銀鞍紫鞚照雲日，～生光輝。★唐·李白《走筆獨孤附馬》詩 左家嬌女 拼音：zuǒ jiā jiāo nǚ釋義：指美麗可愛的少女。出處：晉·左思《嬌女詩（吾家有嬌女）》吾家有嬌女，皎皎頗白皙。”唐·李商隱《王十二兄與畏之員外相訪見招小飲時予以悼亡日近不去因寄》詩嵇氏幼男猶可憫，左家嬌女豈能忘。”示例：無 左建外易 拼音：zuǒ jiàn wài yì釋義：用不正當的手段建立威權，變革法度。出處：《史記·商君列傳》今君又左建外易，非所以教也。”司馬貞索隱左建，謂以左道建立威權也；外易，謂在外革易君命也。”王伯祥注左謂失正，外謂失中，故事乖常理叫‘左道’，也叫‘外道’。示例：無 左鄰右里 拼音：zuǒ lín yòu lǐ釋義：泛指鄰居。出處：歐陽山《苦鬥》五十八左鄰右里的貧苦農民帶著紅糖、生薑、糯米……來探望她。”示例：無
讀取成語的方法
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
namespace Util.Controls
{
class IdiomsText
{
public static Lazy<Dictionary<string,string>> Idioms = new Lazy<Dictionary<string, string>>(GetIdioms);
public static Dictionary<string, string> GetIdioms()
{
var stream = Application.GetResourceStream(new Uri("/Util.Controls;component/Controls/Verify/成語大全.txt", UriKind.Relative))?.Stream;
if (stream == null) return new Dictionary<string,string> { };
Dictionary<string, string> dic = new Dictionary<string, string>();
using (var reader = new StreamReader(stream, System.Text.Encoding.Default))
{
string line;
// 從檔案讀取並顯示行，直到檔案的末尾
while ((line = reader.ReadLine()) != null)
{
line = line.Trim();
if (!string.IsNullOrEmpty(line))
{
try
{
dic.Add(line.Substring(0, line.IndexOf(" ")), line.IndexOf("釋義") >= 0 ? line.Substring(line.IndexOf("釋義")).Trim() : "");
}
catch
{
Console.WriteLine(line);
}
}
}
}
return dic;
}
}
}
另外這裡把釋義也讀取出來了，不然看字拼成語太難了，把他放在指引文字的tooltip上
控制元件使用方法
<util:DragVerify x:Name="verify5" Width="300" Height="300"> <i:Interaction.Triggers> <i:EventTrigger EventName="ResultChanged"> <i:InvokeCommandAction Command="{Binding ResultChangedComamnd}" CommandParameter="{Binding Path=Result,ElementName=verify5}"/> </i:EventTrigger> </i:Interaction.Triggers> </util:DragVerify>
下一節介紹推理拼圖