在 Win Phone Silverlight api 中，有一个 PhotoChooserTask 选择器，指定宽、高属性，在选择图片的时候，
可以进行裁切，代码：
PhotoChooserTask photoChooserTask = new PhotoChooserTask();
photoChooserTask.Completed += new EventHandler<PhotoResult>(photoChooserTask_Completed); // 设置 宽、高
photoChooserTask.PixelHeight = ;
photoChooserTask.PixelWidth = ;
photoChooserTask.ShowCamera = true;
photoChooserTask.Show();
在图片选择完成后，可以进行裁切：
这里模仿这个交互，在 Store app 实现类似的交互。
1、XAML 页面
1）首先放置两个 Image 控件，一个显示用户缩放、平移的手势操作，另一个显示截图完成后的结果：
<Image x:Name="img" Stretch="UniformToFill" ManipulationMode="All" ManipulationDelta="Image_ManipulationDelta" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<CompositeTransform x:Name="img_transform" CenterX="0" CenterY="0"/>
</Image.RenderTransform>
</Image> <Image x:Name="imgResult" Width="100" Height="100"/>
2）放置一个 Border 元素，他的边框为黑色透明，中间的宽、高固定为 200px，里面放一个 白色的 Border，作为取景框：
<!--屏幕遮罩 -->
<Border IsHitTestVisible="False" x:Name="borderMask" BorderThickness="135,268.3" Background="Transparent" BorderBrush="#55000000" >
<Border BorderThickness="1" BorderBrush="White"/>
</Border>
2、在 C# 页面
1）注册当前 Page 对象的 SizeChanged 事件，以当 Windows 的宽、高发生改变时，调整遮罩 和 图片的位置：
// 当页面布局发生改变时，动态调整遮罩的位置
this.SizeChanged += PhotoChooserPage_SizeChanged;
void PhotoChooserPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
InitMask();
} // 取景框的 宽、高，img 图片控件初始的最小宽、高要大于它
public double Img_w = 200; // 取景框大小 - 作为标准
Rect measureRect; void InitMask()
{
double w = Window.Current.Bounds.Width; double h = Window.Current.Bounds.Height; if (w > Img_w && h > Img_w)
{
// 左边距
double left = (w - Img_w) / 2; // 上边距
double top = (h - Img_w) / 2; // 取景框作为截图的标准
measureRect = new Rect(left, top, Img_w, Img_w); // 把 Border 的边框设置为黑色半透明，背景为 null，则实现取景框效果
borderMask.BorderThickness = new Thickness(left, top, left, top); borderMask.Width = w;
borderMask.Height = h; Canvas.SetLeft(img, left);
Canvas.SetTop(img, top); Canvas.SetLeft(imgResult, (w - imgResult.ActualWidth) / 2);
}
}
2）在 Image 控件的 Image_ManipulationDelta 事件中，调整当前 Image 的 拉伸、缩放：
// 缩放累加
double scale = 1.0; // 平移累加
double translate_x = ;
double translate_y = ; object o = ;
private void Image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
e.Handled = true; lock (o)
{
// 非惯性下
if (!e.IsInertial)
{
// x-y 屏幕坐标的更改
translate_x += e.Delta.Translation.X;
translate_y += e.Delta.Translation.Y; // 两指缩放更改
scale *= e.Delta.Scale; // 更改图片 CompositeTransform 对象
img_transform.TranslateX = translate_x;
img_transform.TranslateY = translate_y; img_transform.ScaleX = img_transform.ScaleY = scale; // 如果超出取景框，则撤销上面的修改
if (!IsValide())
{ translate_x -= e.Delta.Translation.X;
translate_y -= e.Delta.Translation.Y; scale /= e.Delta.Scale; img_transform.TranslateX = translate_x;
img_transform.TranslateY = translate_y; img_transform.ScaleX = img_transform.ScaleY = scale;
}
} }
}
3）计算当前的图片范围，并限制图片的大小、边框不能在取景框里面：
// 判断图片在遮罩的中间位置
bool IsValide()
{
Rect Temp = GetBounds(img, LayoutRoot); // 查找当前 Windows.Foundation.Rect 所表示的矩形和指定 Windows.Foundation.Rect 所表示的矩形的交集，并将结果存储为当前
// Windows.Foundation.Rect
Temp.Intersect(measureRect); if (Temp == measureRect)
{
return true;
} return false;
} // 获取 UIElement 在页面中的坐标和尺寸
public Rect GetBounds(FrameworkElement childElement, FrameworkElement parentElement)
{
// https://msdn.microsoft.com/en-us/library/system.windows.media.visual.transformtovisual%28v=vs.110%29.aspx
// https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.uielement.transformtovisual.aspx
GeneralTransform transform = childElement.TransformToVisual(parentElement); return transform.TransformBounds(new Rect(, , childElement.ActualWidth, childElement.ActualHeight));
}
4）当用户点击 ”裁切“ 按钮时， 使用 BitmapEncoder 对图像进行裁切：
private async void AppBarButton_Crop_Click(object sender, RoutedEventArgs e)
{
appBar.IsEnabled = false; try
{
StorageFile sourceFile = PickedFile;// await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFileAsync("Images\\test\\test.jpg"); if (PickedFile == null) return; using (var readStream = await sourceFile.OpenReadAsync())
{
var decoder = await BitmapDecoder.CreateAsync(readStream); //using (InMemoryRandomAccessStream writeStream = new InMemoryRandomAccessStream())
//{ if (WriteStream != null)
{
WriteStream.Dispose();
} WriteStream = new InMemoryRandomAccessStream(); BitmapEncoder encoder = await BitmapEncoder.CreateForTranscodingAsync(WriteStream, decoder); Rect temp = GetBounds(img, LayoutRoot); double scale_x = decoder.PixelWidth / temp.Width; encoder.BitmapTransform.Bounds = new BitmapBounds
{
X = (uint)Math.Round((measureRect.X - temp.X) * scale_x, ),
Y = (uint)Math.Round((measureRect.Y - temp.Y) * scale_x, ),
Width = (uint)Math.Round(measureRect.Width * scale_x, ),
Height = (uint)Math.Round(measureRect.Height * scale_x, )
}; await encoder.FlushAsync(); BitmapImage bi = new BitmapImage();
bi.SetSource(WriteStream);
imgResult.Source = bi; // 如果需要设置图片的固定宽、高，可以使用 WriteableBitmap 对象
//WriteableBitmap wb = new WriteableBitmap(120, 120);
//wb.SetSource(writeStream);
//imgResult.Source = wb; double size = WriteStream.Size / ( * 1024.0);
if (size > )
await (new MessageDialog(string.Format("图片大于 5MB（当前{0:0.0}MB),请重新选择"))).ShowAsync(); //}
}
}
catch (Exception ex)
{
(new MessageDialog("截图区域超出边界了:" + ex.Message)).ShowAsync();
} appBar.IsEnabled = true;
}
在 Windows 上的显示效果：
在手机上的显示效果：
Demo 的下载链接（win8.1+ wp8.1）
2015/9/1 更新
增加 PC 上的鼠标的滚轮事件，进行图片缩放。
在 xaml 页面，给 Canvas 增加一个 事件： PointerWheelChanged="LayoutRoot_PointerWheelChanged"
// 鼠标滚轮的缩、放
private void LayoutRoot_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
// Detect scroll is completed with PointerWheelChanged ： http://*.com/questions/13816352/detect-scroll-is-completed-with-pointerwheelchanged //var m = e.KeyModifiers; e.Handled = true; lock (o)
{
if (e.Pointer.PointerDeviceType == PointerDeviceType.Mouse)
{
PointerPoint mousePosition = e.GetCurrentPoint(sender as Canvas);
var delta = mousePosition.Properties.MouseWheelDelta; scale *= (delta > ? 1.1 : 0.9); img_transform.ScaleX = img_transform.ScaleY = scale; // 如果超出取景框，则撤销上面的修改
if (!IsValide())
{
scale /= (delta > ? 1.1 : 0.9); img_transform.ScaleX = img_transform.ScaleY = scale;
} Debug.WriteLine(delta);
}
}
}