WPF 实现图片切成九宫格控件~

WPF开发者QQ群： 340500857

由于微信群人数太多入群请添加小编微信号

yanjinhuawechat 或 W_Feng_aiQ 邀请入群

需备注WPF开发者

PS：有更好的方式欢迎推荐。

接着上一篇倒计时控件

—

代码如下

一、创建 CropControl.cs代码如下。

（修改RowColumn =“6” 或者“12” 甚至其他都能拆分原图为

多张小图）

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;namespace WPFDevelopers.Controls
{[TemplatePart(Name = UniformGridTemplateName, Type = typeof(UniformGrid))]public class CropControl: Control{private const string UniformGridTemplateName = "PART_UniformGrid";private UniformGrid _uniformGrid;public ImageSource ImageSource{get { return (ImageSource)GetValue(ImageSourceProperty); }set { SetValue(ImageSourceProperty, value); }}public static readonly DependencyProperty ImageSourceProperty =DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(CropControl), new PropertyMetadata(null));public int RowColumn{get { return (int)GetValue(RowColumnProperty); }set { SetValue(RowColumnProperty, value); }}public static readonly DependencyProperty RowColumnProperty =DependencyProperty.Register("RowColumn", typeof(int), typeof(CropControl), new PropertyMetadata(3));static CropControl(){DefaultStyleKeyProperty.OverrideMetadata(typeof(CropControl), new FrameworkPropertyMetadata(typeof(CropControl)));}public override void OnApplyTemplate(){base.OnApplyTemplate();_uniformGrid = GetTemplateChild(UniformGridTemplateName) as UniformGrid;if (ImageSource == null || _uniformGrid == null) return;BitmapSource imgSource = (BitmapSource)ImageSource;int w = 0, h = 0;if (!imgSource.PixelWidth.Equals(0)&&!imgSource.PixelHeight.Equals(0)){w = imgSource.PixelWidth / RowColumn;h = (int)imgSource.PixelHeight / RowColumn;_uniformGrid.Width = imgSource.PixelWidth;_uniformGrid.Height = imgSource.PixelHeight;}for (int i = 0; i < RowColumn; i++){for (int j = 0; j < RowColumn; j++){var rect = new Rectangle{Fill = new ImageBrush { ImageSource = new CroppedBitmap(imgSource, new Int32Rect(j * w, i * h, w, h)) },StrokeThickness = .5,Stroke = Brushes.White,Cursor = Cursors.Hand};rect.RenderTransformOrigin = new Point(.5, .5);rect.RenderTransform = new ScaleTransform();rect.MouseMove += (sender, ex) =>{var rect1 = sender as Rectangle;Panel.SetZIndex(rect1, 1);var doubleAnimation = new DoubleAnimation{To = 2,Duration = TimeSpan.FromMilliseconds(100),};var scaleTransform = rect1.RenderTransform as ScaleTransform;scaleTransform.BeginAnimation(ScaleTransform.ScaleXProperty, doubleAnimation);scaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty, doubleAnimation);};rect.MouseLeave += (sender, ex) =>{var rect1 = sender as Rectangle;Panel.SetZIndex(rect1, 0);var scaleTransform = rect1.RenderTransform as ScaleTransform;var doubleAnimation = new DoubleAnimation{To = 1,Duration = TimeSpan.FromMilliseconds(100)};scaleTransform.BeginAnimation(ScaleTransform.ScaleXProperty, doubleAnimation);scaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty, doubleAnimation);};_uniformGrid.Children.Add(rect);}}}}
}

二、CropControl.xaml 代码如下

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:controls="clr-namespace:WPFDevelopers.Controls"><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="Basic/ControlBasic.xaml"/><ResourceDictionary Source="Basic/Animations.xaml"/></ResourceDictionary.MergedDictionaries><Style TargetType="{x:Type controls:CropControl}" BasedOn="{StaticResource ControlBasicStyle}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type controls:CropControl}"><UniformGrid Rows="{TemplateBinding RowColumn}" Columns="{TemplateBinding RowColumn}"x:Name="PART_UniformGrid"/></ControlTemplate></Setter.Value></Setter></Style></ResourceDictionary>

三、CropControlExample.xaml 代码如下

<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.CropControlExample"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:WPFDevelopers.Samples.ExampleViews"xmlns:wpfdev="https://github.com/yanjinhuagood/WPFDevelopers"mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"><Grid><wpfdev:CropControl ImageSource="pack://application:,,,/WPFDevelopers.Samples;component/Images/Crop/0.jpg"/></Grid>
</UserControl>

—

效果预览

鸣谢素材提供者 - 关关(代强)

源码地址如下

Github：https://github.com/WPFDevelopersOrg

Gitee：https://gitee.com/WPFDevelopersOrg

WPF开发者QQ群： 340500857

Github：https://github.com/WPFDevelopersOrg

出处：https://www.cnblogs.com/yanjinhua

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

转载请著名作者出处 https://github.com/WPFDevelopersOrg