使用两张图片,一张下面,一张上面
注意:图片太大的话,会变形,需要将图片缩放成 Grid 控件对应的大小
XAML
<Grid
x:Name="RootGrid"
ShowGridLines="False" SizeChanged="FrameworkElement_OnSizeChanged">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- 灰度图 -->
<Image
x:Name="GrayImage"
Grid.Column="0" Grid.ColumnSpan="3"
Margin="0"
Source="/Resource/Images/dogincar_grayscale.jpg" Stretch="None" />
<!-- 原始图 -->
<Image
x:Name="OriginImage"
Grid.Column="0"
Margin="0"
Source="/Resource/Images/dogincar.jpg" Stretch="None" />
<!-- 分隔把手 -->
<GridSplitter
Grid.Column="1"
Width="4"
HorizontalAlignment="Center" VerticalAlignment="Stretch"
Opacity="0" />
<!-- 分隔把手样式 -->
<Line
Grid.Column="1"
HorizontalAlignment="Center"
Stroke="DimGray" StrokeDashArray="3 5" StrokeThickness="2" X1="0"
X2="0" Y1="0"
Y2="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}" />
</Grid>
代码
private void FrameworkElement_OnSizeChanged(object sender, SizeChangedEventArgs e)
{
this.ResizeImage();
}
private void ImageComparisonWindow_OnLoaded(object sender, RoutedEventArgs e)
{
this.ResizeImage();
}
private void ResizeImage()
{
this.ResizeImageCore(this.GrayImage, "/Resource/Images/dogincar_grayscale.jpg");
this.ResizeImageCore(this.OriginImage, "/Resource/Images/dogincar.jpg");
}
private void ResizeImageCore(Image image, string imgPath)
{
try
{
// 1. 加载资源中的图片
var imageUri = new Uri($"pack://application:,,,/WpfDemoApp;component{imgPath}",
UriKind.RelativeOrAbsolute);
var originalBitmap = new BitmapImage(imageUri);
// 2. 创建缩放变换
// double scale = 0.5; // 缩小为原来的一半
var heightScale = 1d * this.RootGrid.ActualHeight / originalBitmap.Height;
var widthScale = 1d * this.RootGrid.ActualWidth / originalBitmap.Width;
var scaleTransform = heightScale > widthScale
? new ScaleTransform(heightScale, heightScale)
: new ScaleTransform(widthScale, widthScale);
// 3. 创建 TransformedBitmap
var transformedBitmap = new TransformedBitmap();
transformedBitmap.BeginInit();
transformedBitmap.Source = originalBitmap;
transformedBitmap.Transform = scaleTransform;
transformedBitmap.EndInit();
// 4. 设置到 Image 控件中
image.Source = transformedBitmap;
}
catch (Exception exception)
{
Console.WriteLine(exception);
throw;
}
}