Wpf Image Viewer, supports mouse scrolling, drag, and drop, and wpf Scaling

Wpf Image Viewer, supports mouse scrolling, drag, and drop, and wpf Scaling

Recently, we need to use an image viewer. Similar to the image Viewer that comes with windows, you can scroll the mouse to zoom in or out, and drag and drop the image. So we wrote this simple image viewer.

Front-end code:

<Window x: Class = "PictureViewer. MainWindow" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "AllowDrop =" True "Title =" Image Viewer "Height =" 350 "Width =" 525 "Loaded =" Window_Loaded "SizeChanged =" Window_SizeChanged "DragEnter =" Window_DragEnter "Drop =" window_Drop "> <Grid x: name = "mainGrid"> <Grid. resources> <TransformGroup x: key = "TfGroup"> <ScaleTransform ScaleX = "1" ScaleY = "1"/> <TranslateTransform X = "0" Y = "0"/> </TransformGroup> </ grid. resources> <Grid. rowDefinitions> <RowDefinition Height = "50"> </RowDefinition> <RowDefinition Height = "*"> </RowDefinition> </Grid. rowDefinitions> <Button Grid. row = "0" Width = "50" Height = "30" Cursor = "Hand" Background = "Transparent" BorderThickness = "0" Content = "open image" Click = "OpenImg_Click "x: name = "OpenImg" HorizontalAlignment = "Left" VerticalAlignment = "Center" Margin = "20, 0,"/> <Label Content = "zoom multiple: "HorizontalAlignment =" Left "VerticalAlignment =" Center "Margin =", 0, "/> <TextBox x: name = "txtMinSize" Width = "40" Height = "30" VerticalContentAlignment = "Center" HorizontalAlignment = "Left" verticalignment = "Center" Margin = "200,0, 0.1 "TextChanged =" txtMinSize_TextChanged "Text =" "/> <Label Content =" -- "HorizontalAlignment =" Left "verticalignment =" Center "Margin =" ,2400, 0, 0 "/> <TextBox x: name = "txtMaxSize" Width = "40" Height = "30" VerticalContentAlignment = "Center" HorizontalAlignment = "Left" verticalignment = "Center" Margin = "260,0, 0, 0 "TextChanged =" txtMaxSize_TextChanged "Text =" 3 "/> <ScrollViewer x: name = "mainScrollv" HorizontalAlignment = "Center" verticalignment = "Center" placement = "Disabled" placement = "Disabled" Cursor = "SizeAll" Margin = "0" Focusable = "False" grid. row = "1"> <ContentControl MouseLeftButtonDown = "align" align = "align" MouseMove = "ContentControl_MouseMove" MouseWheel = "ContentControl_MouseWheel" align = "Center" verticalignment = "Center"> <image x: name = "IMG" Margin = "0" RenderTransform = "{StaticResource TfGroup}" RenderOptions. bitmapScalingMode = "NearestNeighbor"/> </ContentControl> </ScrollViewer> </Grid> </Window>

 

Code parsing:

Define a TransformGroup, bind the Key to the image control, and use ScaleTransform to zoom in and out (scaleX is a scaling multiple in the horizontal direction, which is doubled by default, that is, no scaling, scaleY), TranslateTransform implements translation (move the mouse, X is the horizontal offset, and Y is the vertical offset ).

In addition, you can place an image control through a ContentControl Control and bind various events (move the mouse down, lift, drag, and scroll) to the control. The RenderOptions of the image control. bitmapscalingMode = "NearestNeighbor" attribute is used to optimize the image conversion process and prevent image movement or scaling blur.

Background code:

Using System; using System. collections. generic; using System. linq; using System. text; using System. windows; using System. windows. controls; using System. windows. data; using System. windows. documents; using System. windows. input; using System. windows. media; using System. windows. media. imaging; using System. windows. navigation; using System. windows. shapes; namespace PictureViewer {// <summary> // MainWindow. interaction with xaml Logic /// </summary> public partial class MainWindow: Window {public MainWindow () {InitializeComponent ();} private bool mouseDown; private Point mouseXY; private double min = 0.1, max = 3.0; // minimum/maximum magnification private void Domousemove (ContentControl img, MouseEventArgs e) {if (e. leftButton! = MouseButtonState. pressed) {return;} var group = IMG. findResource ("TfGroup") as TransformGroup; var transform = group. children [1] as TranslateTransform; var position = e. getPosition (img); transform. x-= mouseXY. x-position. x; transform. y-= mouseXY. y-position. y; mouseXY = position;} private void DowheelZoom (TransformGroup group, Point point, double delta) {var pointToContent = group. inverse. transform (point); var transform = group. children [0] as ScaleTransform; if (transform. scaleX + delta <min) return; if (transform. scaleX + delta> max) return; transform. scaleX + = delta; transform. scaleY + = delta; var transform1 = group. children [1] as TranslateTransform; transform1.X =-1 * (pointToContent. X * transform. scaleX)-point. x); transform1.Y =-1 * (pointToContent. Y * transform. scaleY)-point. y);} private void ContentControl_MouseLeftButtonDown (object sender, MouseButtonEventArgs e) {var img = sender as ContentControl; if (img = null) {return;} img. captureMouse (); mouseDown = true; mouseXY = e. getPosition (img);} private void ContentControl_MouseLeftButtonUp (object sender, MouseButtonEventArgs e) {var img = sender as ContentControl; if (img = null) {return;} img. releaseMouseCapture (); mouseDown = false;} private void ContentControl_MouseMove (object sender, MouseEventArgs e) {var img = sender as ContentControl; if (img = null) {return ;} if (mouseDown) {Domousemove (img, e) ;}} private void ContentControl_MouseWheel (object sender, MouseWheelEventArgs e) {var img = sender as ContentControl; if (img = null) {return;} var point = e. getPosition (img); var group = IMG. findResource ("TfGroup") as TransformGroup; var delta = e. delta * 0.001; DowheelZoom (group, point, delta);} private void OpenImg_Click (object sender, RoutedEventArgs e) {// in WPF, OpenFileDialog is located in Microsoft. win32 namespace Microsoft. win32.OpenFileDialog dialog = new Microsoft. win32.OpenFileDialog (); dialog. filter = "Files (*. png) | *. png | Files (*. jpg) | *. jpg "; if (dialog. showDialog () = true) {// MessageBox. show (dialog. fileName); this. IMG. source = new BitmapImage (new Uri (dialog. fileName);} private void Window_Loaded (object sender, RoutedEventArgs e) {setViewSize ();} private void setViewSize () {mainScrollv. width = this. actualWidth; mainScrollv. height = this. actualHeight-50;} private void Window_SizeChanged (object sender, SizeChangedEventArgs e) {setViewSize ();} private void txtMinSize_TextChanged (object sender, TextChangedEventArgs e) {this. min = double. parse (txtMinSize. text);} private void txtMaxSize_TextChanged (object sender, TextChangedEventArgs e) {this. max = double. parse (txtMaxSize. text);} private void Window_DragEnter (object sender, DragEventArgs e) {if (e. data. getDataPresent (DataFormats. fileDrop) e. effects = DragDropEffects. link; // e in WinForm. effect = DragDropEffects. link else e. effects = DragDropEffects. none; // The value is e in WinFrom. effect = DragDropEffects. none} private void Window_Drop (object sender, DragEventArgs e) {string filename = (System. array) e. data. getData (DataFormats. fileDrop )). getValue (0 ). toString (); this. IMG. source = new BitmapImage (new Uri (filename ));}}}

 

 

Source code: http://files.cnblogs.com/files/huangli321456/PictureViewer.zip