上一篇文章，我們搭建好了主界面的布局。本文將實(shí)現(xiàn)頁(yè)面的交互邏輯，比如如何移動(dòng)窗體、調(diào)整窗體大小、點(diǎn)擊消息和聯(lián)系人切換下方的panel面板、動(dòng)態(tài)加載消息列表panel和好友列表panel等，并且左下角的按鈕改成了添加好友的入口。

移動(dòng)窗體

因?yàn)樵O(shè)置FormBorderStyle屬性為None，所以目前無(wú)法移動(dòng)窗體，要通過(guò)代碼的方式移動(dòng)。

鼠標(biāo)按住窗體上部分移動(dòng)窗體

要實(shí)現(xiàn)這個(gè)效果，需要使用上面面板splitContainer1_Panel1的三個(gè)事件：MouseDown、MouseMove、MouseUp。具體實(shí)現(xiàn)過(guò)程：

1.定義兩個(gè)本地變量

private Point mousepoint;//鼠標(biāo)的位置

private bool mouseflag = false;//鼠標(biāo)是否按下的標(biāo)志

2.實(shí)現(xiàn)三個(gè)事件

private void splitContainer1_Panel1_MouseDown(object sender, MouseEventArgs e)

{

if (e.Button == MouseButtons.Left)

{

mousepoint.X = e.X;

mousepoint.Y = e.Y;

mouseflag = true;

}

}

private void splitContainer1_Panel1_MouseMove(object sender, MouseEventArgs e)
{
if (mouseflag)
{
this.Left = MousePosition.X - mousepoint.X;
this.Top = MousePosition.Y - mousepoint.Y;
}
}

private void splitContainer1_Panel1_MouseUp(object sender, MouseEventArgs e)
{
mouseflag = false;
}

這樣就可以實(shí)現(xiàn)按住上部分移動(dòng)窗體。

調(diào)整窗體大小

通過(guò)對(duì)窗體邊緣進(jìn)行判斷，配合鼠標(biāo)事件，可以完成調(diào)整窗體大小的操作。注意，此時(shí)窗體的padding值為6。此法也是參考網(wǎng)友的方法，并進(jìn)行了優(yōu)化。下面便是放大的窗體效果：

調(diào)整Major窗體大小

第一步，定義枚舉，表示拖動(dòng)方向

public enum MouseDirection { 
  Herizontal,//水平方向拖動(dòng)，只改變窗體的寬度 
  Vertical,//垂直方向拖動(dòng)，只改變窗體的高度 
  Declining,//傾斜方向，同時(shí)改變窗體的寬度和高度 
  None//不做標(biāo)志，即不拖動(dòng)窗體改變大小
}

第二步，添加四個(gè)全局變量

bool isMouseDown = false; //表示鼠標(biāo)當(dāng)前是否處于按下?tīng)顟B(tài)，初始值為否

MouseDirection direction = MouseDirection.None;//表示拖動(dòng)的方向，起始為None，表示不拖動(dòng)

Point mouseOff;//鼠標(biāo)移動(dòng)位置變量

bool declinning = false;//寬高同時(shí)拖動(dòng)時(shí)的標(biāo)志

第三步，鼠標(biāo)按下事件

private void Major_MouseDown(object sender, MouseEventArgs e)
{
mouseOff = new Point(-e.X, -e.Y); //記錄鼠標(biāo)位置
//當(dāng)鼠標(biāo)的位置處于邊緣時(shí)，允許進(jìn)行改變大小。
if (e.Location.X >= this.Width - 10 && e.Location.Y > this.Height - 10)
{
isMouseDown = true;
}
else if (e.Location.X >= this.Width - 10)
{
isMouseDown = true;
}
else if (e.Location.Y >= this.Height - 10)
{
isMouseDown = true;
}
else
{
this.Cursor = Cursors.Arrow;//改變鼠標(biāo)樣式為原樣
isMouseDown = false;
}
}

第四步：鼠標(biāo)移動(dòng)事件

private void Major_MouseMove(object sender, MouseEventArgs e)
{
//鼠標(biāo)移動(dòng)到邊緣，改變鼠標(biāo)的圖標(biāo)
if (e.Location.X >= this.Width - 2 && declinning == false)
{
this.Cursor = Cursors.SizeWE;
direction = MouseDirection.Herizontal;
}
else if (e.Location.Y >= this.Height - 2 && declinning == false)
{
this.Cursor = Cursors.SizeNS;
direction = MouseDirection.Vertical;
}
else
{
this.Cursor = Cursors.Arrow;
}
if (e.Location.X >=this.Width-10&& e.Location.Y >= this.Height - 4)
{
this.Cursor = Cursors.SizeNWSE;
direction = MouseDirection.Declining;
declinning = true;
}
else
{
declinning = false;
}
//設(shè)定好方向后，調(diào)用下面方法，改變窗體大小
ResizeWindow();
}

