Posts Tagged: UI


15
May 09

UI designing, guidelines

Browsing about UI guideline, I got a superb link. Its a must read for UI designers. Also take up the quiz when you are done with the link.


17
Mar 09

DoUNo: SelectedItem or SelectedIndex properties will not be filled unless the control is painted in screen

Recently, I was trying to write UnitTest for a panel. The panel had a ComboBox and the target method (method that needs to be tested) was populating the ComboBox with some DataSource, which is a collection of string. In my unit test driver (written in NUnit with NMock), I tried to check the item’s collection. It was always returning me null despite me adding some items to it. Even the SelectedItem and SelectedIndex were all returning me null. When I had a look in to the WinForms dll using reflector, I came to know about itemscollection .

It seems that this member will not be populated unless the ComboBox is painted in a layout.

 

So next time, when you are writing a unit test for controls, make sure that you create testcases that are testable (unlike me). Thanks to my colleague who pointed out a SO link that clearly talks about this.


14
Mar 09

GDI+ to WPF

Long since I blogged. Reason being the title. I am trying to learn WPF (Windows Presentation Foundation) programming. From now, most of the posts will be WPF related. Meanwhile, if you want to know more about WPF and why WPF, check this out. Although the article is kind of old, its worth giving a look at it.


13
Mar 09

DoUNo: DisplayMember getting reset on DataSource=null

I have a ComboBox whose items are set using the DataSource property. The DataSource is a collection of a custom object (that has a string property ‘Value’ and int property ‘Id’). In the initialise controls, I set the DisplayMember as Value and ValueMember as Id. Now I tried to clear the DataSource by calling,

myComboBox.DataSource = null;

When I did that, my ComboBox’s DisplayMember is reset to “” automatically. This was not I expected, but this is how it behaves as a .Net control. Thought it would be helful sharing it.

More @ http://stackoverflow.com/questions/641809/displaymember-getting-reset-on-datasourcenull


22
Feb 09

DoUNo: ListView_ItemSelectionChangedEvent and MultiSelect

Today, I was trying to customise ListViewControl by playing with the item drawn event, thats when I came across this peculiar stuff.

In ListView, if you have subscribed for the ItemSelectionChangedEvent,the event will not be raised, if you select the same item more than once provided the ListView.MultiSelect = false;  Shhh. Quite difficult to understand, isn’t it ??

Ok. An example, Lets consider that  we have a list view control with two items, foo and bar. Also consider that we have subscribed for the ItemSelectionChangedEvent and the ListView’s MultiSelect is true. Now if you run the application keeping a break point in the ItemSelectionChangedEventHandler and if you select the item foo again and again the control will break. On the other hand, if your ListView’s MultiSelect is false, the control won’t hit the break point. Which means that the event will not be raised.


3
Feb 09

DoUNo: ListViewItems in C#

When you create a ListViewItem in C#, it automatically creates a ListViewSubItem for it and the ListViewItem.SubItem[0] is the ListViewItem


i.e, the default value of ListViewItem is the value of ListViewItem at SubItems[0] 
 

You can find more about ListViewItems in http://codelog.blogial.com/2008/07/18/using-listview-control/ 

Refer to http://stackoverflow.com/questions/502782/automatic-creation-of-listviewsubitems to know my experiences with the ListViewControl.


31
Oct 08

Rubber band selection rectangle in C#

Rubber band selection rectangle -- This is how it looks like finally

You might have selected a couple of icons from your desktop by dragging the left mouse button and my drawing a rectangle over the icons. Such rectangles are called Rubber band selection rectangles. A rubber band selection is a selection rectangle that will track down the mouse pointer when the left mouse button is held.

In this artilce, we will try to draw those kina rectangles in C#. The article covers only the drawing part.

Lets get started.

Here are the terms used in the explanation,
I will be helping you draw the rectangle using four connected lines.

  • Origin point (O) to denote the place from which the user has started to draw the rectangle
  • Intermediate point (I) to refer to the incremental points over which the user has moved his mouse pointer
  • Nearer – close to the mouse pointer
  • Farther – distant from the mouse pointer
  • Ox, Oy referes to the Origin’s X and Origin’s Y

Continue reading →


29
Oct 08

TreeView Control in C#

ListViewControl

ListViewControl

The folder list pane that you see in a Windows Explorer is called TreeViewControl. In C#, its really easy to use these controls. There are loads of facilities provided by this control. Some of them are really great. In this post, I will try to explain some of the basics of this control.

Adding a TreeViewControl

To add a TreeView control, just double click on the TreeView control from the Tools window or add the snippet,

TreeView myTreeView = new TreeView();
this.Controls.Add(myTreeView);  //adding the control to the presentation form

Adding a Node

Nodes are the items that you can find in a tree view control. This is the tricky part. You can have a node, that has another node, that has one more node, and so on. Just like the files and folders inside another folder. To add a node, the control has got, Nodes.Add() method. This is a overloaded method and it has loads of overloaded parameters. For example, you can have a string as a parameter to this method to add a node.

myTreeView.Nodes.Add("foo");  //will add a new node with the text foo in it
Continue reading →


15
Oct 08

Glossy buttons in c#

Is there any way to create glossy, eye candy buttons in c# ?? Before starting off, we need to know what makes a thing glossy. There are two factors,

  • Color selection
  • Linear gradient fill over the control

