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 先後順序，後面的顯示在上一層。