WPF中图层概念的应用

应用场景设计思路一实现一出现的问题设计思路二实现二

应用场景

田子格的空间中，显示四张图片，当单击某个图片时，在当前的窗体中其最大化，再次单击则缩小。显示原来的四张小图片。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); } else { 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 先后顺序，后面的显示在上一层。