田子格的空间中,显示四张图片,当单击某个图片时,在当前的窗体中其最大化,再次单击则缩小。显示原来的四张小图片。2 显示各个图片的信息

设计思路一

1.显示图片信息可以在图片的tooltip 中显示
2. Grid 2X2 中显示各个图片,单击某个图片时,改变其宽高,占满整个Grid

所有的图片添加事件MouseLeftButtonDown;

 private void PhotoImage1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            var image = e.OriginalSource as Image;
            if (image == null) return;
            int rowIndex = Grid.GetRow(image);
            int columnIndex = Grid.GetColumn(image);
            double ratio = image.ActualHeight / image.ActualWidth;  //图片的高宽比
            double rate = this.PhotoGrid.ActualWidth / this.PhotoGrid.ColumnDefinitions[columnIndex].ActualWidth; 
            if (rate < 1.3 || this.PhotoGrid.ActualWidth > 900) //已放大
                double widthAfter = this.PhotoGrid.ActualWidth / 2;
                this.PhotoGrid.ColumnDefinitions[columnIndex].Width = new GridLength(widthAfter); 
                this.PhotoGrid.RowDefinitions[rowIndex].Height = new GridLength(ratio * widthAfter); 
                double widthAfter = this.TabControlImages.ActualWidth;
                this.PhotoGrid.ColumnDefinitions[columnIndex].Width = new GridLength(widthAfter);
                this.PhotoGrid.RowDefinitions[rowIndex].Height = new GridLength(this.TabControlImages.ActualHeight);

出现的问题

第一层的图片实现了最大化,再单击缩小的功能。单击第二行图片时,第一行图片仍存在。无法实现图片独占窗口的功能。

设计思路二

引入图层的概念,在原有的田字格 图片的最上层,增加一层Bigger Image 空间,通过控制其Visibility 及image source 可实现 效果。

Bigger image 显示某个图片后,背景边角仍可见后一层的四个小图片 。 如何隐藏原有的四个小图片呢?继续引用图层的概念,增加一个背景层颜色 黑。

  private void PhotoImage1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            var image = e.OriginalSource as Image;
            if (image == null) return;
            if (this.BiggerIamges.Visibility == Visibility.Hidden)
                this.BiggerIamges.Source = image.Source;
                this.BiggerIamges.Visibility = Visibility.Visible;
                this.MaskIamges.Visibility = Visibility.Visible;
        private void BiggerIamges_MouseDown(object sender, MouseButtonEventArgs e)
            this.BiggerIamges.Source = null;
            this.BiggerIamges.Visibility = Visibility.Hidden;
            this.MaskIamges.Visibility = Visibility.Hidden;

xaml 中的部分代码

 <Image Grid.Column="1" Grid.Row="1"                                  
  x:Name="photoImage3"  Margin="2,2" Stretch="Fill" ToolTip="实例分割图像"  
    MouseLeftButtonDown="PhotoImage1_MouseLeftButtonDown" >
 </Image>
<StackPanel x:Name="MaskIamges" Background="Black"  Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Visibility="Hidden"></StackPanel>
<Image x:Name="BiggerIamges" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Visibility="Hidden" MouseDown="BiggerIamges_MouseDown" ></Image>

注意:xaml 中image 先后顺序,后面的显示在上一层。

WPF中图层概念的应用应用场景设计思路一实现一出现的问题设计思路二实现二应用场景田子格的空间中,显示四张图片,当单击某个图片时,在当前的窗体中其最大化,再次单击则缩小。显示原来的四张小图片。2 显示各个图片的信息设计思路一1.显示图片信息可以在图片的tooltip 中显示2. Grid 2X2 中显示各个图片,单击某个图片时,改变其宽高,占满整个Grid实现一所有的图片添加事件MouseLeftButtonDown; private void PhotoImage1_MouseLeftBut
文章标题实在不懂怎么表述才清楚。 描述问题:多个图片(图层)重叠时,如何通过鼠标点击来拾取到相应的图层。因为图层会有很多空白的地方(比如图片四周),要求是获取鼠标点击位置的像素颜色值,如果为空白时或透明度小于50%,则穿透到下一层图层再次进行颜色判断,直到找到符合条件的图层。 根据颜色拾取搜索WPF Color Picker,找到一些相关的资料: https://www.codeprojec...
自从2003 年WPF 公之于众开始(当时的开发代号为Avalon),其革命性的创建软件的方式引起了(理所应当的)高度关注,特别是使用Windows Forms 和GDI 进行开发的开发人员。创建有趣、有用、可分享的WPF 示例来演示各种类型的技术并不难,而如果使用其他技术,那么它们很难实现。但从编程模型、基础概念和使用的基本术语来看,WPF 与以前的技术完全不同。甚至查看WPF 的源代码(我们可以用一个类似于.NET Reflector 的工具来破解并打开WPF 的组件)也会让人感到困惑,因为你寻找的那些代码经常不在你所期望的位置。再加上完成任何一个任务都有很多方式,和许多人一样,你会得出一个结论:WPF 的学习曲线非常陡。
1. 使用Path绘制气泡的尖尖,将这个放到顶层; 2. 在用border绘制长方形框,将这个放到底层,并且设置Margin值,使得Path图层和border看起来衔接在一起。  代码如下: <Window x:Class=BubblePanelTest.MainWindow xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/200 DragAdorner Adorner是绑定到UIElement的自定义FrameworkElement。 装饰器在AdornerLayer进行渲染,该图层是始终位于装饰元素或装饰元素集合上方的渲染表面。 使用Gu.Wpf.Adorners,您可以叠加/添加多个控件的水印。 在WPF应用程序,从NuGet安装。 ```powershell PM> install-package Gu.Wpf.Adorners NuGet将安装该dll,并将其作为资源添加到您的项目。 将名称空间添加到您的控件。 < UserControl ...
DXF Viewer是一种用于查看和管理DXF文件的应用程序,采用WPF(Windows Presentation Foundation)技术进行开发。DXF是一种由AutoCAD开发的文件格式,用于存储二维和三维设计数据。 DXF Viewer采用WPF作为开发工具,具有许多优点。首先,WPF提供了丰富的图形渲染功能,使得DXF Viewer能够以高性能和高质量显示DXF文件的图形数据。此外,WPF还支持多种图形效果和样式,使得用户可以根据自己的喜好和需求来自定义界面和显示效果。 DXF Viewer具有以下功能。首先,它能够打开和显示DXF文件,并能够平滑地缩放、移动和旋转图形。其次,它支持选择和编辑DXF文件的图形对象,如线条、圆弧、多边形等,可以修改它们的属性和位置。此外,DXF Viewer还提供了标注和测量工具,用户可以通过这些工具来添加标签和尺寸,并获取准确的测量结果。 除了以上的基本功能,DXF Viewer还有一些附加功能。例如,它支持图层管理,用户可以根据需要显示或隐藏不同的图层。此外,DXF Viewer还支持DWG文件的读取和转换,用户可以将DWG文件转换为DXF文件,并在DXF Viewer查看和编辑。 总结起来,DXF Viewer是一款基于WPF技术开发的应用程序,能够高效地打开、显示和编辑DXF文件。它具有丰富的功能和可定制的界面,能够满足用户不同的需求。无论是专业设计师还是普通用户,都可以通过DXF Viewer轻松地查看和管理DXF文件。