Owl's Blog on .NET development

Component Owl codes Better ListView control all night so you don't have to.

Posts Tagged ‘better listview’

Right-aligned Images in Better ListView

Better ListView 2.9.0 now supports more customizable image alignment. For example, images can be aligned on the right part of item:

Right-aligned Images

Right-aligned Images

The alignment can be set separately on every sub-item (using AlignImageHorizontal and AlignImageVertical properties).

Moreover, the right-aligned images can be used in column headers and groups:

Group image alignment

Group image alignment

The alignment of images is similar to that of text. Every image has its frame, which can be possibly larger than the image itself. In such case, the image needs to be further aligned within the frame. This has been done automatically by centering the image within frame, but now you have full control over the alignment.

Related Posts:

Customize Label Editing (Embedded) Control for Each Line in Better ListView

Embedded controls for label edit in Better ListView can be customized not only for every column, but even for every row.

This is not a new feature, but would be nice to mention that you can possibly have a different custom editing control for every cell…

C#

private IBetterListViewEmbeddedControl ListViewRequestEmbeddedControl(object sender, BetterListViewRequestEmbeddedControlEventArgs eventArgs)
{
    // show editing controls in the second column
    if (eventArgs.SubItem.Index == 1)
    {
        // show my custom control on the first row
        if (eventArgs.SubItem.Item.Index == 0)
        {
            return (new DocumentAccessConrol());
        }

        // show my custom control on the second row
        if (eventArgs.SubItem.Item.Index == 1)
        {
            return (new BetterListViewComboBoxEmbeddedControl());
        }

        // show my custom control on the third row
        if (eventArgs.SubItem.Item.Index == 2)
        {
            return (new BetterListViewTextBoxEmbeddedControl());
        }
    }

    return null;
}

 

Visual Basic

Private Function ListViewRequestEmbeddedControl(ByVal sender As Object, ByVal eventArgs As BetterListViewRequestEmbeddedControlEventArgs) _
    As IBetterListViewEmbeddedControl

    ' show editing controls in the second column
    If eventArgs.SubItem.Index = 1 Then

        ' show my custom control on the first row
        If eventArgs.SubItem.Item.Index = 0 Then
            Return (New DocumentAccessConrol())
        End If

        ' show my custom control on the second row
        If eventArgs.SubItem.Item.Index = 1 Then
            Return (New BetterListViewComboBoxEmbeddedControl())
        End If

        ' show my custom control on the third row
        If eventArgs.SubItem.Item.Index = 2 Then
            Return (New BetterListViewTextBoxEmbeddedControl())
        End If

    End If

    Return Nothing

End Function

 

And there is the result:

Custom Embedded Control on the First Line

Custom Embedded Control on the First Line

 

TextBox Control on the Third Line

TextBox Control on the Third Line

Related Posts:

Custom Item Height in Details View of Better ListView

Better ListView 2.7.0.0 now supports items of arbitrary height in Details view:

Items with custom height

Items with custom height

Items with variable heights were possible in recent versions of Better ListView as well, but this adjustment was limited to heights which are multiples of text line height.

We have introduced a BetterListViewItem.CustomHeight property, which is 0 by default.

Every item has some minimum size (defined by the font and image) but it can get arbitrarily larger. The following formula explains how item height is measured in Better ListView:

height = max(minimum height, image height, text height, custom height)

Setting minimum height for all items is possible through layout properties and the latter is defined by the item itself.

Related Posts:

Custom Spacing between Items in Details View

Better ListView 2.6 newly supports custom spacing between items in Details view:

Custom Spacing between Items

Custom Spacing between Items

This property has been recently available in other views, but Details view was exception since its selections needed to be treated in different way: They overlap by 1 pixel so that the double border is avoided in neighboring selections:

1 px overlap of items

1 px overlap of items

We have resolved this to get proper behavior with custom spacings and now the spacing can be set the same way as in any other view:

Simply set LayoutItemsCurrent.ElementOuterPadding to have custom horizontal and vertical padding between items.