private void ResizeWindow()
{
if (!isMouseDown)
return;
if (direction == MouseDirection.Herizontal)
{
this.Cursor = Cursors.SizeWE;
this.Width = MousePosition.X - this.Left + 1;//改變寬度
}
else if (direction == MouseDirection.Vertical)
{
this.Cursor = Cursors.SizeNS;
this.Height = MousePosition.Y - this.Top + 1;//改變高度
}else if(direction == MouseDirection.Declining)
{
this.Cursor = Cursors.SizeNWSE;
this.Width = MousePosition.X - this.Left + 1;//改變寬度
this.Height = MousePosition.Y - this.Top + 1;//改變高度
}
//鼠標(biāo)不在窗口右和下邊緣，把鼠標(biāo)變回小箭頭
else
{
this.Cursor = Cursors.Arrow;
isMouseDown = false;
}
}

第五步，鼠標(biāo)松開(kāi)事件

private void Major_MouseUp(object sender, MouseEventArgs e)
{
isMouseDown = false;
declinning = false;
direction = MouseDirection.None;
if (isMouseDown)
isMouseDown = false;
}

根據(jù)這五步，就可以實(shí)現(xiàn)窗體大小的調(diào)整，再配合設(shè)置窗體的寬度、高度限制，可以滿足CIM主窗體的需求。

切換消息和聯(lián)系人面板

實(shí)現(xiàn)消息和聯(lián)系人label的點(diǎn)擊事件，配合下方panel的visible屬性就可以實(shí)現(xiàn)。重要的是下面的動(dòng)態(tài)加載一個(gè)個(gè)會(huì)話panel和一個(gè)個(gè)聯(lián)系人panel。

切換兩個(gè)大panel

注意我的代碼里都已經(jīng)給控件改了Name屬性的值了。比如會(huì)話列表的大panel改成了leftPanel。

1.消息panel的點(diǎn)擊事件

private void changeLeftButton_Click(object sender, EventArgs e)

{

//打開(kāi)左邊panel，關(guān)閉右邊panel

leftPanel.Visible = true;

rightPanel.Visible = false;

//改變下方指示線的顏色

left_line.BackColor = Color.YellowGreen;

right_line.BackColor = Color.Transparent;

}

2.聯(lián)系人panel的點(diǎn)擊事件

private void changeRightButton_Click(object sender, EventArgs e)
{
//打開(kāi)右邊panel，關(guān)閉左邊panel
leftPanel.Visible = false;
rightPanel.Visible = true;
//改變下方指示線的顏色
left_line.BackColor = Color.Transparent;
right_line.BackColor = Color.YellowGreen;
}

動(dòng)態(tài)加載控件

因?yàn)橐粋€(gè)會(huì)話列表就是一個(gè)小的panel，上面有多個(gè)控件，所以需要?jiǎng)討B(tài)加載它們，并放到外層的大panel中顯示。

動(dòng)態(tài)加載會(huì)話小panel

我們?cè)诖绑w的load事件中模擬加載100個(gè)會(huì)話

private void Major_Load(object sender, EventArgs e)
{
for (int i = 0; i < 100; i++)
{
loadtalk(i,loadTalkMessageList());
}
}

///
/// 填充會(huì)話列表對(duì)象到list
///
///
private List loadTalkMessageList()
{
return null;
}

///

/// 加載會(huì)話列表
///
/// 會(huì)話列表的個(gè)數(shù)
/// 會(huì)話列表實(shí)體對(duì)象list

