使用开源工具MonoDevelop开发GTK#图形界面

shudou 2010-11-25

Mono一直到现在的2.8已经完全可以胜任一些比较小的项目了,但相关的开发文档与教程一直比较匮乏,中文材料更是屈指可数。虽然Mono与.net很多类库都是通用的,但Mono仍然有为数不少的扩充类库,其中最重要的就是对于GTK二次封装的GTK#图形界面类库了,目前想要开发原生的Mono图形界面程序此类库必不可少。在MonoDevelop里已经支持对于GTK#界面设计的直接拖放,有相关经验的开发人员可以很快上手。

Mono官方网站上也有一篇GTK#开发的入门文档:Stetic GUI Designer,现在结合此教程简要概述一下如何在MonoDevelop下使用GTK#。

首先,我们需要做的就是创建一个工程……(这是一句废话)。在MonoDevelop主界面选择文件->New->Solution(话说目前MonoDevelop汉化工作还未彻底完成,菜单中中文夹英文……),在弹出来的对话框选择C#->GTK#2.0工程。

使用开源工具MonoDevelop开发GTK#图形界面

输入想建立的工程名,我们这里用“SteticTutorial”,然后点新建。再下面的一个对话框中根据自己的需求选择,然后就可以点击OK了。

稍等一会之后,可以看到MonoDevelop已经帮我们做好了一个GTK#工程所需要做的最基本的工作了,点击运行菜单里的运行按钮或者工具栏上的齿轮按钮就可以编译执行当前工程了,因为我们现在什么也没做,只是单纯弹出了一个空白的窗体。

使用开源工具MonoDevelop开发GTK#图形界面

嗯嗯,很漂亮的界面……咳咳……

现在我们要往这个界面中添加一些控件,双击工程目录中的MainWindow.cs,这里可以看到窗体事件的代码。注意看MonoDevelop的下方有两个选项,目前选中的是“源代码”,现在让我们点击“设计器”。

使用开源工具MonoDevelop开发GTK#图形界面

界面右侧有隐藏的工具栏,其中有常用的控件,现在我们可以使用常用的拖放操作来画窗体了,万岁~

好了,现在我们先不急,首先选中主窗体(MainWindow),然后再右侧的属性栏可以查看当前选中控件的属性。

使用开源工具MonoDevelop开发GTK#图形界面

我们先把Window Tile一项改成需要的名字,这一项决定了窗体运行时标题栏上的文字。

好了,剩下的就是往窗体中拖放控件。这里GTK#与WinForms有一些不同,WinForms下直接往窗体上拖放需要使用的控件就好,而基于GTK的GTK#,大部分控件都需要放在“容器”中。容器就是专门用来盛放控件的控件,在工具栏的第一部分全是这些容器。GTK#就是依赖这些容器来进行控件的定位的,学习过Swing或者QT的同学应该很容易理解。

根据我们的需要,我们往主窗体拖放一个VBox。VBox是一个纵向排列的容器,将窗体分割为了一个个纵向的单元,可以往这些单元中添加控件或者其他容器来满足需求。

使用开源工具MonoDevelop开发GTK#图形界面

默认的VBox有三栏,我们需要两栏就足够了。右击第三个,选择“Delete”。

大部分窗体应用中菜单栏是不可或缺的一部分,所以我们首先要往窗体中VBox顶栏中添加一个MenuBar。VBox的一个很有意思的特性就是可以根据它其中的控件而改变容器的大小,所以当我们把MenuBar拖进第一栏的时候可以看到MenuBar并没有变得像整个窗体一半大小那样难看,而是自动将VBox缩成单行的宽度了。

使用开源工具MonoDevelop开发GTK#图形界面

接下来添加菜单选项就很简单了,直接点击“Click to create menu”就可以添加按钮,还可以选择按钮的图标。选中菜单,在属性栏还可以设置Accelerator项来设定此菜单的快捷键。

使用开源工具MonoDevelop开发GTK#图形界面

