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

Posted 2022-02-09 dotNET跨平台

WPF开发者QQ群： 340500857

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

 yanjinhuawechat 或 W_Feng_aiQ 邀请入群

 需备注WPF开发者 

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

  接着上一篇倒计时控件

01

—

代码如下

一、创建 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>

02

—

效果预览

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

源码地址如下

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

扫一扫关注我们，

更多知识早知道！

点击阅读原文可跳转至源代码