程式功能:上下左右移動圖片、左上左下右上右下、顯示圖片、隱藏圖片、禁止最大化。
"移動"這個指令，非常的特別，它用到的單字是"Left"、"Top"(X軸、Y軸)，在Left中"+"代表的是向右、"-"代表的是向左；在"Top"中"+"代表的是向下、"-"代表的是向上
這個等等會用到所以要先看一下喔!
1.新增一個專案，放入11個"Button"物件，和一個"PictureBox"、"Lable"，排列大致如下
小技巧:想要排的整齊，可以去設定屬性中的"size"調整大小，以下圖為範例:"button1"40,120；"button3"120,40；另為你在移動物件的時候會有藍色的對準線，這樣就可以隨心所欲地排列整齊囉
(1)Button:按鈕物件
(2)PictureBox:放置圖片的物件
2.更改Button屬性中的"Text"；在此附上箭頭的特殊符號↑↓← →↖↗↙↘；中間那顆是未來復位的功能紐，可以改成◎；圖中的"Button10"位置是"顯示圖片"功能紐；Button11是"隱藏圖片"功能紐；並調整一下適中的字型大小，以上是建議的修改，當然大家也可以打成中文(左、上、右....)，和移動成你喜歡的位置； Lable1屬性的Text打上你的名字，屬名為你自己的作品；PictureBox屬性的Image放入一張你喜歡的圖片(...>本機資源>匯入)，圖片不要太大，或者自行用編輯圖片的軟體更改大小後再匯入，圖片要打開Aotosize(在屬性的SizeMode中)，這樣就可以看到完整的圖片。
3.更改button屬性中的"Name"這是用來更改物件名稱的(更改後在寫程式時可以容易辨別)；分別是:U、D、L、R、RU、RD、LU、LD、reset、open、close(上 下 左 右 右上 右下 左上 左下 復位 顯示 隱藏)；讀者也可以改成不一樣的，只要你自己看得懂就好
4.開始寫程式
點兩下↑進入編輯:"點一下↑所要進行的動作"的程式碼，"PictureBox1.Top = PictureBox1.Top - 8"，(把等號右邊的式子運算後，存入左邊的式子)，這行程式碼的意思是"把圖片向上移動8像素"；8這個數字可以隨意更改，越大移動越快；接下來可以按開始來測試一下，向上的按鈕有沒有作用。
接下來編輯其他按鈕的程式碼
向下:PictureBox1.Top = PictureBox1.Top + 8
向左:PictureBox1.Left = PictureBox1.Left - 8
向右:PictureBox1.Left = PictureBox1.Left + 8
左上:PictureBox1.Top = PictureBox1.Top - 8
PictureBox1.Left = PictureBox1.Left - 8
右上: PictureBox1.Top = PictureBox1.Top - 8
PictureBox1.Left = PictureBox1.Left + 8
左下:PictureBox1.Top = PictureBox1.Top + 8
PictureBox1.Left = PictureBox1.Left - 8
右下:PictureBox1.Top = PictureBox1.Top + 8
PictureBox1.Left = PictureBox1.Left + 8
如圖，可以在每個物件的程式碼後免加一個註明，以方便日後的維護工作
接下來要用"復位"這個按鈕，"SetBounds(x,y,width,height)"中的x,y是物件的座標位置，width,height為物件的寬度和高度；這次要移動的物件為picturebox1 而且動作是復位，所以我們要知道復位的座標，先把圖片移動到一個你覺得中間的位置，移動後滑鼠不要按到其他東西，右下角的座標值記下來。
開始編輯復位按鈕，"PictureBox1.SetBounds(188, 192, 0, 0)"，四個值都要設定不然會出錯，如果未來有需要增加物件寬長度了話，必須這樣打"PictureBox1.SetBounds(1,2,picturebox1.width+3,picturebox1.height+4 )"，數值是按照需求去更變的；另外如果有遇到圖片移動到按鈕的地方時，圖片會覆蓋按鈕，請在設計的地方，圖片按右鍵>移到最下層
顯示圖片、隱藏圖片:我們按下這兩個按鈕時要他們執行甚麼工作，這是很重要的事情，有時候可以先想一下在編寫程式碼，會比較清楚；
1.當我按下"隱藏圖片"時，圖片要不見，所有按鈕要變成假的(顯示圖片除外)，因為沒有圖片時做移動的指令對使用者來說是沒有意義的，而且圖片已經隱藏了，"隱藏圖片"再按一下也沒意義，只剩下按"顯示圖片"是有意義的事情，並且把隱藏按鈕變色，讓使用者清楚知道目前是在什麼樣的狀況
2.當我按下"顯示圖片"時，圖片要出來，全部按鈕都要恢復，顯示圖片隱藏，因為圖片已經出來了，再按一下"顯示圖片"也是沒意義的事情，圖片出來了，移動按鈕對使用者來說就變得很重要，並且讓顯示圖片變色，讓使用者知道目前是在顯示圖片的情況
3.程式一開始運行時，預設的情況是"顯示圖片"，所以程式一打開要呈現出按下"顯示圖片"時的狀況
這次需要用到兩個屬性，Enable(設定物件是否啟動)；Visible(設定物件是否隱藏)
以上是我要這兩個按鈕做的事情，先從第3項開始，到顯示圖片的屬性中的Enbled更改為Flase，Backcoloer改個你喜歡的顏色，並且記下你選擇的顏色代號(本示範為coral)
再來第1項，開始編輯"隱藏圖片"程式碼:
PictureBox1.Visible = False(圖片隱藏)
U.Enabled = False(向上按鈕不啟用)
D.Enabled = False(向下按鈕不啟用)
L.Enabled = False(向左按鈕不啟用)
R.Enabled = False(向右按鈕不啟用)
RU.Enabled = False(右上按鈕不啟用)
RD.Enabled = False(右下按鈕不啟用)
LU.Enabled = False(左上按鈕不啟用)
LD.Enabled = False(左下按鈕不啟用)
reset.Enabled = False(復位按鈕不啟用)
close.Enabled = False(隱藏圖片按鈕不啟用)
close.BackColor = Color.Coral(隱藏圖片按鈕顏色更改)
open.Enabled = True(顯示圖片按鈕啟用)
open.BackColor = Color.Transparent(顯示圖片按鈕顏色更改為無色)
這個時候自然而然地已經顯現出，物件名稱(name)更改的重要性了，如果沒更改的人搞不好還再查看哪一個按鈕是哪一個功能，以上的語法(物件名稱.要調整的屬性名稱=設定值)
結果發現，功能一切正常，不過出現了一則警告
翻成白話文，意思就是"close"這個字是VB的內建字元，會產生衝突，建議換掉；好吧，那我們就去屬性的(name)把它刪掉一個字，變成"clos"，原本以為全部的有"close"程式碼都要去手動刪掉"e"，結果發現VB很貼心的全部幫我換掉囉~
最後，我們發現到一個問題，當我們按下最大化或調整視窗大小的時候，物件的位置不會變，會影響整體美觀；因此我們要教大家如何固定視窗大小；進入"form1"的屬性(視窗)，更改"MaximizeBox"屬性(決定視窗是否擁有最大化功能)，改成"Flase"，接下來去"FormBorderStyle"(視窗樣式)更改設定值，設定值意義如下(以下影片有背景音樂 抱歉><)
None 無邊框
FixedSingle 固定的邊框
Fixed3D 固定的3D樣式邊框
FixedDialog 可調整大小的邊框
FixedToolWindow 不可調整大小的工具視窗邊框
SizableToolWindow 可調整大小的工具視窗邊框
這裡建議設定的是"FixedSingle"，然後順便更改一下"text"用個你喜歡的名字，再來測試看看有沒有其他問題，沒有了話就可以存檔囉~
接下來就是本篇最重要的".exe"檔，存好後，到你儲存的資料夾(本範例的專案名字為"第二篇")，第二篇\第二篇\bin\Debug\第二篇.exe(如果找不到資料夾，請到本篇的最上方看一下，你一定沒造做)，把它複製到桌面上後(檔名可以改一下)，打開它(部分防毒會叫 此時點一下忽略就好)，發現這就是我們剛剛做的!這下可以帶去朋友家炫耀囉~
沒有留言:
張貼留言