[UWP]使用Picker构建应用内图片公共裁剪组件

 在上一篇博文《

如何实现的呢?

项目结构

我在HHChaosToolkit项目首页写过:

HHChaosToolkit是一套适用于MVVM框架下使用的弹窗层组件库。

HHChaosToolkit其中包含了Picker弹窗组件、SubWindows子窗口组件以及轻量级MVVM框架。我们在这个例子中使用到的是它的Picker以及MVVM部分。

ImageCropper则是这个例子中主要依赖的功能组件。

项目结构如下图:

Solution

其中包含了两个页面,ImageCropperPickerPage即是这个例子中我们要构建的图片公共裁剪组件,MainPage中包含了调用使用公共裁剪组件的示例,逻辑代码均在其对应的ViewModel中。

图片裁剪Picker

界面布局如下:

Copy
<Page x:Class="ImageCropperPicker.Views.ImageCropperPickerPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:cropper="using:ImageCropper.UWP" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="using:ImageCropperPicker.Views" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" DataContext="{Binding ImageCropperPickerViewModel, Source={StaticResource Locator}}" RequestedTheme="Dark" mc:Ignorable="d"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <cropper:ImageCropper x:Name="ImageCropper" Padding="80" AspectRatio="{Binding AspectRatio}" Background="Transparent" CircularCrop="{Binding CircularCrop}" Mask="#af000000" SourceImage="{Binding SourceImage}" /> <Grid Grid.Column="1" Background="#af000000"> <StackPanel Padding="55" VerticalAlignment="Center"> <AppBarButton Margin="0,15" Click="Button_Click" Icon="Accept" Label="OK" /> <AppB

50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信