Wpf登录验证方式(1)-滑动拼图的实现
AIStudio框架汇总及介绍
实现思路
1：一个背景图
2：一个拼图路径（里面用实色填充）覆盖在背景图上，偏移x。
3：另一个可以移动的拼图路径，初始偏移为0，里面用背景图片的偏移x填充。
4.一个滑动块，他的值变化与3中的路径偏移同步变化。
非常简单，对不对。
截图如下：
移动滑块后
好了，现在上代码
控件SliderVerify的XAML代码如下
<UserControl x:Class="Util.Controls.SliderVerify"
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>
<Style x:Key="SliderButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="false" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Grid Background="{TemplateBinding Background}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border BorderThickness="1" BorderBrush="{DynamicResource AccentColorBrush}">
<Grid x:Name="grid" Background="{TemplateBinding Background}" >
<Path x:Name="icon" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" Fill="{DynamicResource TextBrush}" Width="28" Height="28" Data="M1.125 -7.875A0.5625 0.5625 0 0 0 1.6875 -7.3125H14.954625L11.41425 -3.77325A0.5625 0.5625 0 0 0 12.21075 -2.97675L16.71075 -7.47675A0.5625 0.5625 0 0 0 16.71075 -8.27325L12.21075 -12.77325A0.5625 0.5625 0 0 0 11.41425 -11.97675L14.954625 -8.4375H1.6875A0.5625 0.5625 0 0 0 1.125 -7.875z"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="grid" Property="Background" Value="{DynamicResource AccentColorBrush}"/>
<Setter TargetName="icon" Property="Fill" Value="{DynamicResource WhiteBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderTickBarStyle" TargetType="TickBar">
<Setter Property="Fill" Value="{DynamicResource SliderThumbDisabled}" />
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<Trigger Property="Placement" Value="Top">
<Setter Property="Height" Value="6" />
<Setter Property="Margin" Value="0 0 0 3" />
</Trigger>
<Trigger Property="Placement" Value="Bottom">
<Setter Property="Grid.Row" Value="2" />
<Setter Property="Height" Value="6" />
<Setter Property="Margin" Value="0 3 0 0" />
</Trigger>
<Trigger Property="Placement" Value="Left">
<Setter Property="Margin" Value="0 0 3 0" />
<Setter Property="Width" Value="6" />
</Trigger>
<Trigger Property="Placement" Value="Right">
<Setter Property="Grid.Column" Value="2" />
<Setter Property="Margin" Value="3 0 0 0" />
<Setter Property="Width" Value="6" />
</Trigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TickBar x:Name="TopTick"
Style="{StaticResource SliderTickBarStyle}"
Placement="Top" />
<Track x:Name="PART_Track" Grid.Row="1">
<Track.DecreaseRepeatButton>
<RepeatButton Height="{TemplateBinding Slider.Height}"
Style="{StaticResource SliderButtonStyle}"
BorderBrush="{TemplateBinding Slider.BorderBrush}"
BorderThickness="1,1,0,1"
Background="{TemplateBinding Slider.Foreground}"
Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<controls:MetroThumb x:Name="thumb" Width="{TemplateBinding Slider.Height}"
Height="{TemplateBinding Slider.Height}"
Style="{StaticResource SliderThumbStyle}"
Background="{TemplateBinding Slider.Foreground}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Height="{TemplateBinding Slider.Height}"
Style="{StaticResource SliderButtonStyle}"
Background="{TemplateBinding Slider.Background}"
Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
<TickBar x:Name="BottomTick"
Style="{StaticResource SliderTickBarStyle}"
Placement="Bottom" />
<TextBlock x:Name="TxtTip" Text="向右拖动滑块填充拼图" Foreground="{DynamicResource TextBrush}" Grid.RowSpan="3" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="Collapsed"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="Slider.Value" Value="0">
<Setter TargetName="TxtTip" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="VerifySlider" TargetType="{x:Type Slider}">
<Setter Property="Foreground" Value="{DynamicResource AccentColorBrush4}" />
<Setter Property="Background" Value="{DynamicResource SliderTrackNormal}" />
<Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}" />
<Setter Property="Maximum" Value="100" />
<Setter Property="Minimum" Value="0" />
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="Value" Value="0" />
<Setter Property="Height" Value="12" />
<Setter Property="MinHeight" Value="12" />
<Setter Property="Template" Value="{StaticResource HorizontalSlider}" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{DynamicResource SliderTrackDisabled}" />
<Setter Property="BorderBrush" Value="{DynamicResource SliderThumbDisabled}" />
<Setter Property="Foreground" Value="{DynamicResource SliderValueDisabled}" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Canvas x:Name="myCanvas">
<Path x:Name="pathfix" Data="{StaticResource PuzzlePieceGeometry}" Fill="{DynamicResource AccentColorBrush}" Stroke="{DynamicResource AccentColorBrush}" SnapsToDevicePixels="True" Stretch="Uniform" Width="48" Height="48" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Path x:Name="path" Data="{StaticResource PuzzlePieceGeometry}" Stroke="{DynamicResource AccentColorBrush}" SnapsToDevicePixels="True" Stretch="Uniform" Width="48" Height="48" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Canvas>
<Slider x:Name="slider" Height="40" Grid.Row="1" Style="{StaticResource VerifySlider}" Thumb.DragCompleted="Slider_DragCompleted"></Slider>
</Grid>
</UserControl>
cs代码如下：
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
{
public delegate void ResultChangedEventHandler(object sender, RoutedEventArgs e);
/// <summary>
/// SliderVerify.xaml 的交互逻辑
/// </summary>
public partial class SliderVerify : UserControl
{
public SliderVerify()
{
InitializeComponent();
this.Loaded += SliderVerify_Loaded;
}
public string ImageUri
{
get { return (string)GetValue(ImageUriProperty); }
set { SetValue(ImageUriProperty, value); }
}
public static readonly DependencyProperty ImageUriProperty =
DependencyProperty.Register("ImageUri", typeof(string), typeof(SliderVerify), new PropertyMetadata(null, (p, d) =>
{
(p as SliderVerify).Restart();
}));
public bool Result
{
get { return (bool)GetValue(ResultProperty); }
set { SetValue(ResultProperty, value); }
}
public static readonly DependencyProperty ResultProperty =
DependencyProperty.Register("Result", typeof(bool), typeof(SliderVerify), new PropertyMetadata(false));
#region Routed Event
public static readonly RoutedEvent ResultChangedEvent = EventManager.RegisterRoutedEvent("ResultChanged", RoutingStrategy.Bubble, typeof(ResultChangedEventHandler), typeof(SliderVerify));
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 double _width = 48;
private async void Slider_DragCompleted(object sender, System.Windows.Controls.Primitives.DragCompletedEventArgs e)
{
var thumb = slider.Template.FindName("thumb", this.slider) as Thumb;
Path icon = thumb.Template.FindName("icon", thumb) as Path;
var data = icon.Data;
var fill = icon.Fill;
if (Math.Abs(Canvas.GetLeft(path) - Canvas.GetLeft(pathfix)) <= 1)
{
icon.Fill = Brushes.Green;
string sData = "M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z";
var converter = TypeDescriptor.GetConverter(typeof(Geometry));
icon.Data = (Geometry)converter.ConvertFrom(sData);
Result = true;
RaiseResultChanged(Result);
}
else
{
icon.Fill = Brushes.Red;
string sData = "M5.22675 -4.10175A0.5625 0.5625 0 0 0 6.02325 -4.10175L9 -7.079625L11.97675 -4.10175A0.5625 0.5625 0 0 0 12.77325 -4.89825L9.795375 -7.875L12.77325 -10.85175A0.5625 0.5625 0 0 0 11.97675 -11.64825L9 -8.670375L6.02325 -11.64825A0.5625 0.5625 0 0 0 5.22675 -10.85175L8.204625 -7.875L5.22675 -4.89825A0.5625 0.5625 0 0 0 5.22675 -4.10175z";
var converter = TypeDescriptor.GetConverter(typeof(Geometry));
icon.Data = (Geometry)converter.ConvertFrom(sData);
RaiseResultChanged(Result);
}
await Task.Delay(2000);
icon.Fill = fill;
icon.Data = data;
Restart();
}
private void SliderVerify_Loaded(object sender, RoutedEventArgs e)
{
Restart();
}
private void Restart()
{
Result = false;
Random ran = new Random();
double value = ran.Next((int)(myCanvas.ActualWidth - _width) / 3, (int)(myCanvas.ActualWidth - _width));
SetVerCenter(pathfix);
SetHorLeft(pathfix, value);
BitmapImage image = GetBitmapImage();
SetBackground(image);
SetVerCenter(path);
SetFill(path, image, value);
slider.Value = 0;
slider.Maximum = this.myCanvas.ActualWidth - _width;
slider.ValueChanged -= Slider_ValueChanged;
slider.ValueChanged += Slider_ValueChanged;
}
private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
SetHorLeft(path, slider.Value);
}
private BitmapImage GetBitmapImage()
{
//BitmapImage image = new BitmapImage(new Uri("pack://application:,,,/Util.Controls;component/Resources/1.jpg"));
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 SetFill(Shape element, BitmapImage image, double value)
{
ImageBrush ib = new ImageBrush();
ib.AlignmentX = AlignmentX.Left;
ib.AlignmentY = AlignmentY.Top;
ib.ImageSource = image;
ib.Viewbox = new Rect(value, (myCanvas.ActualHeight - path.ActualHeight) / 2, myCanvas.ActualWidth, path.ActualHeight);
ib.ViewboxUnits = BrushMappingMode.Absolute; //按百分比设置宽高
ib.TileMode = TileMode.None; //按百分比应该不会出现 image小于要切的值的情况
ib.Stretch = Stretch.None;
element.Fill = ib;
}
private void SetVerCenter(FrameworkElement element)
{
double top = (myCanvas.ActualHeight - element.ActualHeight) / 2;
Canvas.SetTop(element, top);
}
private void SetHorLeft(FrameworkElement element, double left)
{
Canvas.SetLeft(element, left);
}
}
}
使用起来也非常方便
<util:SliderVerify x:Name="verify" Width="300" Height="300"> <i:Interaction.Triggers> <i:EventTrigger EventName="ResultChanged"> <i:InvokeCommandAction Command="{Binding ResultChangedComamnd}" CommandParameter="{Binding Path=Result,ElementName=verify}"/> </i:EventTrigger> </i:Interaction.Triggers> </util:SliderVerify>
暂时没有上传源码地址，有需要我再上传。
接下来我们还可以做文字点选，图标点选，敬请期待。