You can set this specifically for Details view by refering to property LayoutItemsDetails or LayoutItemsDetailsColumns (Details view with columns).

Related Posts:

Are You a Zen Coder or Distraction-Junkie?

What you do when compiling can ruin your life. And not just when compiling, but when waiting for any short computer operation to finish.

That time is ridiculously tiny compared to the rest of your workday, yet it can have a huge impact on your productivity and well-being overall. Yes, that’s a big fat claim.

And by the way, this article is not just about coders or programmers. It’s about any smart people working with computers. And there will be pictures! Let’s rock and roll -

Why am I writing this

I recently started implementing certain time management techniques into my work style to boost my productivity, reduce stress, and help my body and brain rest. I basically wanted to work in uninterruptable 100% focused 60-120 minutes blocks of time, followed by a 20-30 minute breaks.

However, I almost immediately run into a big problem: When I was compiling or deploying something, I automatically opened one or more of the following: Email client, Facebook, news reader, news sites. That’s a bad habit. It’s hard to break. It ruins my goal of clean focus.

So I decided to do some research. There was a discussion on “What to do while compiling?” on StackExchange. The most up-voted answers were of the “reduce the compilation time” kind. However, these answers don’t solve the more general problem: There will always be waiting times while working on the computer.

Other than that, the people in the discussion were mostly suggesting what they usually do (such as checking email or news) – which is a horrible idea. One good advice was that “Multi-tasking is bad”. I agree with that. But overall? Not. Good. Enough. The answers were disappointing. So, in this article, I am going to explore this issue deeply and present you with the optimal approach.

Two kinds of coders

There are two extreme archetypes of coders – The “zen coder”, and the “distraction junkie coder”. Both are extreme, so both should be rare on the bell curve of distribution, right?

Wrong. Although the “Distraction junkie coder” is, in fact, extreme, he is unbelievably prevalent.

A picture is worth 1000 words, so I am going to show you, with pictures, what is happening on the mental desktops of both of these kinds of coders.

The zen coder

What does zen coder do?

He codes. That’s the only thing he does, and that tells it all. Perhaps the more important question is what he does not do: He does not succumb to distractions. Clean focus. Clean cuts. Clean coding. 60-120 minutes of pure coding, then a 20-30 minute break, which is usually off the computer. Then he codes again. (The minutes are just an example. He can use a different pattern – but he is always balanced and betting on the long-term productivity.)

His mind is like calm fluid water with a steady flow. It is not like frozen water shattered to 1000 constantly shaking pieces.

This is how the mental desktop of zen coder looks like:

Zen coder's mental desktop

The distraction junkie coder

Even if your mental desktop looks like the one of a zen coder, just a few minutes after you open Facebook and check your email – e.g. when compiling, it will look like this:

Distraction junkie coder mental desktop

And that is, ladies and gentlemen, after just merely checking your email and opening Facebook! If you also have a bunch of real-time notifications, IMs, and check your RSS and twitter, the above will look like a scheme of a meditating monk’s brain compared to the havoc you will break.

You will probably never fully recover from that. Not on that particular day, anyway. Even if you minimize all this crap on your mental desktop to your mental taskbar, it will remain there, tempt you forever, and eat up your mental resources. And boy, the time will fly by, and you will wonder where it went.

Oh, and by the way, if you are distraction junkie, then you must check out our web comics for developers! Don’t even return to finish reading this article. And don’t forget to subscribe to the comics RSS! And read all the strips! Then send it to your buddy, and start chatting! The distraction-rabbit holes are not that deep, really!

The difference between zen coder and distraction junkie coder

Zen coder prefers long-term happiness and productivity. He is capable of focusing deeply. He trains focus.

Distraction junkie coder prefers instant gratification for the price of not reaching his full potential and hurting himself both physically and mentally in the long run. He is too lazy to focus.

To fully grasp this, we first need to understand how our brains work.

How our brains work

The truth is that we don’t really know, yet. But, based on our current understanding, there are some useful analogies that psychologists have been putting to a good use for some time, and that can help us grasp some of the complexities.