建立完菜单后,MainWindow.cs的窗体下多了一个选项“行为”(英文叫Action),点开,看到我们之前在菜单栏中所有的定义。选中“Exit”,然后查看属性栏,注意看属性栏上方有一个“信号”(Signal)的选项看,选择它。

使用开源工具MonoDevelop开发GTK#图形界面

在“Activated”项后面的Hander一栏点击“Click here to add a new hander”,需要注意的是很多时候因为工具栏默认宽度有些窄而导致Handler项显示不出来,我们可以拉长一下工具栏的长度。点击后添加一个“OnExit”的事件,双击它进入源代码编辑窗口。

使用开源工具MonoDevelop开发GTK#图形界面

这里添加一句代码:

protected virtual void OnExit(object sender, System.EventArgs e)  


{  


   Application.Quit();  


} 

尝试编译运行一下,在程序菜单栏的File菜单栏中选择Exit,看看程序是否如期关闭。

如果你的代码没有问题的话,让我们继续往下走。现在VBox的下栏还空着,我们往里添加一个TextView控件,命名为logTextView。原教程中提到先要添加一个ScrolledWindow容器,再往其中填充TextView控件才能实现滚动条,但实际发现ScrolledWindow容器并非必需的,大概是GTK#版本不同的缘故吧。

好了,现在我们的程序界面已经完成,已经可以在窗体写入文字。不过你会发现有一个小问题,TextView并不能自动换行,每当一行文字的长度超过窗体的长度时程序只是添加了一个水平的滚动条。解决这个问题的方法很简单,只要将textview控件的Wrap Mode改为Word or Charactor就可以了。实际编程中最好将此属性最为可选项提供为用户。

剩下的就是在每个菜单添加相应时间代码:

For the OnOpen method:  


 



protected virtual void OnOpen(object sender, System.EventArgs e)  {       




// Reset the logTreeView and change the window back to original size       




int width, height;       




this.GetDefaultSize( out width, out height );     




this.Resize( width, height );     




logTextView.Buffer.Text = "";       



// Create and display a fileChooserDialog     



FileChooserDialog chooser = new FileChooserDialog(         




 "Please select a logfile to view ...",        




this,         



 FileChooserAction.Open,          



"Cancel", ResponseType.Cancel,         




 "Open", ResponseType.Accept );      




 if( chooser.Run() == ( int )ResponseType.Accept )     {         




 // Open the file for reading.        



System.IO.StreamReader file =        



System.IO.File.OpenText( chooser.Filename );         




 // Copy the contents into the logTextView        




logTextView.Buffer.Text = file.ReadToEnd();         




 // Set the MainWindow Title to the filename.        




this.Title = "Nate's Log Viewer -- " + chooser.Filename.ToString();          




// Make the MainWindow bigger to accomodate the text in the logTextView          




this.Resize( 640, 480 );         




 // Close the file so as to not leave a mess.        




file.Close();      




 } // end if       



chooser.Destroy();    



} // end method OnOpen  



For the OnClose method:  


 



  protected virtual void OnClose(object sender, System.EventArgs e)  {      




 // Reset the logTreeView and change the window back to original size       




int width, height;       




this.GetDefaultSize( out width, out height );     




this.Resize( width, height );     




logTextView.Buffer.Text = "";       



// Change the MainWindow Title back to the default.     


this.Title = "Nate's Log Viewer";  }



 // end method OnClose  



For the OnAbout method:  


 



  protected virtual void OnAbout(object sender, System.EventArgs e)  {       




// Create a new About dialog       




AboutDialog about = new AboutDialog();      




 // Change the Dialog's properties to the appropriate values.       




about.Name = "Nate's Log Viewer";       




about.Version = "1.0.0";       




// Show the Dialog and pass it control       



about.Run();       



// Destroy the dialog       



about.Destroy();  }   



// end method OnAbout  

其实可以更加完善,比如再新建文档或者关闭文档的时候检测textview内容是否改变,提示用户保存等等功能。

编译运行界面:

相关推荐