UI « Codelog

UI

C# / Controls / UI / WPF — Comments Off
7
Jun 09

DockPanel in WPF

As the name says you can dock your controls in to either Top, Left, Right or Bottom of the panel. Placing a control to a location can be done using the Dock property with the values Left, Top, Right and Bottom.

ln1:    <DockPanel>
ln2:        <Button DockPanel.Dock="Top" Content="Button1" />
ln3:        <Button DockPanel.Dock="Bottom" Content="Button2" />
ln4:        <Button DockPanel.Dock="Left" Content="Button3" />
ln5:        <Button DockPanel.Dock="Right" Content="Button4" />
ln6:        <Button Content="Button5" />
ln7:    </DockPanel>

This will dock the button1 to the top of the container, button2 to the bottom and so on.

The order in which we dock the controls matters in here. If we move ln4 to ln3 and ln3 to ln4, the layout will look different.

If you dock a control to a location, the control will remain docked to that location irrespective to the size of the container. Take a look at the schreenshot shown below (with the container maximised).

Although this allows us to fix some controls to any edge of the container, we cannot position controls explicitly using this panel.

C# / Controls / UI / WPF — 1 Comment
6
Jun 09

StackPanel (Layout) in WPF

Like .Net 2.0, WPF provides a set of layouts that allows the users to easily place the controls in to it. Lets look in to it, one by one comparing with the net 2.0 version of it.

StackLayout

This was called as FlowLayout in .net 2. Controls that are added in to this layout will be automatically aligned either in a vertical or in a horizontal fashion. This alignment depends on the value of Orientaion property. The value can either be Vertical or Horizontal.

Vertical Orientation

    <StackPanel Orientation="Vertical">
        <Button Content="Button1" />
        <Button  Content="Button2" />
    </StackPanel>

Horizontal Orientation

    <StackPanel Orientation="Horizontal">
        <Button Content="Button1" />
        <Button  Content="Button2" />
    </StackPanel>

If you notice the screenshots, you will find that the width of the button is automatically controlled by the WPF framework. Thats why the buttons are stretched. But if you wanna control the width, you can play with the HorizontalAlignment property of the control. The default alignment is Stretched. Specifying a width for the control along with the HorizontalAlignment property allows you to have total control on the size and location of the control.

<StackPanel Orientation="Vertical">
  <Button Content="Button1" />
  <Button Content="Button2" HorizontalAlignment="Left" />
  <Button  Content="Button3" HorizontalAlignment="Right" />
  <Button  Content="Button4" HorizontalAlignment="Center" />
  <Button  Content="Button5" HorizontalAlignment="Stretch" />
</StackPanel>

We can see this layout in action in loads of places. For example, the search tool that comes with windows has employed this layout.

Although this layout lets the us relax on alignments, we cannot place two controls parallel to each other (this layout is not intented to do so. we have another layout for this, GridLayout). Also this layout cannot wrap controls when the controls overflow (again this layout is not intented to do so. we have another layout for this, WrapPanel).

Controls / General Programming / Tips 'n' Tricks / UI — Comments Off
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.

C# / Controls / DoUNo / General Programming / Tips 'n' Tricks / UI — Comments Off
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.

C# / General Programming / UI / WPF — 1 Comment
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.

C# / Controls / DoUNo / General Programming / Tips 'n' Tricks / UI — Comments Off
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

C# / Controls / DoUNo / General Programming / Tips 'n' Tricks / UI — Comments Off
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.

C# / Controls / DoUNo / Tips 'n' Tricks / UI — Comments Off
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.

C# / Tips 'n' Tricks / UI — 6 Comments
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 →

C# / Controls / UI — Comments Off
29
Oct 08

TreeView Control in C#

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 →

Codelogforeach(Snippet aSnippet in CodeLog){ aSnippet.GetSolution(); }

UI