Skip to content

sinathr/UI-Cropping-Image

 
 

Repository files navigation

UI-Cropping-Image

A simply UI cropping image library for WPF that use adroner layer. Some screenshots:

Installing

To install CroppingImageLibrary just execute the following command in your nuget CLI :

Install-Package CroppingImageLibrary -Version 1.0.1

Interface of sample app

Cropping result image

Cropping result image info

Main Workflow:

  1. Load image
  2. Select cropping area
  3. Crop and save image

Main features:

  • Can draw/redraw cropping rectangle
  • Can move cropping rectangle
  • Can resize cropping rectangle
  • Shadow area outside of cropping rectangle
  • Show current size of cropping rectangle

Basic Setup

XAML:

In order to properly handle image size, set SizeToContent ="WidthAndHeight" to window. There is a custom user control CropToolControl.xaml, that holds all necessary elements to handle crop operation. Just add this <croppingImageLibrary:CropToolControl Name="CropTool"></croppingImageLibrary:CropToolControl>

Here is a example in CroppingWindow.xaml

<Window x:Class="CroppingImageLibrary.SampleApp.CroppingWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:croppingImageLibrary="clr-namespace:CroppingImageLibrary;assembly=CroppingImageLibrary"
       mc:Ignorable="d"
       Title="CroppingWindow" ResizeMode="NoResize" WindowStartupLocation="Manual" SizeToContent ="WidthAndHeight">
   <croppingImageLibrary:CropToolControl Name="CropTool"></croppingImageLibrary:CropToolControl>
</Window>

Code Behind:
You need to pass image to user control, here is simple way describe in CroppingWindow.xaml.cs

   public partial class CroppingWindow : Window
   {
       public CroppingWindow()
       {
           InitializeComponent();
       }

       public CroppingWindow(BitmapImage bitmapImage)
       {
           InitializeComponent();
           //  pass data to custom user control
           CropTool.SetImage(bitmapImage);
       }
   }

This library return only crop area, not cropped image itself. You need to perform crop operation manually. To get crop area, call CropTool.CropService.GetCroppedArea()

Releases

No releases published

Packages

No packages published

Languages

  • C# 100.0%