The computer analogy

Your brain is a computer. Sure, it is infinitely more complex than a PC, but the computer metaphor allows us to describe many processes that are going on in the brain. There is something like HDD, there is something like RAM, CPU, there are processes and threads, and it takes certain amount of time to access information and to calculate things.

It is obvious that our brain has only a certain capacity to focus at any particular moment. You can focus on 1 thing well, or on 3 things badly, but you can’t do both. Even switching from one task to another carries a cognitive cost, especially if the tasks are in different contexts.

Once you bring something to your awareness, it takes time to fully dispose of it and its associated resources and to purge it from your mental RAM and background processes. It can even take hours or days. Things recently brought to your awareness constantly re-appear at random moments. Even if you do not notice them floating in your mind, they are there – and they take up resources, and reduce your ability to focus.

The chest of drawers analogy

Another useful metaphor is a chest of drawers. Your brain stores stuff in drawers. Each drawer is a cloud of data associated and linked together based on certain contexts and concepts. At any particular time, some of the drawers are open, and some closed. The open drawers represent your current mental landscape, the stuff that is easily accessible.

The big problem is that it takes time to close mental drawers, but opening them is instant.

So, when you are working, and then switch to some news site, it can instantly open a bunch of drawers. When you return to work, these drawers will remain open. The only benefit is it can help you with creativity and brainstorming – but unnecessarily opened drawers come at a cost. They reduce your left-brain raw mental power and ability to focus.

What to do while compiling?

What you do when waiting for some computer operation to execute can determine if you are a zen coder, or distraction junkie coder.

The main idea here is to:

  1. Not lose focus, and
  2. Take a micro break.

Not losing focus is not that hard – all you have to do is to switch your brain off, or keep thinking about your code. However, switching off is better. It’s a micro-meditation, and it also serves our goal of taking a micro-break.

Why meditation? Well, your brain is crunching code all day, so why not give it a rest? Plus it’s scientifically proven that meditation leads to permanent increase in levels happiness. Just imagine the long term benefits of this seemingly trivial habit of meditating for 30-60 seconds couple of times per day.

Now, what to do on your micro-break? Do any of the following, combine as you wish. You can also do them all, in this order, depending (or not) on how long is the operation taking.

  1. Get up
  2. Look into distance
  3. Put your hands behind your head and lean back on your chair
  4. Stretch your legs, then raise your hands as high as possible
  5. Close your eyes
  6. Gently massage your eyes
  7. Slowly turn your head to the right, left, up and down as far as possible
  8. Close your eyes and breathe
  9. Go get a glass of water (Be careful not to get distracted by your co-workers on your way.)

You can do also anything else that engages primarily your body and not mind – isometrics exercise, juggling, sword-fighting ;-).

And by the way – if your boss gives you hard time about any of this, then refer him to this article. It is far better for you to quickly rejuvenate yourself and maintain focus than to appear working and get distracted, lose focus and become tired sooner.

Stretching can be very beneficial. My physiotherapist discovered a lot of tension in my shoulders on my last visit. She told me that it’s there probably because I have my hands bent all the time when siting at the computer, so the muscles shorten and work uneconomically. The best thing I can do? Lift and move my hands, try to reach as high as possible. That’s now one of the things I do when compiling or waiting for a computer operation to execute.

You’ve probably heard that it is a good idea to stretch and take a short break regularly when working on the computer. The problem is the implementation – even if you set a timer, what if you are in a middle of a difficult problem when it goes off? It’s just seems impossible to implement. However, if you take the micro-break while compiling, it works great and you can even make a habit out of it, so it gets “automated”! The compilation now becomes your reminder to stretch. Incredibly powerful stuff.

The things you shouldn’t do when compiling

I really want to hammer my point home, so just to make things absolutely clear, here is a list of what you should NOT do when compiling. Think of it this way: These things will not just ruin your focus, but you will deprive your mind and body of the micro-break.

  1. Check your RSS
  2. Check news (any news)
  3. Check email
  4. Check social media (Facebook, twitter, G+, LinkedIn, reddit – you name it)
  5. Watch videos