Ok. Now lets see the implementation. For colors, we have Color class, but for Lineargradient ?? Yeah, we do have a LinearGradientBrush in c#.

Note: The task of making a button glossy will be acheived in the following order,

  • Drawing the border
  • Filling the lower rectangle with a solid color
  • Filling the upper rectangle with a linear gradient
  1. Include a button to the project (myGlossyButton)
  2. Change the FlatStyle of the myGlossyButton to Flat

    myGlossyButton.FlatStyle = FlatStyle.Flat;
  3. Handle the paint event of this button. Lets name the handler method as GlossyPainter
  4. In the GlossyPainter, first we need to give our button a border [task:1]. Say White border.

    e.Graphics.DrawRectangle(Pens.White, new Rectangle(0, 0, e.ClipRectangle.Width - 1, e.ClipRectangle.Height - 1));  //1 is subtracted from the size to make the border completely visible
  5. Next up, we need to fill the rectangle with some base color [task:2]. This time, we will fill the bottom half with some solid color and the upper half with some gradient color.

    SolidBrush aBaseSolidbrush = new SolidBrush(Color.FromArgb(150, Color.YellowGreen));  //FromArgb allows you to even specify the opacity of the colore.Graphics.FillRectangle(aBaseSolidBrush,  new Rectangle(2, (e.ClipRectangle.Height - 4) / 2, e.ClipRectangle.Width - 4, e.ClipRectangle.Height - 4));  //4 is subtracted just to leave a blank space between the border and the button     

  6. Filling the upper part of the button with the linear gradient color [task:3]

    LinearGradientBrush aLineargradientBrush = new LinearGradientBrush(new Rectangle(2, 2, e.ClipRectangle.Width - 4, (e.ClipRectangle.Height - 4) / 2), Color.FromArgb(255, Color.White), Color.FromArgb(100, aColor), 90);  //Specifying how big the linear gradient should be and in what direction the gradient should appear

    e.Graphics.FillRectangle(aLinearGradientBrush, new Rectangle(2, 2, e.ClipRectangle.Width - 4, (e.ClipRectangle.Height - 4) / 2));  //Filling the upperpart of the button
  7. Run the application, you should be seeing a glossy button

This is one of the ways to make a control look glossy. There are many ways to acheive this. If you know a really simple way share it with us.


3
Oct 08

Asynchronous method calls in c# [part 4] — Call back

Atlast, callback. Now, whats call back?? Remember part 1 of this post??

Callback is the techinique of executing a method automatically, when the asynchronous call has been finished.

Lets see how we can do this.

For this tutorial, we need to change the functionalities a bit. The following changes needs to be done.

RemoteObject.cs file

The signature of the method, GetMessage() should be changed in such a way that it takes a argument and gives out an out parameter.

public void GetMessage(string theName, out string theMesssage)  //The method returns an out parameter instead of a message box.
//
 MessageBox will be shown in the form1.cs file
{
  Thread.Sleep(10000);
  theMessage = "Hello " + thename;
}


Form1.cs file

The signature of the AsyncCaller delegated should be changed to,

private delegate void AsyncCaller(string theName, out string theMessage);  //Now the method returns an out parameter

The way the BeginInvoke() is called needs to be altered,

aAsyncCaller.BeginInvoke("foo", myMessage, new AsyncCallback(ShowMessage), null);  //"foo" is the parameter, myMessage is a class level field variable for out parameter and AsyncCallback(...) is the way in which the csc will be notified with the method that it should call once the asynchronous method has completed its execution

Addition of a new method, ShowMessage that takes an IAsyncResult as its parameter

private void ShowMessage(IAsyncResult theAsyncResult)  //This is the callback method and will show the message box with the out parameter's value
{
  AsyncResult aAsyncResult = theAsyncResult as AsyncResult;  //Creating a AsyncResult object from the interface parameter. This paramater actually holds out intended result
  AsyncCaller aAsyncCaller = aAsyncRsult.AsyncDelegate;  //Getting the delegate that was used to call the method asynchronously
  aAsyncCaller.EndInvoke(out myMessage, aAsyncResult);  //Getting the callback message from the delegate
  MessageBox.Show(myMessage);  //Shows the message box to the user with the message that he has got from the RemoteObject.cs file
}

Insight of BeginInvoke() and ShowMessage()

  • As you have noticed the BeginInvoke() method has a big change. the first parameter, “foo” is the parameter for the GetMessage() method, the second parameter is the out parameter, while the third parameter new AsyncCallback(ShowMessage) is the way by which you are telling the csc (c# compiler) that ShowMessage is the method that will be called after the execution of GetMessage.  The constructor  of the AsyncCallback class takes the callback method name.
  • ShowMessage(IAsyncResult) is a new method. It takes an IAsyncResult parameter. IAsyncResult is an interface. The object that it receives as parameter will hold all the details about the asychronous call. It has the result of the call, the delegate that was used to make the call and many more.
  • We actually get the result of the call using the delegate that was used to make the call. So the first statement in this method would be the typecasting of the interface object to AsyncResult object.
  • Secondly, we need to get the delegate that was used to make the asynchronous call (it will be AsyncCaller). Thats what we have done in the second statement.
  • Third statement ends the call by calling the EndInvoke() to get the result of the GetMessage().

This is a simple method of implementing callbacks in c#. Hope you understood. There are loads of other ways in whihc you can accomplish this. I will try to post the alternative ways very soon.