UWP 图片剪切旋转工具
好久没撸随笔了，明天终于放假休息了。。准备去进行信仰充值，看《魔兽》去（话说surface phone 好久出，让我这个做UWP的也充点信仰。。）
先上下效果图：
在设计中，遇到一个问题，就是如果添加了剪切蒙版之后会挡住后面的ScrollViewer里面的Image，一些事件将无法监听。
后面想了个办法，把ScrollViewer的模板给修改了。
开源有益，先上代码
下面是Theme
<Style x:Key="ImageToolScrollViewerStyle" TargetType="ScrollViewer">
<Setter Property="HorizontalScrollMode" Value="Enabled"/>
<Setter Property="VerticalScrollMode" Value="Enabled"/>
<!--<Setter Property="IsHorizontalRailEnabled" Value="False"/>
<Setter Property="IsVerticalRailEnabled" Value="False"/>-->
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="ZoomMode" Value="Enabled"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalScrollBarVisibility" Value="Hidden"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Hidden"/>
<Setter Property="Padding" Value=""/>
<Setter Property="BorderThickness" Value=""/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollingIndicatorStates">
<VisualStateGroup.Transitions>
<VisualTransition From="MouseIndicator" To="NoIndicator">
<Storyboard>
<FadeOutThemeAnimation BeginTime="0:0:3" TargetName="ScrollBarSeparator"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
<DiscreteObjectKeyFrame KeyTime="0:0:3">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>None</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
<DiscreteObjectKeyFrame KeyTime="0:0:3">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>None</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="TouchIndicator" To="NoIndicator">
<Storyboard>
<FadeOutThemeAnimation TargetName="ScrollBarSeparator"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>None</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>None</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="NoIndicator">
<Storyboard>
<FadeOutThemeAnimation TargetName="ScrollBarSeparator"/>
</Storyboard>
</VisualState>
<VisualState x:Name="TouchIndicator">
<Storyboard>
<FadeOutThemeAnimation TargetName="ScrollBarSeparator"/>
<ObjectAnimationUsingKeyFrames Duration="" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
<DiscreteObjectKeyFrame KeyTime="">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
<DiscreteObjectKeyFrame KeyTime="">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseIndicator">
<Storyboard>
<FadeInThemeAnimation TargetName="ScrollBarSeparator"/>
<ObjectAnimationUsingKeyFrames Duration="" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
<DiscreteObjectKeyFrame KeyTime="">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
<DiscreteObjectKeyFrame KeyTime="">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollContentPresenter x:Name="ScrollContentPresenter" Grid.ColumnSpan="" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" Grid.RowSpan=""/>
<ScrollBar x:Name="VerticalScrollBar" Grid.Column="" HorizontalAlignment="Right" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}"/>
<ScrollBar x:Name="HorizontalScrollBar" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Grid.Row="" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/>
<Border x:Name="ScrollBarSeparator" Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" Grid.Column="" Grid.Row=""/>
<Canvas x:Name="CropSelectionCanvas" Grid.ColumnSpan="" Visibility="{Binding CropSelectionVisibility}">
<Path x:Name="nonselectRegion" Fill="#88FFFFFF" >
<Path.Data>
<GeometryGroup>
<RectangleGeometry Rect="{Binding OuterRect}">
</RectangleGeometry>
<RectangleGeometry Rect="{Binding SelectedRect}">
</RectangleGeometry>
</GeometryGroup>
</Path.Data>
</Path>
<Path x:Name="selectRegion" Fill="Transparent" Stroke="{ThemeResource ApplicationForegroundThemeBrush}" StrokeThickness="">
<Path.Data>
<RectangleGeometry Rect="{Binding SelectedRect}"/>
</Path.Data>
</Path>
<Rectangle x:Name="horizontalLine" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding HorizontalLineCanvasTop}" Height="" Width="{Binding SelectedRect.Width}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>
<Rectangle x:Name="verticalLine" Canvas.Left="{Binding VerticalLineCanvasLeft}" Canvas.Top="{Binding SelectedRect.Top}" Width="" Height="{Binding SelectedRect.Height}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>
<Rectangle x:Name="horizontalLine1" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding HorizontalLine1CanvasTop}" Height="" Width="{Binding SelectedRect.Width}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>
<Rectangle x:Name="verticalLine1" Canvas.Left="{Binding VerticalLine1CanvasLeft}" Canvas.Top="{Binding SelectedRect.Top}" Width="" Height="{Binding SelectedRect.Height}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>
</Canvas>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> <Style TargetType="local:ImageTool">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:ImageTool">
<Grid >
<Grid.Resources>
<Style TargetType="Ellipse">
<Setter Property="Height" Value=""/>
<Setter Property="Width" Value=""/>
<Setter Property="Fill" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
<Setter Property="Stroke" Value="{ThemeResource ApplicationForegroundThemeBrush}"/>
<Setter Property="StrokeThickness" Value=""/>
<Setter Property="RenderTransform">
<Setter.Value>
<CompositeTransform TranslateX="-15" TranslateY="-15" />
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Image x:Name="sourceImage" Visibility="Visible" Opacity=""/>
<Canvas x:Name="imageCanvas" HorizontalAlignment="Stretch" IsHitTestVisible="{Binding CropSelectionVisibility,Converter={StaticResource InversedBooleanToVisibilityConverter}}" VerticalAlignment="Stretch">
<ScrollViewer x:Name="scrollViewer" MinZoomFactor="" MaxZoomFactor="" Style="{StaticResource ImageToolScrollViewerStyle}">
<Grid x:Name="imageGrid" >
<Image x:Name="editImage" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ScrollViewer>
<Ellipse x:Name="topLeftThumb" Visibility="{Binding CropSelectionVisibility}" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding SelectedRect.Top}"/>
<Ellipse x:Name="topRightThumb" Visibility="{Binding CropSelectionVisibility}" Canvas.Left="{Binding SelectedRect.Right}" Canvas.Top="{Binding SelectedRect.Top}"/>
<Ellipse x:Name="bottomLeftThumb" Visibility="{Binding CropSelectionVisibility}" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding SelectedRect.Bottom}"/>
<Ellipse x:Name="bottomRightThumb" Visibility="{Binding CropSelectionVisibility}" Canvas.Left="{Binding SelectedRect.Right}" Canvas.Top="{Binding SelectedRect.Bottom}"/>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
可以看到我把蒙版加到了ScrollViewer的模板里面。这样就不会阻止一些事件了。
需要的朋友可以在这里下载代码。
有啥问题，或者更好的想法可以跟我讲，大家一起进步。
放假几天有空把另外2个控件也写了。先放图给大家see see。
VirtualizedVariableSizedGridView 主要给平板，PC写的，phone上面跟ListView一样。
DataGrid, Touch模式支持下拉刷新，行列锁定，sort等功能
UWP 图片剪切旋转工具的更多相关文章
- AJ学IOS（32）UI之Quartz2D矩阵操作和图片剪切
AJ分享,必须精品 矩阵操作 矩阵操作:(旋转,缩放,平移) 通过矩阵操作,把画出来的东西进行形变 旋转操作 方法:CGContextRotateCTM(<#CGContextRef c#> ...
- PHP 图片上传工具类（支持多文件上传）
====================ImageUploadTool======================== <?php class ImageUploadTool { private ...
- css3相册图片3D旋转展示特效
查看效果:http://hovertree.com/texiao/css/14/ 本效果用css3的animation实现动画 定义和用法animation 属性是一个简写属性,用于设置六个动画属性: ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- windows phone 摄像头得到图片是旋转90°
我上个随笔讲到,windows phone 拍出来的photo如果直接使用是反转了90°的. 研究了很久..终于发现问题.其实..这是使用习惯问题... CameraCaptureUI 得到的phot ...
- js图片左右旋转
图片显示 <p> <a href="images/example2.jpg" rel="lightbox-group" title=" ...
- iOS开发UI篇—Quartz2D使用（图片剪切）
iOS开发UI篇—Quartz2D使用(图片剪切) 一.使用Quartz2D完成图片剪切 1.把图片显示在自定义的view中 先把图片绘制到view上.按照原始大小,把图片绘制到一个点上. 代码: - ...
- 【iOS】Quartz2D图片剪切
一.使用Quartz2D完成图片剪切1.把图片显示在自定义的view中 先把图片绘制到view上.按照原始大小,把图片绘制到一个点上. 代码: - (void)drawRect:(CGRect)rec ...
- 制作3D图片立方体旋转特效
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...
随机推荐
- python基于Django框架编译报错“django.core.exceptions.ImproperlyConfigured”的解决办法？
下面是我具体遇到的问题和解决方法: 错误详细信息: django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_IND ...
- VMware 虚拟上网的的三种模式 ——bridged、host-only、NAT 模式
恐怕这是今年在上海的最后的一篇博客了,同事们上班都不工作了,我也没有什么事情要做.为什么要写这篇博客呢,原因是我回家要带上自己的笔记本,里面装了一个虚拟机.平时自己的学习和工作都是在虚拟机里进行的.回 ...
- CSS3学习（圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等）
matrix CSS3 1. 圆角 border-radius:边框圆角的圆角半径 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值:第一个值为左上角, 第二 ...
- Node.js入门笔记（4）：文件系统（fs）
文件系统(FileSystem) 文件系统模块 对于文件无外乎创建修改添加. File System - 文件系统模块 - require('fs') fs模块是核心模块,需要使用require导入后 ...
- C# 4.0 之线程安全集合篇
资料:http://www.cnblogs.com/chengxiaohui/articles/5672768.html
- DataTable数据检索的性能分析（转寒江独钓)
我们知道在.NET平台上有很多种数据存储,检索解决方案-ADO.NET Entity Framework,ASP.NET Dynamic Data,XML, NHibernate,LINQ to SQ ...
- [linux]Socket编程的头文件
socket编程中需要用到的头文件 sys/types.h:数据类型定义 sys/socket.h:提供socket函数及数据结构 netinet/in.h:定义数据结构sockaddr_in arp ...
- 【bzoj4720】[NOIP2016]换教室
题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程.在可以选择的课程中,有2n节课程安排在n个时间段上.在第i(1≤i≤n)个时间段上,两节内容相同的课程同时在不同的 ...
- 升级到 PHP-7 遇到的坑 及 经验分享
注意:上面这张图是QQ群网友分享的,图中提到的“被移除的函数”,call_user_func 和 call_user_func_array 在 PHP-7.0 的正式版中是可用的,也许是当时的 测试版 ...
- jQuery-H5-css3转盘抽奖-遁地龙卷风
(-1)写在前面 这个idea不是我的,首先向这位前辈致敬. 我用的是chrome49, jquery3.0. 完整的程序案例在我的百度云盘http://pan.baidu.com/s/1jI2QSn ...