Doing the following 2 things is better than all of the above, but it is still not optimal:

  1. Chat with a co-worker
  2. Read a physical book

Clean Focus and Clean Cuts

I will close this article with what I think is the ideal approach to daily work-flow – the zen coder way.

The key to true productivity and efficiency is to focus 100% on the one thing you are doing at the moment, and then to completely switch and do something else. There shouldn’t be any blurry transitions from one thing to the next.

Divide your time into 60 – 120 minutes blocks of work. Focus 100% percent in these blocks of time. Then take a 20-30 minute break and do something else entirely. You can check your email and social media during the break, sure, but a brisk walk or a short nap and healthy snack will do you more good. After the break is over, check what’s next in your task management software (e.g. I use my own Swift To-Do List), and do another block of focused work. It is somewhat similar to Pomodoro technique, only on a larger scale.

The breaks are not optional. Don’t even think about skipping them. Your body needs them. Take the breaks even if you do what you love – in such a case, you will be motivated to accomplish more in the next time block.

Your work-flow should look something like this:

(Task 1 – Task 2) – Break – (Task 2 – Task 3 – Task 4) – Break – (Another 60-120 minute block of tasks) – Break…

And not something completely chaotic, random and sad, like this:

Task 1 – Email – Task 1 – Facebook – Task 1 – Task 2 – Minibreak – Facebook – Task 2 – Email – reddit – Task 3 – Email – Break – Task 2 – Email – Task 3 – twitter – Hacker News – twitter – Task 1 – Task 3 – Break – Task 4

If your workflow is sub-optimal like that, you will neither fully relax nor accomplish what you could. This is inferior on every level. It is not just a waste of your potential and time, but often also completely unnecessary wreckage of your body in the long run.

I won’t lie to you. Focusing is really hard. It’s hard, because when you are not doing it, you are basically training the opposite. Habits and ingrained routines are inherently hard to change.

The good news is you can train. You can learn to focus. It’s a learnable skill for everyone, and incredibly well worth the effort.

- By , the obsessed author of task management software for Windows. He is posting this guest article here on ComponentOwl.com, because his Swift To-Do List uses .NET Better ListView from Component Owl as its core component.

PS: Know anyone who is checking email 50 times a day, and has 12 different notifications jumping in his face all the time? Send him this article. He will thank you later.

Related Posts:

Hiding Items in Better ListView

We currently introduced a BetterListViewItem.Visible property to allow hiding items visually, but keeping then in the Items collection:

Making items invisible

Making items invisible

The above image shows two groups of items. The first groups uses hiding of items with the Visible property, while the second group simply turns off drawing of ceratin items.

The first approach is useful when you need to hide item as if it is removed, but keep it actually within Items collection.

The second approach need to create new control inheriting from BetterListView, overrride the OnDrawItem method and set properties like BetterListViewDrawItemEventArgs.DrawImage to false or simply not call the base implementation of OnDrawItem.

The second (owner drawing) approach is useful when you need just to switch off display of item without changing the item layout.

Related Posts:

Read-Only Mode in Better ListView

Better ListView 2.5 introduces a new boolean property called ReadOnly.

When set to true, the Better ListView does not respond to keyboard and mouse input. There are, however, some exceptions that make the Read-only mode different to the Disabled mode (when Enabled property is set to false).

When in Read-only mode, content of the Better ListView can be still scrolled (the scroll bars are enabled) and groups/items can be expanded/collapsed.

The difference between Disabled and Read-only can be seen on the following images:

Normal state

Normal state

Disabled state

Disabled state

Read-only state

Read-only state

 

As you can see, the Better ListView is displayed normally in Read-only mode, but the group header does not have a hot state (because cannot be focused). Items also cannot be focused or selected, but the expand buttons are still interactive.

The scroll bars would also be enabled and can be used, which is different from Disabled mode where everything is grayed and cannot be used.

