因项目需要图片预览,所以做了一个预览的功能,在次备份:
xaml代码:
<Window x:Class="ImagePreView.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="图片预览" Height="700" Width="1000" WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True">
<Window.Resources>
<!--图片删除按钮-->
<Style x:Key="DeleteButtonStyleForEllipse" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Black"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid >
<Ellipse Name="ellipse" Fill="Black" Opacity="0.5"/>
<Line X1="0" Y1="0" X2="0" Y2="15" HorizontalAlignment="Center" VerticalAlignment="Center" Stroke="White" StrokeThickness="1" RenderTransformOrigin="0.5,0.5">
<Line.RenderTransform>
<RotateTransform Angle="45" />
</Line.RenderTransform>
</Line>
<Line X1="0" Y1="0" X2="15" Y2="0" HorizontalAlignment="Center" VerticalAlignment="Center" Stroke="White" StrokeThickness="1" RenderTransformOrigin="0.5,0.5">
<Line.RenderTransform>
<RotateTransform Angle="45" />
</Line.RenderTransform>
</Line>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="ellipse" Property="Fill" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<PathGeometry x:Key="pathData">
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="130,80" >
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment Point="120,20" Size="30,30" IsLargeArc="True" SweepDirection="Clockwise"/>
<LineSegment Point="120,14" />
<LineSegment Point="128,22" />
<LineSegment Point="120,30" />
<LineSegment Point="120,24" />
<ArcSegment Point="126,80" Size="26,26" IsLargeArc="True"/>
<LineSegment Point="130,80" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
<Color x:Key="BlueTheme.ButtonSubmitColor.Normal" A="255" R="0" G="176" B="3"/>
<Color x:Key="BlueTheme.ButtonSubmitColor.MouseOver" A="255" R="36" G="114" B="22"/>
<Color x:Key="BlueTheme.ButtonSubmitColor.Pressed" A="255" R="50" G="214" B="53"/>
<!--提交按钮样式-->
<Style x:Key="GreenThemeButtonStyleForSumbit" TargetType="{x:Type Button}">
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="30"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="grid" CornerRadius="3">
<Border.Background>
<SolidColorBrush x:Name="borderBursh" Color="{StaticResource BlueTheme.ButtonSubmitColor.Normal}"/>
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Color" Storyboard.TargetName="borderBursh">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource BlueTheme.ButtonSubmitColor.Normal}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Color" Storyboard.TargetName="borderBursh">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource BlueTheme.ButtonSubmitColor.MouseOver}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Color" Storyboard.TargetName="borderBursh">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource BlueTheme.ButtonSubmitColor.Pressed}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Color" Storyboard.TargetName="borderBursh">
<EasingColorKeyFrame KeyTime="0" Value="Gray"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter HorizontalAlignment="Center" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="#FF3DB6CF"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</Window.Resources>
<Border BorderThickness="1" BorderBrush="Black">
<Grid Background="Black" Opacity="0.7" OpacityMask="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid x:Name="root" >
<Image x:Name="img" MouseWheel="Image_MouseWheel" MouseLeftButtonDown="Image_MouseLeftButtonDown"
MouseMove="Image_MouseMove" RenderTransformOrigin="0.5,0.5" Stretch="Uniform" >
<Image.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="translate" />
<ScaleTransform x:Name="transform" />
<RotateTransform x:Name="rotate"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Button Width="30" Height="30" HorizontalAlignment="Right" VerticalAlignment="Top" Style="{StaticResource DeleteButtonStyleForEllipse}" Click="Button_Click_2"/>
</Grid>
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Width="100" Height="40" Click="Button_Click" Style="{StaticResource GreenThemeButtonStyleForSumbit}">
<Path Stroke="blue" StrokeThickness="2" Fill="blue" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" Width="30" Height="30" Data="{StaticResource pathData}">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1"/>
<TranslateTransform X="30"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Button>
<Button Width="100" Height="40" Click="Button_Click_1" Style="{StaticResource GreenThemeButtonStyleForSumbit}" Margin="50,0,0,0">
<Path Stroke="blue" StrokeThickness="2" Fill="blue" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" Width="30" Height="30" Data="{StaticResource pathData}"/>
</Button>
</StackPanel>
</Grid>
</Border>
</Window>
.cs代码:
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.Shapes;
namespace Hlwdsj.Clf.Zlys.Common
{
/// <summary>
/// ImagePreview.xaml 的交互逻辑
/// </summary>
public partial class ImagePreview : Window
{
Point dragStart;
int imageAngle;
public ImagePreview(string path)
{
InitializeComponent();
img.Source = new BitmapImage(new Uri(path, UriKind.RelativeOrAbsolute));
}
/// <summary>
/// 图片鼠标按下事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
dragStart = e.GetPosition(root);
}
/// <summary>
/// 图片鼠标滚轮滚动事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Image_MouseWheel(object sender, MouseWheelEventArgs e)
{
var mosePos = e.GetPosition(img);
var scale = transform.ScaleX * (e.Delta > 0 ? 1.2 : 1 / 1.2);
scale = Math.Max(scale, 1);
transform.ScaleX = scale;
transform.ScaleY = scale;
if (scale == 1) //缩放率为1的时候,复位
{
translate.X = 0;
translate.Y = 0;
}
else //保持鼠标相对图片位置不变
{
var newPos = e.GetPosition(img);
translate.X += (newPos.X - mosePos.X);
translate.Y += (newPos.Y - mosePos.Y);
}
}
/// <summary>
/// 图片鼠标移动事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Image_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton != MouseButtonState.Pressed)
{
return;
}
var current = e.GetPosition(root);
//将坐标都转换成image坐标系下的坐标
Point point0 = root.TranslatePoint(current, (UIElement)img);
Point point1 = root.TranslatePoint(dragStart, (UIElement)img);
translate.X += (point0.X - point1.X);
translate.Y += (point0.Y - point1.Y);
dragStart = current;
}
/// <summary>
/// 图片左转事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Button_Click(object sender, RoutedEventArgs e)
{
imageAngle = (imageAngle + 90) % 360;
rotate.Angle = imageAngle;
}
/// <summary>
/// 图片右转事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Button_Click_1(object sender, RoutedEventArgs e)
{
imageAngle = (imageAngle - 90) % 360;
rotate.Angle = imageAngle;
}
private void Button_Click_2(object sender, RoutedEventArgs e)
{
this.Close();
}
}
}
源代码下载: