原文: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="0"/><Setter Property="BorderThickness" Value="0"/><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="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar"><DiscreteObjectKeyFrame KeyTime="0"><DiscreteObjectKeyFrame.Value><ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames><ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar"><DiscreteObjectKeyFrame KeyTime="0"><DiscreteObjectKeyFrame.Value><ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames></Storyboard></VisualState><VisualState x:Name="MouseIndicator"><Storyboard><FadeInThemeAnimation TargetName="ScrollBarSeparator"/><ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar"><DiscreteObjectKeyFrame KeyTime="0"><DiscreteObjectKeyFrame.Value><ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames><ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar"><DiscreteObjectKeyFrame KeyTime="0"><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="2" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" Grid.RowSpan="2"/><ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" 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="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/><Border x:Name="ScrollBarSeparator" Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" Grid.Column="1" Grid.Row="1"/><Canvas x:Name="CropSelectionCanvas" Grid.ColumnSpan="2" 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="1"><Path.Data><RectangleGeometry Rect="{Binding SelectedRect}"/></Path.Data></Path><Rectangle x:Name="horizontalLine" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding HorizontalLineCanvasTop}" Height="1" Width="{Binding SelectedRect.Width}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/><Rectangle x:Name="verticalLine" Canvas.Left="{Binding VerticalLineCanvasLeft}" Canvas.Top="{Binding SelectedRect.Top}" Width="1" Height="{Binding SelectedRect.Height}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/><Rectangle x:Name="horizontalLine1" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding HorizontalLine1CanvasTop}" Height="1" Width="{Binding SelectedRect.Width}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/><Rectangle x:Name="verticalLine1" Canvas.Left="{Binding VerticalLine1CanvasLeft}" Canvas.Top="{Binding SelectedRect.Top}" Width="1" 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="30"/><Setter Property="Width" Value="30"/><Setter Property="Fill" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}"/><Setter Property="Stroke" Value="{ThemeResource ApplicationForegroundThemeBrush}"/><Setter Property="StrokeThickness" Value="1"/><Setter Property="RenderTransform"><Setter.Value><CompositeTransform TranslateX="-15" TranslateY="-15" /></Setter.Value></Setter></Style></Grid.Resources><Image x:Name="sourceImage" Visibility="Visible" Opacity="0"/><Canvas x:Name="imageCanvas" HorizontalAlignment="Stretch" IsHitTestVisible="{Binding CropSelectionVisibility,Converter={StaticResource InversedBooleanToVisibilityConverter}}" VerticalAlignment="Stretch"><ScrollViewer x:Name="scrollViewer" MinZoomFactor="1" MaxZoomFactor="2" 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> View Code

可以看到我把蒙版加到了ScrollViewer的模板里面。這樣就不會阻止一些事件了。

需要的朋友可以在這里下載代碼。

有啥問題，或者更好的想法可以跟我講，大家一起進步。

放假幾天有空把另外2個控件也寫了。先放圖給大家see see。

VirtualizedVariableSizedGridView 主要給平板，PC寫的，phone上面跟ListView一樣。

?

DataGrid, Touch模式支持下拉刷新，行列鎖定，sort等功能

?

總結

以上是生活随笔為你收集整理的UWP 图片剪切旋转工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。