private void loadtalk(int talknum,List talkMessage)
{
//模擬加載會(huì)話列表
Panel talkPanel = new Panel();
talkPanel.Anchor = ((AnchorStyles.Top | AnchorStyles.Left)
| AnchorStyles.Right);
talkPanel.Size = new Size(346, 58);
talkPanel.Location = new Point(3, talknum*58);
talkPanel.MouseEnter += TalkPanel_MouseEnter;
talkPanel.MouseLeave += TalkPanel_MouseLeave;
//頭像
PictureBox pb = new PictureBox();
pb.Size = new Size(35, 35);
pb.Location = new Point(8, 11);
pb.Image = Properties.Resources.知了;
pb.SizeMode =
PictureBoxSizeMode.StretchImage;
pb.MouseEnter += TalkPanel_MouseEnter;
pb.MouseLeave += TalkPanel_MouseLeave;
talkPanel.Controls.Add(pb);
//昵稱(chēng)
Label nickname = new Label();
nickname.AutoSize = true;
nickname.Font = new Font("微軟雅黑", 12F, FontStyle.Regular, GraphicsUnit.Point, ((byte)(134)));
nickname.Location = new Point(56, 10);
nickname.Text = "小龍蝦";
nickname.MouseEnter += TalkPanel_MouseEnter;
nickname.MouseLeave += TalkPanel_MouseLeave;
talkPanel.Controls.Add(nickname);
//消息
Label message = new Label();
message.AutoSize = true;
message.ForeColor =
SystemColors.ControlDarkDark;
message.Location = new Point(58, 34);
message.Size = new Size(277, 15);
message.Text = "上課了好呀";
message.MouseEnter += TalkPanel_MouseEnter;
message.MouseLeave += TalkPanel_MouseLeave;
talkPanel.Controls.Add(message);
//時(shí)間
Label time = new Label();
time.Anchor = ((AnchorStyles)((AnchorStyles.Top | AnchorStyles.Right)));
time.AutoSize = true;
time.ForeColor =
SystemColors.ControlDarkDark;
time.Location = new Point(220, 11);
if (talknum > 5)
{
time.Location = new Point(204, 11);
}
time.Text = "18:48";
time.MouseEnter += TalkPanel_MouseEnter;
time.MouseLeave += TalkPanel_MouseLeave;
talkPanel.Controls.Add(time);
leftPanel.Controls.Add(talkPanel);
}

private void TalkPanel_MouseLeave(object sender, EventArgs e)
{
if (sender is Panel)
{
((Panel)sender).BackColor = Color.Transparent;
}
else
{
((Control)sender).Parent.BackColor = Color.Transparent;
}
}
private void TalkPanel_MouseEnter(object sender, EventArgs e)
{
if(sender is Panel)
{
((Panel)sender).BackColor = Control.DefaultBackColor;
}
else
{
((Control)sender).Parent.BackColor = Control.DefaultBackColor;
}
}

注意loadtalk這個(gè)函數(shù)的參數(shù)，第一個(gè)只是臨時(shí)測(cè)試用的，第二個(gè)才是主要的，后面加載數(shù)據(jù)會(huì)用到。動(dòng)態(tài)加載控件最重要的調(diào)整控件位置和大小，也就是Size和Location屬性，這兩個(gè)值需要從事先設(shè)計(jì)好的界面中獲取，但是動(dòng)態(tài)生成的和事先設(shè)計(jì)好的不一樣，動(dòng)態(tài)生成的位置會(huì)有差距，需要開(kāi)發(fā)者手動(dòng)調(diào)節(jié)。注意if(talknum > 5)這個(gè)判斷，因?yàn)榈降?個(gè)的時(shí)候，大panel不能容納生成的小panel了，time控件的位置又不一樣了，所以需要特殊處理。

還有，loadTalkMessageList這個(gè)方法也是后面加載數(shù)據(jù)時(shí)才實(shí)現(xiàn)的，這里需要定義TalkMessage實(shí)體模型，在項(xiàng)目里面，添加這個(gè)類(lèi)，并加上三個(gè)屬性。

internal class TalkMessage

{

private string _NickName;

private string _SubMessage;

private string _Time;

public string NickName

{

get

{

return _NickName;

}

set

{

_NickName = value;

}

}

public string SubMessage

{

get

{

return _SubMessage;

}

set

{

_SubMessage = value;

}

}

public string Time

{

get

{

return _Time;

}

set

{

_Time = value;

}

}

}

加載會(huì)話和加載好友列表原理是一樣的，代碼也非常相似，只不過(guò)是改改變量名稱(chēng)、添加不同的實(shí)體列，這里就不再多數(shù)，讀者請(qǐng)自行實(shí)現(xiàn)動(dòng)態(tài)添加好友列表。

到這里，主界面的邏輯交互就全部實(shí)現(xiàn)了。還缺的就是數(shù)據(jù)了，等到后面實(shí)現(xiàn)功能的時(shí)候再細(xì)論。下一篇文章將介紹其余的窗體。當(dāng)然，有了這篇文章的鋪墊，其余窗體將會(huì)非常好搭建。

本文系小博客網(wǎng)站原創(chuàng)，轉(zhuǎn)載請(qǐng)注明文章鏈接地址 查看更多內(nèi)容請(qǐng)點(diǎn)擊閱讀更多