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 ...

随机推荐

WIN10 CMD 启动虚拟WIFI
1.以管理员身份运行命令提示符: 快捷键win+R→输入cmd→回车 2.启用并设定虚拟WiFi网卡: 运行命令:netsh wlan set hostednetwork mode=allow ssi ...
A Quick Introduction to Linux Policy Routing
A Quick Introduction to Linux Policy Routing 29 May 2013 In this post, I’m going to introduce you to ...
web前端历史的总结
1.早期的前后一体,前端和后端是一个整体. 2.早期的后端mvc概念,前端只是后端mvc里面的视图层 (laravel就是mvc) 3.ajax技术改变了一切 2004年 Gmail 2005Goog ...
OPenCL
OpenCLhttp://baike.baidu.com/link?url=7uHWCVUYB3Sau_xh3OOKP-A08_IvmT1SJixdAXKezCuCfkzeSQDiSmesGyVGk8 ...
UnknownHandler
未知处理器从struts2.1 开始 ,struts2配置文件的DTD中增加了<unknown-handler-stack…/>和<unknown-handler-ref…/> ...
[Head First设计模式]面向对象的3特征5原则
系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...
scp命令详解
\ svn 删除所有的 .svn文件 find . -name .svn -type d -exec rm -fr {} \; linux之cp/scp命令+scp命令详解名称:cp 使用权限: ...
BZOJ2435——[Noi2011]道路修建
1.题意:给个树,边的权值=两边的点数差*此边的长度,求所有边的权值和 2.分析:真不想说啥了...dfs即可 #include <cmath> #include <cstdio&g ...
《C++ 101条建议》学习笔记——第一章快速入门
1.C++程序组成:a.编译指示,由#开始,不由分号结束.只是影响编译过程.b.声明语句,影响编译过程,编译结果中并不会生成对应的指令.只是告诉编译器一些信息.c.可执行过程语句,生成对应的指令.包括 ...
php之获取程序源码的方法
文件hello.php和index.php在同一目录 hello.php <?php class hello{ public function __construct() { echo 'hel ...

UWP 图片剪切旋转工具

UWP 图片剪切旋转工具的更多相关文章

随机推荐

热门专题