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 先后顺序，后面的显示在上一层。