Being able to crop an image entirely on the client is extremely useful. With C1Bitmap or the WriteableBitmap class, this is achievable in your Windows Store applications. The C1Bitmap component provides an API that is easier to work with when doing any bitmap related manipulation. This is primarily because it can get and set simple colors and it gives more direct access to pixels with the GetPixel and SetPixel methods.
Here is the XAML that defines the elements needed to create our crop area. To create the crop area, we'll create an image mask in XAML through adding <Grid> elements to the XAML markup and apply it to the image based on user selection in the code behind.
| Markup |
Copy Code
|
|---|---|
<UserControl.Resources>
<SolidColorBrush Color="#66FFFFFF" x:Key="MaskBrush" />
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Name="imageGrid" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Stretch="None" Name="image" Grid.RowSpan="3" Grid.ColumnSpan="3" />
<Grid Name="topMask" Grid.ColumnSpan="2" Background="{StaticResource MaskBrush}" />
<Grid Name="bottomMask" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2" Background="{StaticResource MaskBrush}" />
<Grid Name="leftMask" Grid.RowSpan="2" Grid.Row="1" Background="{StaticResource MaskBrush}" />
<Grid Name="rightMask" Grid.Column="2" Grid.RowSpan="2" Background="{StaticResource MaskBrush}" />
</Grid>
</Grid>
|
|
The code below implements the cropping effect for your image. It uses the OnDragStarted and OnDragDelta events to capture the horizontal and vertical changes as a user chooses the section of the image to crop. The code also uses some math to get the values of the start and end points and to convert the points into a Rect object.
| C# |
Copy Code
|
|---|---|
Point _startPosition;
void OnDragStarted(object sender, C1DragStartedEventArgs e)
{
_startPosition = e.GetPosition(null);
}
void OnDragDelta(object sender, C1DragDeltaEventArgs e)
{
var transform = Window.Current.Content.TransformToVisual(image);
var start = transform.TransformPoint(_startPosition);
var end = transform.TransformPoint(e.GetPosition(null));
start.X = Math.Min((double)Math.Max(start.X, 0), bitmap.Width);
end.X = Math.Min((double)Math.Max(end.X, 0), bitmap.Width);
start.Y = Math.Min((double)Math.Max(start.Y, 0), bitmap.Height);
end.Y = Math.Min((double)Math.Max(end.Y, 0), bitmap.Height);
selection = new Rect(new Point(
Math.Round(Convert.ToDouble(Math.Min(start.X, end.X))),
Math.Round(Convert.ToDouble(Math.Min(start.Y, end.Y)))),
new Size(Convert.ToDouble(Math.Round(Math.Abs(start.X - end.X))),
Convert.ToDouble(Math.Round(Math.Abs(start.Y - end.Y)))));
UpdateMask();
}
|
|
We apply some logic for the bounds of each portion of the mask.
| C# |
Copy Code
|
|---|---|
void UpdateMask()
{
topMask.Height = selection.Top;
bottomMask.Height = bitmap.Height - selection.Bottom;
leftMask.Width = selection.Left;
rightMask.Width = bitmap.Width - selection.Right;
}
|
|
The UpdateMask() method updates the position of all the Grid mask elements based on the Left, Top, Width and Height properties of the Grid Rect.
| C# |
Copy Code
|
|---|---|
void UpdateMask()
{
topMask.Height = selection.Top;
bottomMask.Height = bitmap.Height - selection.Bottom;
leftMask.Width = selection.Left;
rightMask.Width = bitmap.Width - selection.Right;
}
|
|
