選張圖片做成9宮格拼圖

今天要學習一個拼圖項目。

目標是傳入一張圖片，然后將它分成9份，去掉一份，鼠標點擊進行拼圖。

源文件結構很簡單

第一步、新建項目

這一步沒什么好說的，新建一個項目就跟源文件結構一樣了

 第二步、頁面布局（.xaml文件）

看下源文件

控件有 DockPanel Grid Button三個然后設置了Grid有三列和三行。DockPannel暫時不知道有什么用，所以我先不忙加。然后我就報錯了

原來 xaml是用的xml格式。button外面沒有雙標簽包圍，不能識別，所以報錯。所以外面再加個標簽包裹就行了，如果加DockPanel標簽就和源文件一樣了，此處為了明白DockPane有什么用，所以還是用Grid，看等會兒會不會報錯。我現在的代碼是

第二步、編寫點擊按鈕選圖片的功能

 這個帖子上周就開始寫了，但是做了一半又去研究c++了。c++研究了一段時間，忽然明白我為什么要編程了。我編程不是對計算機有興趣，不是為了0和1。我學計算機和程序只是為了做東西。所以又回過頭來繼續寫這個系列，之后的內容我不會再抓細節，有些東西，能看懂就行了。記不住也沒關系，要用的時候再查就是了。將項目做出來之后，我還要將它做成我喜歡的樣子，而不是做成跟源代碼一樣。

 點擊按鈕要做兩件事

1、彈出文件選擇對話框，選擇圖片。

2、選擇圖片后生成拼圖

下面是選擇圖片的代碼

 

 

　　

生成拼圖 第一步是把圖片分成9塊，並填充相應區域的圖像

這個有點復雜，源碼用了很多方法，我習慣拆出來作為一個類單獨寫。

　　 /// <summary>
    /// 拼圖生成類
    /// 傳入一張圖片 生成一個9*9的圖片集合
    /// </summary>
    public class PuzzleForImage
    {
        BitmapImage     _image;                                         　　　　//原圖片
        public List<Rectangle> initialUnallocatedParts = new List<Rectangle>();//要返回的拼圖集合
        /// <summary>
        /// 新建對象時傳入原圖片
        /// </summary>
        /// <param name="image"></param>
        public PuzzleForImage(BitmapImage image)
        {
            _image = image;
　　　　　　　//創建拼圖
        }
　　}

第一步：寫個子方法，根據起點和圖片寬高繪制矩形。然后調用9次，得到整個拼圖集合

第二步：將9張中的8張拼圖隨機排列，這里選前八張

第三步：再添加塊空白的拼圖

第四步：添加鼠標點擊移動事件

到這一步，源碼部分就結束了，自己添加了個判斷成功的代碼 在方塊中的點擊事件中執行。

下面是我的代碼。

運行效果：

還存在的問題：

1、現在圖片會被拉伸，暫時沒想到好的辦法。

2、會隨機一些拼不出來的拼圖

 

------------------------------分割線2016-8-3 16：47---------------------------------

圖片拉伸問題已經解決

@曙光閃現
[quote]圖片拉伸應該只能通過限制窗體的縮放按圖片的比例縮放了。之前搞過9path原理就是類似這個九宮格[/quote]

下面是代碼

更新了MainWindow.xaml.cs文件 和 MainWindow.xaml文件

下面是最新的代碼

PuzzleForImage.cs沒變還是上面那個