Related Posts:

Non-selectable Items in Better ListView

One of our users asked us whether it would be possible to make specific Better ListView items to be non-selectable because he wanted to have them in “disabled” state.

We quickly realized that it might be very useful, in some cases, to have items with informative character only. Some of such non-selectable items can even be used as separators with the help of owner drawing:

Non-selectable items

Non-selectable items

The non-selectable items behave just as their name suggests. They cannot be focused (they are skipped when jumping from item to item with arrow keys) and do not respond to drag selection:

Non-selectable items

Non-selectable items

It is very easy to set-up such items. Simply set BetterListViewItem.Selectable property to false.

The non-selectable items are displayed in the same way as normal items. They can contain child items (which are selectable until their Selectable property is set to false) and can be interactively expanded/collapsed.

If you need to have all items non-selectable to use Better ListView for display-only, consider using the Read-only mode, which has been also introduced in version 2.5.

Related Posts:

Custom Behavior of Group Headers in Better ListView

When developing our desktop applications, me and Jiri needed to adjust behavior of group headers in the Better ListView control.

We discovered that making group header behavior customizable would be useful not only for us, but for other developers who utilize Better ListView as well, so we implemented this feature officially in Better ListView 2.5.0.

There are two new properties: ShowDefaultGroupHeader and GroupHeaderBehavior.

Hiding the Default Group Header

The ShowDefaultGroupHeader is initially set to true. This means that the default group (the group containing items which do not have a specific group) have its header displayed:

Default group header is visible

Default group header is visible

When ShowDefaultGroupHeader is set to false, the “Default” group header on top can be hidden:

Default group header is hidden

Default group header is hidden

Adjusting Group Header Behavior

The group headers have two kinds of behavior. They can be focused and can cause selection of items. Both of these functions can be invoked by keyboard and mouse.

The GroupHeaderBehavior property allows changing this behavior for keyboard and mouse separately.

By default, the property is set to BetterListViewGroupHeaderBehavior.All, so that all functions of the group header are turned on.

You may want to make group headers completely non-interactive. This can be done by setting the property to BetterListViewGroupHeaderBehavior.None.

Other values of the enum can be combined to create desired behavior.

Keyboard:

  • Focus only
  • Focus and select items in the group

Mouse:

  • Focus
  • Select items in the group
  • Highligh when mouse cursor is over the group header
The expand button of group headers can still be used even if the group header has all the behaviors turned off. If you need to hide the expand button as well, set BetterListViewGroup.AllowShowExpandButton to false.

Use Case: Metadata Viewer

Here Better ListView is used for viewing image metadata tags:

Metadata View window

Metadata View window

Only one tag can be selected at a time, so clicking on a group header has no effect on selection and need not to be highlighted.

One may still need, however, to allow focusing the group header with keyboard and mouse so that it is possible to collapse/expand the group with arrow keys. The desired behavior can be set this way:

C#

listView.GroupHeaderBehavior = (BetterListViewGroupHeaderBehavior.KeyboardFocus & BetterListViewGroupHeaderBehavior.MouseFocus);

Visual Basic

listView.GroupHeaderBehavior = (BetterListViewGroupHeaderBehavior.KeyboardFocus And BetterListViewGroupHeaderBehavior.MouseFocus)

Related Posts:

Combined Items in Better ListView

Hierarchical (tree-like) items can be used to support non-selectable child items in Better ListView 2.5.0 and newer. We call these Combined items as they are combined with its children to look and behave as single item:

Combined items

Combined items

Combined item has selection ranging over all its child items. This can be seen when the combined item is selected or focused:

Combined items - selection

Combined items - selection

Child items of the combined item are still interactive, though not focusable/selectable. They can contain further children (be expanded/collapsed with expand button as well) and can contain interactive check boxes. The visual part of combined child items is also fully available, to the child items can contain images and even sub-items.

To set-up combined items, simply set AllowSelectChildItems property to false on all items you wish to combine.

Combined items can be used in any level of item hierarchy.

Related Posts: