-
-
- Home +
- Home
- - Products + Products
- - Purchase + Purchase -
- Support -
- Articles -
- Blog -
- Comics -
- About Us +
- Support +
- Articles +
- Blog +
- Comics +
- About Us
Better ListView
Better Thumbnail Browser
Better SplitButton
Better ListView Express
- 
+
+
+
Libor Tinka, Lead Developer, ComponentOwl.com
-
+
1. Introduction
Contents
@@ -1686,7 +1686,7 @@ provided.
- See what's new + See what's new or Download latest release @@ -1801,8 +1801,8 @@ provided.
Item hierarchy with multi-line items in groups
Item hierarchy with multi-line items in groups
We have added four new major features:
List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.
Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.
Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.
-
Thumbnails in groups
DataTable bound to Better ListView
Thumbnails in groups
DataTable bound to Better ListView
We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.
]]>So how we neatly hide a column?
We introduced Column Hiding feature in the version 2.0.1. You can simply call Hide() on your column header instance and you’re done! There is also corresponding Show() method provided. Or you can set boolean Visible property. Now the column and all subsequent sub-items are hidden from view (although they are still present in data, of course):
-
Hiding column via context menu...
Hiding column via context menu...
-
...and the sixth column gets hidden.
...and the sixth column gets hidden.
- + ]]>
Contrary to many custom controls, Better ListView adjusts itself to current theme even if the theme is changed in run-time. For example, when user of your application switches theme from Classic to Aero, or to some other custom theme with elements of different sizes, Better ListView re-measures itself for the new theme smoothly. Reloading the component or re-starting the application is not necessary.
One of the sweet bonuses of using Better ListView 2.0 instead of regular .NET ListView is the full Groups functionality in all themes and all versions of the operating system. For example, groups are not collapsible in standard ListView on Windows XP and even does not support images. In Better ListView, however, you are able to unleash full potential of groups everywhere.
The following images show Better ListView in different Windows themes: Classic, XP Luna and Aero:
-
Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
]]>
Centered images in Better ListView
+
Centered images in Better ListView
Better ListView 3.11 supports aligning images in sub-items and columns to center. Simply set AlignHorizontalImage property of an sub-item or column to BetterListViewImageAlignmentHorizontal.OverlayCenter.
The image will be centered inside available space regardless of text.
This is useful for sub-items and column headers consisting of image only.
@@ -71,11 +71,11 @@
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.
]]>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.
]]>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.
]]>By default, each view has its defaults, but you can customize text alignment on every column, item, sub-item and group individually:
Vertical alignments of text
Vertical alignments of text
Various text wrapping modes
Various text wrapping modes
The sub-item in the first column has TextWrapping set to Layout and the layout has MaximumTextLines set to 4. The sub-item text thus can be split to up to four lines. It is actually split just to three because the column is wide enough.
The sub-item in the second column has TextWrapping set to None, which means the text in this sub-item is kept on single line.
diff --git a/src/data/blog/tag/alignment/index.html b/src/data/blog/tag/alignment/index.html index 4e9d073..6ed77d7 100644 --- a/src/data/blog/tag/alignment/index.html +++ b/src/data/blog/tag/alignment/index.html @@ -7,13 +7,13 @@
Alternating Rows
Alternating Rows
Lists with alternating row colors are more readable. It is very simple to implement alternating rows in Better ListView.
Simply add DrawItemBackground event handler and fill background on odd/even items:
diff --git a/src/data/blog/tag/alternating/index.html b/src/data/blog/tag/alternating/index.html index 783eb92..54b46b0 100644 --- a/src/data/blog/tag/alternating/index.html +++ b/src/data/blog/tag/alternating/index.html @@ -7,13 +7,13 @@
Hot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+
Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>The component is fully customizable and by default inherits native Windows theme. We tested it on Windows 8 with success:
-
Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser contains default implementation for loading thumbnail images from disk. If you want to gather all images from a given folder (say “c:\images”), display them in Better Thumbnail Browser and load them on background, the code is particularly simple:
thumbnailBrowser.Path = "c:\\images";diff --git a/src/data/blog/tag/background/index.html b/src/data/blog/tag/background/index.html index ffcef8f..7644286 100644 --- a/src/data/blog/tag/background/index.html +++ b/src/data/blog/tag/background/index.html @@ -7,13 +7,13 @@
Better ListView custom scroll bar size
-Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
+
Better ListView custom scroll bar size
+Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
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.
+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.
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
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.
@@ -67,7 +67,7 @@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#
diff --git a/src/data/blog/tag/behavior/index.html b/src/data/blog/tag/behavior/index.html index 0a7b654..3cf1aca 100644 --- a/src/data/blog/tag/behavior/index.html +++ b/src/data/blog/tag/behavior/index.html @@ -7,13 +7,13 @@
Default list without grid lines below items
-
List with grid lines added
Default list without grid lines below items
+
List with grid lines added
Setting grid lines in Better ListView is easy. Simply make sure you are using Details view (the default view). Then you can set GridLines property to one of the following values:
Centered images in Better ListView
+Centered images in Better ListView
Better ListView 3.11 supports aligning images in sub-items and columns to center. Simply set AlignHorizontalImage property of an sub-item or column to BetterListViewImageAlignmentHorizontal.OverlayCenter.
The image will be centered inside available space regardless of text.
This is useful for sub-items and column headers consisting of image only.
@@ -67,7 +67,7 @@Alternating Rows
+Alternating Rows
Lists with alternating row colors are more readable. It is very simple to implement alternating rows in Better ListView.
Simply add DrawItemBackground event handler and fill background on odd/even items:
@@ -108,8 +108,8 @@ private void ListViewOnDrawItemBackground(object sender, BetterListViewDrawItemB
Better ListView custom scroll bar size
-Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
+Better ListView custom scroll bar size
+Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
+ 
I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.
You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:
C#
@@ -279,8 +279,8 @@ End ClassHot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -367,7 +367,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>
Better ListView with bound list
Better ListView with bound list
Say you have a simple Server type:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -484,7 +484,7 @@ listView.DataSource = servers
listView.ImageList = imageList
[/vb]
Let’s take a look on the result:
-
Better ListView with bound list
Better ListView with bound list
The columns were auto-generated and Server properties properly converted to item and sub-item labels. The generated column header labels are just names of the corresponding properties (ServerName, ServerStatus). You can make the names more convenient by providing DisplayNameAttribute on the respective properties:
C#
@@ -528,7 +528,7 @@ End Property…
[/vb]
Now the column names are more user friendly:
-
Better ListView with bound list
Better ListView with bound list
We will finally add state images (instead of the numbers) and highlight some items. To do that, we have to override DataCreateItem method in a class derived from BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -583,7 +583,7 @@ Public Class CustomListView
End Class
[/vb]
Now the control displays adjusted images and a highlighted item:
-Better ListView with bound list
Better ListView with bound list
Note that you can customize data binding the other way as well by overriding the DataUpdateSubItemToSource method. This method is responsible for updating the bound data source when item/sub-item value have been modified.
]]>
Search Highlight Feature
Search Highlight Feature
To enable the highlight, simply add UpdateSearchHighlight option in the search settings:
C#
@@ -632,9 +632,9 @@ ListView.SearchSettings = New BetterListViewSearchSettings(Every item contains information about the match in the BetterListViewItem.SearchHighlight property. When BetterListViewItem.SearchHighlight.IsEmpty is true, the item was not matched by the search. Otherwise it contains information about the matched substring: its index and number of characters.
Highlight colors can be adjusted by three properties: ColorSearchHighlight, ColorSearchHighlightBorder and ColorSearchHighlightText:
-
Search Highlight Properties
Search Highlight Properties
The display can be adjusted even further with owner drawing:
-
Customized Search Highlight Feature
Customized Search Highlight Feature
Here we have used ellipses drawn on item background by modifying OnDrawItem and OnDrawItemBackground methods of BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -728,7 +728,7 @@ End Class
Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.
The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:
C#
@@ -774,7 +774,7 @@ End Sub End SubNaturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.
-Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
+Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
]]>
Customized item selection.
+
Customized item selection.
-
By default, Better ListView uses system theme for drawing selections.
+By default, Better ListView uses system theme for drawing selections.
To draw custom selection, you can use owner drawing capabilities of Better ListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -888,8 +888,8 @@ End Class
Hiding Column Headers
Hiding Column Headers
To hide column headers, simply set HeaderStyle property to BetterListViewHeaderStyle.None. There are other possible styles for all column headers:
Better ListView Sub-item Check Boxes
-Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
+
Better ListView Sub-item Check Boxes
+Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.
Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).
Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.
@@ -73,8 +73,8 @@Default list without grid lines below items
-List with grid lines added
Default list without grid lines below items
+List with grid lines added
Setting grid lines in Better ListView is easy. Simply make sure you are using Details view (the default view). Then you can set GridLines property to one of the following values:
Search Highlight Feature
Search Highlight Feature
To enable the highlight, simply add UpdateSearchHighlight option in the search settings:
C#
@@ -166,9 +166,9 @@ ListView.SearchSettings = New BetterListViewSearchSettings(Every item contains information about the match in the BetterListViewItem.SearchHighlight property. When BetterListViewItem.SearchHighlight.IsEmpty is true, the item was not matched by the search. Otherwise it contains information about the matched substring: its index and number of characters.
Highlight colors can be adjusted by three properties: ColorSearchHighlight, ColorSearchHighlightBorder and ColorSearchHighlightText:
-Search Highlight Properties
Search Highlight Properties
The display can be adjusted even further with owner drawing:
-Customized Search Highlight Feature
Customized Search Highlight Feature
Here we have used ellipses drawn on item background by modifying OnDrawItem and OnDrawItemBackground methods of BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -262,7 +262,7 @@ End Class
Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.
The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:
C#
@@ -308,7 +308,7 @@ End Sub End SubNaturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.
-Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
+Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
]]>The component is fully customizable and by default inherits native Windows theme. We tested it on Windows 8 with success:
-Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser contains default implementation for loading thumbnail images from disk. If you want to gather all images from a given folder (say “c:\images”), display them in Better Thumbnail Browser and load them on background, the code is particularly simple:
thumbnailBrowser.Path = "c:\\images";@@ -390,11 +390,11 @@ End Sub
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.
]]>Item hierarchy with multi-line items in groups
Item hierarchy with multi-line items in groups
We have added four new major features:
List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.
Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.
Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.
-Thumbnails in groups
DataTable bound to Better ListView
Thumbnails in groups
DataTable bound to Better ListView
We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.
]]>Contrary to many custom controls, Better ListView adjusts itself to current theme even if the theme is changed in run-time. For example, when user of your application switches theme from Classic to Aero, or to some other custom theme with elements of different sizes, Better ListView re-measures itself for the new theme smoothly. Reloading the component or re-starting the application is not necessary.
One of the sweet bonuses of using Better ListView 2.0 instead of regular .NET ListView is the full Groups functionality in all themes and all versions of the operating system. For example, groups are not collapsible in standard ListView on Windows XP and even does not support images. In Better ListView, however, you are able to unleash full potential of groups everywhere.
The following images show Better ListView in different Windows themes: Classic, XP Luna and Aero:
-Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
]]>
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).
diff --git a/src/data/blog/tag/between/index.html b/src/data/blog/tag/between/index.html index b43e4e3..71b34b7 100644 --- a/src/data/blog/tag/between/index.html +++ b/src/data/blog/tag/between/index.html @@ -7,13 +7,13 @@Better ListView with bound list
Better ListView with bound list
Say you have a simple Server type:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -129,7 +129,7 @@ listView.DataSource = servers
listView.ImageList = imageList
[/vb]
Let’s take a look on the result:
-Better ListView with bound list
Better ListView with bound list
The columns were auto-generated and Server properties properly converted to item and sub-item labels. The generated column header labels are just names of the corresponding properties (ServerName, ServerStatus). You can make the names more convenient by providing DisplayNameAttribute on the respective properties:
C#
@@ -173,7 +173,7 @@ End Property…
[/vb]
Now the column names are more user friendly:
-Better ListView with bound list
Better ListView with bound list
We will finally add state images (instead of the numbers) and highlight some items. To do that, we have to override DataCreateItem method in a class derived from BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -228,7 +228,7 @@ Public Class CustomListView
End Class
[/vb]
Now the control displays adjusted images and a highlighted item:
-Better ListView with bound list
Better ListView with bound list
Note that you can customize data binding the other way as well by overriding the DataUpdateSubItemToSource method. This method is responsible for updating the bound data source when item/sub-item value have been modified.
]]>Better ListView with bound list
Better ListView with bound list
Say you have a simple Server type:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -129,7 +129,7 @@ listView.DataSource = servers
listView.ImageList = imageList
[/vb]
Let’s take a look on the result:
-Better ListView with bound list
Better ListView with bound list
The columns were auto-generated and Server properties properly converted to item and sub-item labels. The generated column header labels are just names of the corresponding properties (ServerName, ServerStatus). You can make the names more convenient by providing DisplayNameAttribute on the respective properties:
C#
@@ -173,7 +173,7 @@ End Property…
[/vb]
Now the column names are more user friendly:
-Better ListView with bound list
Better ListView with bound list
We will finally add state images (instead of the numbers) and highlight some items. To do that, we have to override DataCreateItem method in a class derived from BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -228,7 +228,7 @@ Public Class CustomListView
End Class
[/vb]
Now the control displays adjusted images and a highlighted item:
-Better ListView with bound list
Better ListView with bound list
Note that you can customize data binding the other way as well by overriding the DataUpdateSubItemToSource method. This method is responsible for updating the bound data source when item/sub-item value have been modified.
]]>
+
I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.
You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:
C#
diff --git a/src/data/blog/tag/borders/index.html b/src/data/blog/tag/borders/index.html index 99de707..5d1ab42 100644 --- a/src/data/blog/tag/borders/index.html +++ b/src/data/blog/tag/borders/index.html @@ -7,13 +7,13 @@Better ListView with bound list
Better ListView with bound list
Say you have a simple Server type:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -129,7 +129,7 @@ listView.DataSource = servers
listView.ImageList = imageList
[/vb]
Let’s take a look on the result:
-Better ListView with bound list
Better ListView with bound list
The columns were auto-generated and Server properties properly converted to item and sub-item labels. The generated column header labels are just names of the corresponding properties (ServerName, ServerStatus). You can make the names more convenient by providing DisplayNameAttribute on the respective properties:
C#
@@ -173,7 +173,7 @@ End Property…
[/vb]
Now the column names are more user friendly:
-Better ListView with bound list
Better ListView with bound list
We will finally add state images (instead of the numbers) and highlight some items. To do that, we have to override DataCreateItem method in a class derived from BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -228,7 +228,7 @@ Public Class CustomListView
End Class
[/vb]
Now the control displays adjusted images and a highlighted item:
-Better ListView with bound list
Better ListView with bound list
Note that you can customize data binding the other way as well by overriding the DataUpdateSubItemToSource method. This method is responsible for updating the bound data source when item/sub-item value have been modified.
]]>Item hierarchy with multi-line items in groups
Item hierarchy with multi-line items in groups
We have added four new major features:
List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.
Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.
Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.
-Thumbnails in groups
DataTable bound to Better ListView
Thumbnails in groups
DataTable bound to Better ListView
We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.
]]>
+
I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.
You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:
C#
diff --git a/src/data/blog/tag/boundaries/index.html b/src/data/blog/tag/boundaries/index.html index 063e19c..dfc03a6 100644 --- a/src/data/blog/tag/boundaries/index.html +++ b/src/data/blog/tag/boundaries/index.html @@ -7,13 +7,13 @@Better ListView Sub-item Check Boxes
-Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
+Better ListView Sub-item Check Boxes
+Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.
Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).
Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.
diff --git a/src/data/blog/tag/box/index.html b/src/data/blog/tag/box/index.html index 02724c3..1026bc6 100644 --- a/src/data/blog/tag/box/index.html +++ b/src/data/blog/tag/box/index.html @@ -7,13 +7,13 @@Better ListView Sub-item Check Boxes
-Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
+Better ListView Sub-item Check Boxes
+Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.
Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).
Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.
diff --git a/src/data/blog/tag/boxes/index.html b/src/data/blog/tag/boxes/index.html index 114c70d..20ddf5b 100644 --- a/src/data/blog/tag/boxes/index.html +++ b/src/data/blog/tag/boxes/index.html @@ -7,13 +7,13 @@The component is fully customizable and by default inherits native Windows theme. We tested it on Windows 8 with success:
-Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser contains default implementation for loading thumbnail images from disk. If you want to gather all images from a given folder (say “c:\images”), display them in Better Thumbnail Browser and load them on background, the code is particularly simple:
thumbnailBrowser.Path = "c:\\images";@@ -88,9 +88,9 @@
There are two controls derived from BetterListView. One for the navigation pane (folder tree on left side) and one for the file view (on the right side).
+
There are two controls derived from BetterListView. One for the navigation pane (folder tree on left side) and one for the file view (on the right side).
The FolderListView control allows browsing through virtual folders as well as folders on removable drives. We needed this control in our products because .NET does not provide any similar managed control (there is only FolderBrowserDialog, but we actually need a control).
You can use it for your purposes as well, it is available in Better ListView Samples source code.
Many features of Better ListView can be used to enhance file browsing, for example:
diff --git a/src/data/blog/tag/browser/index.html b/src/data/blog/tag/browser/index.html index 5716b40..21ea1be 100644 --- a/src/data/blog/tag/browser/index.html +++ b/src/data/blog/tag/browser/index.html @@ -7,13 +7,13 @@Better ListView Sub-item Check Boxes
-Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
+Better ListView Sub-item Check Boxes
+Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.
Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).
Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.
diff --git a/src/data/blog/tag/buttons/index.html b/src/data/blog/tag/buttons/index.html index 0b2f4be..00f7224 100644 --- a/src/data/blog/tag/buttons/index.html +++ b/src/data/blog/tag/buttons/index.html @@ -7,13 +7,13 @@Better ListView Sub-item Check Boxes
-Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
+Better ListView Sub-item Check Boxes
+Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.
Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).
Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.
diff --git a/src/data/blog/tag/cell/index.html b/src/data/blog/tag/cell/index.html index 112a4a1..39b958c 100644 --- a/src/data/blog/tag/cell/index.html +++ b/src/data/blog/tag/cell/index.html @@ -7,13 +7,13 @@Better ListView Sub-item Check Boxes
-Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
+Better ListView Sub-item Check Boxes
+Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.
Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).
Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.
diff --git a/src/data/blog/tag/cells/index.html b/src/data/blog/tag/cells/index.html index a205cda..67bac39 100644 --- a/src/data/blog/tag/cells/index.html +++ b/src/data/blog/tag/cells/index.html @@ -7,13 +7,13 @@Centered images in Better ListView
+Centered images in Better ListView
Better ListView 3.11 supports aligning images in sub-items and columns to center. Simply set AlignHorizontalImage property of an sub-item or column to BetterListViewImageAlignmentHorizontal.OverlayCenter.
The image will be centered inside available space regardless of text.
This is useful for sub-items and column headers consisting of image only.
diff --git a/src/data/blog/tag/center/index.html b/src/data/blog/tag/center/index.html index 75c9a68..c8f9544 100644 --- a/src/data/blog/tag/center/index.html +++ b/src/data/blog/tag/center/index.html @@ -7,13 +7,13 @@See what’s new in Better ListView 1.52.
-Download the new version.
+Download the new version.
We are still working on the new major features (Item hierarchy, groups) as described here. These new features are near completion.
]]>Better ListView Sub-item Check Boxes
-Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
+Better ListView Sub-item Check Boxes
+Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.
Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).
Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.
diff --git a/src/data/blog/tag/check/index.html b/src/data/blog/tag/check/index.html index d6ffc76..9038836 100644 --- a/src/data/blog/tag/check/index.html +++ b/src/data/blog/tag/check/index.html @@ -7,13 +7,13 @@Better ListView Sub-item Check Boxes
-Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
+Better ListView Sub-item Check Boxes
+Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.
Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).
Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.
diff --git a/src/data/blog/tag/checkbox/index.html b/src/data/blog/tag/checkbox/index.html index 454edb6..90ecdbc 100644 --- a/src/data/blog/tag/checkbox/index.html +++ b/src/data/blog/tag/checkbox/index.html @@ -7,13 +7,13 @@Better ListView Sub-item Check Boxes
-Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
+Better ListView Sub-item Check Boxes
+Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.
Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).
Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.
diff --git a/src/data/blog/tag/checkboxes/index.html b/src/data/blog/tag/checkboxes/index.html index c642de1..ed2f780 100644 --- a/src/data/blog/tag/checkboxes/index.html +++ b/src/data/blog/tag/checkboxes/index.html @@ -7,13 +7,13 @@Item hierarchy with multi-line items in groups
Item hierarchy with multi-line items in groups
We have added four new major features:
List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.
Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.
Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.
-Thumbnails in groups
DataTable bound to Better ListView
Thumbnails in groups
DataTable bound to Better ListView
We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.
]]>
Hierarchical items in two groups
+
Hierarchical items in two groups
We are currently working hard on finishing Better ListView version 2.0 which will add new features: Support for groups, tree-like item structure (tree nodes are collapsible, as expected), and multi-line items.
We expect to release this upgrade in about a month. It will be a free upgrade for current and new users.
You can even include images into group headers (as you can see in the preview above), which is not possible in .NET ListView.
Groups are collapsible by default and the expand button can be switched off on each group individually.
Here are groups combined with Tile view (the second group is collapsed):
-
Groups with Tile view
Groups with Tile view
The previous figure displays vertically oriented groups, but Better ListView also support horizontally oriented groups in the List mode:
-
Groups with List view
Groups with List view
We put special effort to mimic the group display and behavior of Windows Explorer. The group headers can display all of the 15 group header states available in Windows visual style and their display is governed by the same logic as in the ListView counterpart.
The group headers always look perfect and native, right out of the box. You don’t need to tweak anything.
This works in the similar way as in the standard TreeView control. Each item (or node) has property called ChildItems which can be filled with new BetterListViewItem instances. SubItems collection can still be used in either items and child-items (child items are treated in the very same way as their parents).
Item hierarchy can be combined with Groups feature as seen in the first preview.
Multi-line items
Multi-line items
A simple setting of item layout (MaximumTextLines property) allows breaking item text into several lines (up to the specified value). When the text is longer than MaximumTextLines, then the default trimming method is used (one from the TextTrimming enumeration: None, TrimCharacter, TrimWord, EllipsisCharacter, EllipsisWord, EllipsisPath).
Multi-line text can be used in every view and also in column headers.
Contrary to many custom controls, Better ListView adjusts itself to current theme even if the theme is changed in run-time. For example, when user of your application switches theme from Classic to Aero, or to some other custom theme with elements of different sizes, Better ListView re-measures itself for the new theme smoothly. Reloading the component or re-starting the application is not necessary.
One of the sweet bonuses of using Better ListView 2.0 instead of regular .NET ListView is the full Groups functionality in all themes and all versions of the operating system. For example, groups are not collapsible in standard ListView on Windows XP and even does not support images. In Better ListView, however, you are able to unleash full potential of groups everywhere.
The following images show Better ListView in different Windows themes: Classic, XP Luna and Aero:
-Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
]]>
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:
-
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:
-
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!
diff --git a/src/data/blog/tag/clean-focus/index.html b/src/data/blog/tag/clean-focus/index.html index 0f9a4ca..b2c13be 100644 --- a/src/data/blog/tag/clean-focus/index.html +++ b/src/data/blog/tag/clean-focus/index.html @@ -7,13 +7,13 @@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:
-
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:
-
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!
diff --git a/src/data/blog/tag/coder-productivity/index.html b/src/data/blog/tag/coder-productivity/index.html index 60836ce..3c14bbb 100644 --- a/src/data/blog/tag/coder-productivity/index.html +++ b/src/data/blog/tag/coder-productivity/index.html @@ -7,13 +7,13 @@Contrary to many custom controls, Better ListView adjusts itself to current theme even if the theme is changed in run-time. For example, when user of your application switches theme from Classic to Aero, or to some other custom theme with elements of different sizes, Better ListView re-measures itself for the new theme smoothly. Reloading the component or re-starting the application is not necessary.
One of the sweet bonuses of using Better ListView 2.0 instead of regular .NET ListView is the full Groups functionality in all themes and all versions of the operating system. For example, groups are not collapsible in standard ListView on Windows XP and even does not support images. In Better ListView, however, you are able to unleash full potential of groups everywhere.
The following images show Better ListView in different Windows themes: Classic, XP Luna and Aero:
-Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
]]>
Contrary to many custom controls, Better ListView adjusts itself to current theme even if the theme is changed in run-time. For example, when user of your application switches theme from Classic to Aero, or to some other custom theme with elements of different sizes, Better ListView re-measures itself for the new theme smoothly. Reloading the component or re-starting the application is not necessary.
One of the sweet bonuses of using Better ListView 2.0 instead of regular .NET ListView is the full Groups functionality in all themes and all versions of the operating system. For example, groups are not collapsible in standard ListView on Windows XP and even does not support images. In Better ListView, however, you are able to unleash full potential of groups everywhere.
The following images show Better ListView in different Windows themes: Classic, XP Luna and Aero:
-Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
]]>
Hot Tracking
This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>Alternating Rows
+Alternating Rows
Lists with alternating row colors are more readable. It is very simple to implement alternating rows in Better ListView.
Simply add DrawItemBackground event handler and fill background on odd/even items:
diff --git a/src/data/blog/tag/colored/index.html b/src/data/blog/tag/colored/index.html index cf696ea..9959156 100644 --- a/src/data/blog/tag/colored/index.html +++ b/src/data/blog/tag/colored/index.html @@ -7,13 +7,13 @@
Alternating Rows
+Alternating Rows
Lists with alternating row colors are more readable. It is very simple to implement alternating rows in Better ListView.
Simply add DrawItemBackground event handler and fill background on odd/even items:
diff --git a/src/data/blog/tag/colors/index.html b/src/data/blog/tag/colors/index.html index 08385fc..593b045 100644 --- a/src/data/blog/tag/colors/index.html +++ b/src/data/blog/tag/colors/index.html @@ -7,13 +7,13 @@
Centered images in Better ListView
+Centered images in Better ListView
Better ListView 3.11 supports aligning images in sub-items and columns to center. Simply set AlignHorizontalImage property of an sub-item or column to BetterListViewImageAlignmentHorizontal.OverlayCenter.
The image will be centered inside available space regardless of text.
This is useful for sub-items and column headers consisting of image only.
@@ -71,8 +71,8 @@Hiding Column Headers
Hiding Column Headers
To hide column headers, simply set HeaderStyle property to BetterListViewHeaderStyle.None. There are other possible styles for all column headers:
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.
]]>So how we neatly hide a column?
We introduced Column Hiding feature in the version 2.0.1. You can simply call Hide() on your column header instance and you’re done! There is also corresponding Show() method provided. Or you can set boolean Visible property. Now the column and all subsequent sub-items are hidden from view (although they are still present in data, of course):
-
Hiding column via context menu...
Hiding column via context menu...
-
...and the sixth column gets hidden.
...and the sixth column gets hidden.
- + ]]>
Centered images in Better ListView
+Centered images in Better ListView
Better ListView 3.11 supports aligning images in sub-items and columns to center. Simply set AlignHorizontalImage property of an sub-item or column to BetterListViewImageAlignmentHorizontal.OverlayCenter.
The image will be centered inside available space regardless of text.
This is useful for sub-items and column headers consisting of image only.
@@ -73,11 +73,11 @@So how we neatly hide a column?
We introduced Column Hiding feature in the version 2.0.1. You can simply call Hide() on your column header instance and you’re done! There is also corresponding Show() method provided. Or you can set boolean Visible property. Now the column and all subsequent sub-items are hidden from view (although they are still present in data, of course):
-
Hiding column via context menu...
Hiding column via context menu...
-
...and the sixth column gets hidden.
...and the sixth column gets hidden.
- + ]]>
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.
diff --git a/src/data/blog/tag/combined/index.html b/src/data/blog/tag/combined/index.html index 98562af..2bf5229 100644 --- a/src/data/blog/tag/combined/index.html +++ b/src/data/blog/tag/combined/index.html @@ -7,13 +7,13 @@We will also take a look on smoother Visual Studio integration, so you can see Better ListView ready in toolbox just after installation (we have to deal with Visual Studio Packages, which is quite an esoteric topic). If Better ListView doesn’t currently appear in your Visual Studio toolbox automatically, you can just right-click the toolbox window, and use “Choose Items” to add the DLL file yourself.
Some background info for the more curious of you: Version 1.5 of Better ListView was very fast. It was so fast because every item in the list had precisely the same size. Some operations, like hit testing, was done in constant time and no extra measurement of individual items was necessary. The new major 2.0 version of Better ListView supports items with variable sizes, and irregular layout consisting of grouped items. However, we observed that even in complex settings, there are just few “types” of items – for example, there are only three possible item sizes when using multi-line items with up to three lines of text. Our optimizations will thus be focused on taking advantage of this to reduce most expensive operations back to constant time complexity.
-
photo by Michael Roper
photo by Michael Roper
Hierarchical items in two groups
+Hierarchical items in two groups
We are currently working hard on finishing Better ListView version 2.0 which will add new features: Support for groups, tree-like item structure (tree nodes are collapsible, as expected), and multi-line items.
We expect to release this upgrade in about a month. It will be a free upgrade for current and new users.
You can even include images into group headers (as you can see in the preview above), which is not possible in .NET ListView.
Groups are collapsible by default and the expand button can be switched off on each group individually.
Here are groups combined with Tile view (the second group is collapsed):
-Groups with Tile view
Groups with Tile view
The previous figure displays vertically oriented groups, but Better ListView also support horizontally oriented groups in the List mode:
-Groups with List view
Groups with List view
We put special effort to mimic the group display and behavior of Windows Explorer. The group headers can display all of the 15 group header states available in Windows visual style and their display is governed by the same logic as in the ListView counterpart.
The group headers always look perfect and native, right out of the box. You don’t need to tweak anything.
This works in the similar way as in the standard TreeView control. Each item (or node) has property called ChildItems which can be filled with new BetterListViewItem instances. SubItems collection can still be used in either items and child-items (child items are treated in the very same way as their parents).
Item hierarchy can be combined with Groups feature as seen in the first preview.
Multi-line items
Multi-line items
A simple setting of item layout (MaximumTextLines property) allows breaking item text into several lines (up to the specified value). When the text is longer than MaximumTextLines, then the default trimming method is used (one from the TextTrimming enumeration: None, TrimCharacter, TrimWord, EllipsisCharacter, EllipsisWord, EllipsisPath).
Multi-line text can be used in every view and also in column headers.
The component is fully customizable and by default inherits native Windows theme. We tested it on Windows 8 with success:
-Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser contains default implementation for loading thumbnail images from disk. If you want to gather all images from a given folder (say “c:\images”), display them in Better Thumbnail Browser and load them on background, the code is particularly simple:
thumbnailBrowser.Path = "c:\\images";diff --git a/src/data/blog/tag/component/index.html b/src/data/blog/tag/component/index.html index ccb307f..dda248c 100644 --- a/src/data/blog/tag/component/index.html +++ b/src/data/blog/tag/component/index.html @@ -7,13 +7,13 @@
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:
-
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:
-
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!
diff --git a/src/data/blog/tag/computer-work/index.html b/src/data/blog/tag/computer-work/index.html index 4bccf94..ccb8e38 100644 --- a/src/data/blog/tag/computer-work/index.html +++ b/src/data/blog/tag/computer-work/index.html @@ -7,13 +7,13 @@The component is fully customizable and by default inherits native Windows theme. We tested it on Windows 8 with success:
-Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser contains default implementation for loading thumbnail images from disk. If you want to gather all images from a given folder (say “c:\images”), display them in Better Thumbnail Browser and load them on background, the code is particularly simple:
thumbnailBrowser.Path = "c:\\images";diff --git a/src/data/blog/tag/control/index.html b/src/data/blog/tag/control/index.html index 453b984..cd73f68 100644 --- a/src/data/blog/tag/control/index.html +++ b/src/data/blog/tag/control/index.html @@ -7,13 +7,13 @@
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
Items with multi-line text
Items with multi-line text
Column headers and even groups can contain multi-line text:
-
Multi-line text in groups
Multi-line text in groups
So the text can be split on multiple lines not only by wrapping the text, but also by user defined newline characters.
This feature comes out of the box.
The only setting associated with multi-line items is the MaximumTextLines property of the corresponding layout (e.g. BetterListView.LayoutItemsLargeIcon). This property specifies how many lines the text can have and this applies to both wrapped text and text with newline characters. So if you expect you text to have 5 to 20 lines, set the MaximumTextLines property to 20 and you know the items will not get too high while still displaying all the lines.
diff --git a/src/data/blog/tag/crlf/index.html b/src/data/blog/tag/crlf/index.html index 60c368f..929ef25 100644 --- a/src/data/blog/tag/crlf/index.html +++ b/src/data/blog/tag/crlf/index.html @@ -7,13 +7,13 @@Better ListView custom scroll bar size
Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
+Better ListView custom scroll bar size
+Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
+
Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.
The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:
C#
@@ -131,7 +131,7 @@ End Sub End SubNaturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.
-Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
+Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
]]>Customized item selection.
+Customized item selection.
-
By default, Better ListView uses system theme for drawing selections.
+By default, Better ListView uses system theme for drawing selections.
To draw custom selection, you can use owner drawing capabilities of Better ListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -297,9 +297,9 @@ Private Function ListViewRequestEmbeddedControl(ByVal sender As Object, ByVal ev
[/vb]
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
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:
@@ -354,9 +354,9 @@ Private Function ListViewRequestEmbeddedControl(ByVal sender As Object, ByVal evCustom 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).
@@ -387,13 +387,13 @@ Private Function ListViewRequestEmbeddedControl(ByVal sender As Object, ByVal evWe 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.
+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.
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
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.
@@ -414,7 +414,7 @@ Private Function ListViewRequestEmbeddedControl(ByVal sender As Object, ByVal evHere 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#
@@ -444,8 +444,8 @@ Private Function ListViewRequestEmbeddedControl(ByVal sender As Object, ByVal ev
Dynamic resizing of the focused item
Dynamic resizing of the focused item
We also introduced FocusedItemChanged event, so that you can detect when focus has moved from one element (item / sub-item / group) to another.
These features can be combined to display only the focused item with more details to save space code of the FocusedItemChanged event handler may look like this:
C#
@@ -507,9 +507,9 @@ End SubOwner drawing in Better ListView 2.3.0 and higher allows you to draw elements (column headers, items, sub-items and groups) in any state you wish (hot, selected, focused and any combination of the three).
For example, we would like to highlight several items in one Better ListView depending on hovered item in other Better ListView:
-
Better ListView shows multiple hot items
Better ListView shows multiple hot items
Items can be also be drawn as if the control is focused, enabled or disabled. This feature can be applied when you wish to display items in highlighted state even if Better ListView is not focused:
-
Better ListView keeps selected items highlighted
Better ListView keeps selected items highlighted
We implemented the first sample (showing mulitple hot items) by inheriting from BetterListView, making a new class called HotListView. The implementation is very simple:
C#
diff --git a/src/data/blog/tag/custom/index.html b/src/data/blog/tag/custom/index.html index a217919..da06340 100644 --- a/src/data/blog/tag/custom/index.html +++ b/src/data/blog/tag/custom/index.html @@ -7,13 +7,13 @@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.
+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.
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
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.
@@ -67,7 +67,7 @@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#
diff --git a/src/data/blog/tag/customize-groups-in-listview/index.html b/src/data/blog/tag/customize-groups-in-listview/index.html index 48e990e..44de4ca 100644 --- a/src/data/blog/tag/customize-groups-in-listview/index.html +++ b/src/data/blog/tag/customize-groups-in-listview/index.html @@ -7,13 +7,13 @@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.
+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.
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
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.
@@ -67,7 +67,7 @@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#
diff --git a/src/data/blog/tag/customize-list-view-group-headers/index.html b/src/data/blog/tag/customize-list-view-group-headers/index.html index a5e3908..6067de7 100644 --- a/src/data/blog/tag/customize-list-view-group-headers/index.html +++ b/src/data/blog/tag/customize-list-view-group-headers/index.html @@ -7,13 +7,13 @@Customized item selection.
+Customized item selection.
-
By default, Better ListView uses system theme for drawing selections.
+By default, Better ListView uses system theme for drawing selections.
To draw custom selection, you can use owner drawing capabilities of Better ListView:
C#
[csharp gutter=”false” toolbar=”false”]
diff --git a/src/data/blog/tag/customized/index.html b/src/data/blog/tag/customized/index.html
index 8648880..2a5f07c 100644
--- a/src/data/blog/tag/customized/index.html
+++ b/src/data/blog/tag/customized/index.html
@@ -7,13 +7,13 @@
Better ListView with bound list
Better ListView with bound list
Say you have a simple Server type:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -129,7 +129,7 @@ listView.DataSource = servers
listView.ImageList = imageList
[/vb]
Let’s take a look on the result:
-Better ListView with bound list
Better ListView with bound list
The columns were auto-generated and Server properties properly converted to item and sub-item labels. The generated column header labels are just names of the corresponding properties (ServerName, ServerStatus). You can make the names more convenient by providing DisplayNameAttribute on the respective properties:
C#
@@ -173,7 +173,7 @@ End Property…
[/vb]
Now the column names are more user friendly:
-Better ListView with bound list
Better ListView with bound list
We will finally add state images (instead of the numbers) and highlight some items. To do that, we have to override DataCreateItem method in a class derived from BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -228,7 +228,7 @@ Public Class CustomListView
End Class
[/vb]
Now the control displays adjusted images and a highlighted item:
-Better ListView with bound list
Better ListView with bound list
Note that you can customize data binding the other way as well by overriding the DataUpdateSubItemToSource method. This method is responsible for updating the bound data source when item/sub-item value have been modified.
]]>Item hierarchy with multi-line items in groups
Item hierarchy with multi-line items in groups
We have added four new major features:
List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.
Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.
Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.
-Thumbnails in groups
DataTable bound to Better ListView
Thumbnails in groups
DataTable bound to Better ListView
We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.
]]>Better ListView with bound list
Better ListView with bound list
Say you have a simple Server type:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -129,7 +129,7 @@ listView.DataSource = servers
listView.ImageList = imageList
[/vb]
Let’s take a look on the result:
-Better ListView with bound list
Better ListView with bound list
The columns were auto-generated and Server properties properly converted to item and sub-item labels. The generated column header labels are just names of the corresponding properties (ServerName, ServerStatus). You can make the names more convenient by providing DisplayNameAttribute on the respective properties:
C#
@@ -173,7 +173,7 @@ End Property…
[/vb]
Now the column names are more user friendly:
-Better ListView with bound list
Better ListView with bound list
We will finally add state images (instead of the numbers) and highlight some items. To do that, we have to override DataCreateItem method in a class derived from BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -228,7 +228,7 @@ Public Class CustomListView
End Class
[/vb]
Now the control displays adjusted images and a highlighted item:
-Better ListView with bound list
Better ListView with bound list
Note that you can customize data binding the other way as well by overriding the DataUpdateSubItemToSource method. This method is responsible for updating the bound data source when item/sub-item value have been modified.
]]>Item hierarchy with multi-line items in groups
Item hierarchy with multi-line items in groups
We have added four new major features:
List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.
Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.
Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.
-Thumbnails in groups
DataTable bound to Better ListView
Thumbnails in groups
DataTable bound to Better ListView
We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.
]]>Better ListView with bound list
Better ListView with bound list
Say you have a simple Server type:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -129,7 +129,7 @@ listView.DataSource = servers
listView.ImageList = imageList
[/vb]
Let’s take a look on the result:
-Better ListView with bound list
Better ListView with bound list
The columns were auto-generated and Server properties properly converted to item and sub-item labels. The generated column header labels are just names of the corresponding properties (ServerName, ServerStatus). You can make the names more convenient by providing DisplayNameAttribute on the respective properties:
C#
@@ -173,7 +173,7 @@ End Property…
[/vb]
Now the column names are more user friendly:
-Better ListView with bound list
Better ListView with bound list
We will finally add state images (instead of the numbers) and highlight some items. To do that, we have to override DataCreateItem method in a class derived from BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -228,7 +228,7 @@ Public Class CustomListView
End Class
[/vb]
Now the control displays adjusted images and a highlighted item:
-Better ListView with bound list
Better ListView with bound list
Note that you can customize data binding the other way as well by overriding the DataUpdateSubItemToSource method. This method is responsible for updating the bound data source when item/sub-item value have been modified.
]]>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.
+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.
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
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.
@@ -67,7 +67,7 @@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#
diff --git a/src/data/blog/tag/default/index.html b/src/data/blog/tag/default/index.html index 43988b0..3285cb8 100644 --- a/src/data/blog/tag/default/index.html +++ b/src/data/blog/tag/default/index.html @@ -7,13 +7,13 @@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).
@@ -71,11 +71,11 @@So how we neatly hide a column?
We introduced Column Hiding feature in the version 2.0.1. You can simply call Hide() on your column header instance and you’re done! There is also corresponding Show() method provided. Or you can set boolean Visible property. Now the column and all subsequent sub-items are hidden from view (although they are still present in data, of course):
-
Hiding column via context menu...
Hiding column via context menu...
-
...and the sixth column gets hidden.
...and the sixth column gets hidden.
- + ]]>
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
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.
diff --git a/src/data/blog/tag/disable-item-selection/index.html b/src/data/blog/tag/disable-item-selection/index.html index 79c989f..41ee0af 100644 --- a/src/data/blog/tag/disable-item-selection/index.html +++ b/src/data/blog/tag/disable-item-selection/index.html @@ -7,13 +7,13 @@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
Disabled state
Read-only state
Normal state
Disabled 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.
@@ -72,9 +72,9 @@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.
diff --git a/src/data/blog/tag/disabled/index.html b/src/data/blog/tag/disabled/index.html index 1e15b04..f5eec2d 100644 --- a/src/data/blog/tag/disabled/index.html +++ b/src/data/blog/tag/disabled/index.html @@ -7,13 +7,13 @@Items with multi-line text
Items with multi-line text
Column headers and even groups can contain multi-line text:
-Multi-line text in groups
Multi-line text in groups
So the text can be split on multiple lines not only by wrapping the text, but also by user defined newline characters.
This feature comes out of the box.
The only setting associated with multi-line items is the MaximumTextLines property of the corresponding layout (e.g. BetterListView.LayoutItemsLargeIcon). This property specifies how many lines the text can have and this applies to both wrapped text and text with newline characters. So if you expect you text to have 5 to 20 lines, set the MaximumTextLines property to 20 and you know the items will not get too high while still displaying all the lines.
diff --git a/src/data/blog/tag/display-multiline/index.html b/src/data/blog/tag/display-multiline/index.html index f3dc2c8..28b1911 100644 --- a/src/data/blog/tag/display-multiline/index.html +++ b/src/data/blog/tag/display-multiline/index.html @@ -7,13 +7,13 @@Dynamic resizing of the focused item
Dynamic resizing of the focused item
We also introduced FocusedItemChanged event, so that you can detect when focus has moved from one element (item / sub-item / group) to another.
These features can be combined to display only the focused item with more details to save space code of the FocusedItemChanged event handler may look like this:
C#
diff --git a/src/data/blog/tag/display/index.html b/src/data/blog/tag/display/index.html index 8c0e071..db5f4a1 100644 --- a/src/data/blog/tag/display/index.html +++ b/src/data/blog/tag/display/index.html @@ -7,13 +7,13 @@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:
-
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:
-
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!
diff --git a/src/data/blog/tag/distraction-junkie/index.html b/src/data/blog/tag/distraction-junkie/index.html index a93b592..4acc403 100644 --- a/src/data/blog/tag/distraction-junkie/index.html +++ b/src/data/blog/tag/distraction-junkie/index.html @@ -7,13 +7,13 @@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:
-
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:
-
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!
diff --git a/src/data/blog/tag/distractions/index.html b/src/data/blog/tag/distractions/index.html index 1f881ec..7f381f1 100644 --- a/src/data/blog/tag/distractions/index.html +++ b/src/data/blog/tag/distractions/index.html @@ -7,13 +7,13 @@We added easy to understand samples for both C# and Visual Basic.
You can simply follow a link from start menu to open the Visual Studio project for your favourite language, and play with all the features of Better ListView.
-
C# and VB Samples projects in Solution Explorer
C# and VB Samples projects in Solution Explorer
We added a Quick Start Tutorial to help you with setup, activation and integration of Better ListView in your projects, as well as many entirely new chapters in the documentation.
diff --git a/src/data/blog/tag/documentation/index.html b/src/data/blog/tag/documentation/index.html index 810d654..f15ca8f 100644 --- a/src/data/blog/tag/documentation/index.html +++ b/src/data/blog/tag/documentation/index.html @@ -7,13 +7,13 @@Our Better ListView control supports drag and drop item reordering out of the box. Zero code is needed – all you have to do is to set the property BetterListViewItemReorderMode to Enabled.
It works just like this:
-
You can just download and install Better ListView, and start using it right away. It can do everything the regular .NET listview component can, and much more.
See more in the Drag Drop Sample that is included with Better ListView. It includes source code.
]]>Our Better ListView control supports drag and drop item reordering out of the box. Zero code is needed – all you have to do is to set the property BetterListViewItemReorderMode to Enabled.
It works just like this:
-
You can just download and install Better ListView, and start using it right away. It can do everything the regular .NET listview component can, and much more.
See more in the Drag Drop Sample that is included with Better ListView. It includes source code.
]]>Our Better ListView control supports drag and drop item reordering out of the box. Zero code is needed – all you have to do is to set the property BetterListViewItemReorderMode to Enabled.
It works just like this:
-
You can just download and install Better ListView, and start using it right away. It can do everything the regular .NET listview component can, and much more.
See more in the Drag Drop Sample that is included with Better ListView. It includes source code.
]]>Owner drawing in Better ListView 2.3.0 and higher allows you to draw elements (column headers, items, sub-items and groups) in any state you wish (hot, selected, focused and any combination of the three).
For example, we would like to highlight several items in one Better ListView depending on hovered item in other Better ListView:
-Better ListView shows multiple hot items
Better ListView shows multiple hot items
Items can be also be drawn as if the control is focused, enabled or disabled. This feature can be applied when you wish to display items in highlighted state even if Better ListView is not focused:
-Better ListView keeps selected items highlighted
Better ListView keeps selected items highlighted
We implemented the first sample (showing mulitple hot items) by inheriting from BetterListView, making a new class called HotListView. The implementation is very simple:
C#
diff --git a/src/data/blog/tag/draw/index.html b/src/data/blog/tag/draw/index.html index f43f0c2..f42c07a 100644 --- a/src/data/blog/tag/draw/index.html +++ b/src/data/blog/tag/draw/index.html @@ -7,13 +7,13 @@
+
I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.
You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:
C#
@@ -171,8 +171,8 @@ End ClassHot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -259,7 +259,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>Customized item selection.
+Customized item selection.
-
By default, Better ListView uses system theme for drawing selections.
+By default, Better ListView uses system theme for drawing selections.
To draw custom selection, you can use owner drawing capabilities of Better ListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -371,7 +371,7 @@ End Class
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.
diff --git a/src/data/blog/tag/drawing/index.html b/src/data/blog/tag/drawing/index.html index f362d6e..f7b7898 100644 --- a/src/data/blog/tag/drawing/index.html +++ b/src/data/blog/tag/drawing/index.html @@ -7,13 +7,13 @@
+
I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.
You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:
C#
@@ -171,8 +171,8 @@ End ClassHot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -259,7 +259,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>Customized item selection.
+Customized item selection.
-
By default, Better ListView uses system theme for drawing selections.
+By default, Better ListView uses system theme for drawing selections.
To draw custom selection, you can use owner drawing capabilities of Better ListView:
C#
[csharp gutter=”false” toolbar=”false”]
diff --git a/src/data/blog/tag/drawn/index.html b/src/data/blog/tag/drawn/index.html
index 9d2576a..a50eb14 100644
--- a/src/data/blog/tag/drawn/index.html
+++ b/src/data/blog/tag/drawn/index.html
@@ -7,13 +7,13 @@
Our great inspiration for designing Better ListView is nothing less than the mighty Windows Explorer. This file manager uses obviously much more powerful control that the regular .NET list-view alone is.
It supports some extra views, line Contents and Extra Large Icons. It is also possible to adjust image size by rolling a mouse wheel while holding Control key.
Better ListView has the capability of displaying item icons with arbitrary sizes, but we also extended it with one extra view: Thumbnails:
-
Thumbnails Sample
Thumbnails Sample
This view aligns items in the center while keeping constant spacing between items. Thumbnails also keep just single line of text for compactness. On the other hand, LargeIcon view varies horizontal space between items to fill client area evenly and breaks long text into several lines.
The constant spacing is inspired by various photo managers, where image thumbnails are better viewed side-by-side (and the view looks also more organized).
Image thumbnails also look better with some kind border or frame. We added this new feature in Better ListView 1.5 and it works in all views. There are several pre-defined types of borders, but user can draw his own:
@@ -53,10 +53,10 @@Thumbnails use DropShadow by default, but it can be adjusted for every view separately. One can also adjust thickness of the border/shadow and define custom spacing around image.
Take a look at one possible setting:
-
Image Borders
Image Borders
This is SingleOffset border of width 3 pixels. Notice that also column header images can have its borders (these are SymmetricShadow).
When the border is defined and image size should be kept the same, some spacing have to be added around image. You can adjust this spacing to draw you own borders or any additional graphics (such as overlay icons). Here is an example –
-
Thumbnail with Extra Icons
Thumbnail with Extra Icons
You can download Better ListView and play with it yourself.
]]>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.
diff --git a/src/data/blog/tag/dropdown/index.html b/src/data/blog/tag/dropdown/index.html index 00dbedc..f612e29 100644 --- a/src/data/blog/tag/dropdown/index.html +++ b/src/data/blog/tag/dropdown/index.html @@ -7,13 +7,13 @@Dynamic resizing of the focused item
Dynamic resizing of the focused item
We also introduced FocusedItemChanged event, so that you can detect when focus has moved from one element (item / sub-item / group) to another.
These features can be combined to display only the focused item with more details to save space code of the FocusedItemChanged event handler may look like this:
C#
diff --git a/src/data/blog/tag/dynamic/index.html b/src/data/blog/tag/dynamic/index.html index 31a2502..638ba5d 100644 --- a/src/data/blog/tag/dynamic/index.html +++ b/src/data/blog/tag/dynamic/index.html @@ -7,13 +7,13 @@
+
I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.
You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:
C#
diff --git a/src/data/blog/tag/edge/index.html b/src/data/blog/tag/edge/index.html index c60c67d..129ebd1 100644 --- a/src/data/blog/tag/edge/index.html +++ b/src/data/blog/tag/edge/index.html @@ -7,13 +7,13 @@
+
I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.
You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:
C#
diff --git a/src/data/blog/tag/edges/index.html b/src/data/blog/tag/edges/index.html index 8f3f76e..3dc5f77 100644 --- a/src/data/blog/tag/edges/index.html +++ b/src/data/blog/tag/edges/index.html @@ -7,13 +7,13 @@
+
Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.
The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:
C#
@@ -90,7 +90,7 @@ End Sub End SubNaturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.
-Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
+Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
]]>
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
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
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:
-
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:
-
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!
diff --git a/src/data/blog/tag/efficient-work-on-computer/index.html b/src/data/blog/tag/efficient-work-on-computer/index.html index 6c0e7f5..1515f75 100644 --- a/src/data/blog/tag/efficient-work-on-computer/index.html +++ b/src/data/blog/tag/efficient-work-on-computer/index.html @@ -7,13 +7,13 @@
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
Default list without grid lines below items
-List with grid lines added
Default list without grid lines below items
+List with grid lines added
Setting grid lines in Better ListView is easy. Simply make sure you are using Details view (the default view). Then you can set GridLines property to one of the following values:
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
Disabled state
Read-only state
Normal state
Disabled 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.
diff --git a/src/data/blog/tag/enabled/index.html b/src/data/blog/tag/enabled/index.html index 5fa3b00..7e5cba0 100644 --- a/src/data/blog/tag/enabled/index.html +++ b/src/data/blog/tag/enabled/index.html @@ -7,13 +7,13 @@Alternating Rows
+Alternating Rows
Lists with alternating row colors are more readable. It is very simple to implement alternating rows in Better ListView.
Simply add DrawItemBackground event handler and fill background on odd/even items:
diff --git a/src/data/blog/tag/even/index.html b/src/data/blog/tag/even/index.html index 6570e29..f61b885 100644 --- a/src/data/blog/tag/even/index.html +++ b/src/data/blog/tag/even/index.html @@ -7,13 +7,13 @@
+
Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.
The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:
C#
@@ -90,7 +90,7 @@ End Sub End SubNaturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.
-Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
+Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
]]>
There are two controls derived from BetterListView. One for the navigation pane (folder tree on left side) and one for the file view (on the right side).
+
There are two controls derived from BetterListView. One for the navigation pane (folder tree on left side) and one for the file view (on the right side).
The FolderListView control allows browsing through virtual folders as well as folders on removable drives. We needed this control in our products because .NET does not provide any similar managed control (there is only FolderBrowserDialog, but we actually need a control).
You can use it for your purposes as well, it is available in Better ListView Samples source code.
Many features of Better ListView can be used to enhance file browsing, for example:
@@ -169,7 +169,7 @@ End SubCompared to tree-like structure, user can still bind an IList to Better ListView or serialize/traverse through the whole item “hierarchy” with a simple foreach block.
.NET 2.0 supports visual styles through its VisualStyleElement and VisualStyleRenderer classes, but this support is limited to basic elements. When it comes to shiny new elements that can be seen in Windows Explorer (e.g. triangular expando buttons or styles group headers), one have to hack into Windows theme to obtain correct constants. We did this nasty work to bring user visual style that matches exactly what he sees in native controls:
-
Visual Style Elements for Groups
Visual Style Elements for Groups
The picture shows all the elements used in “Groups” and “Item Hierarchy” features. As You can see, it is a LOT. Only group header alone has 15 (!) states that should be drawn each in its specific situation. And Better ListView will handle all of them automatically for you.
We’ve taken customized themes into consideration, as well as older themes like “Vista Basic” or “XP Luna” or “Classic”. In all cases, we test control display thoroughly to obtain consistent results (a solid reference for us is a good old Windows Explorer as it shows most up-to-date wonders of native ListView control in each version of Windows at one place).
]]>
+
Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.
The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:
C#
@@ -90,7 +90,7 @@ End Sub End SubNaturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.
-Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
+Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
]]>
+
Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.
The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:
C#
@@ -90,7 +90,7 @@ End Sub End SubNaturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.
-Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
+Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
]]>
+
I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.
You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:
C#
diff --git a/src/data/blog/tag/fading/index.html b/src/data/blog/tag/fading/index.html index da0d271..d9f0a31 100644 --- a/src/data/blog/tag/fading/index.html +++ b/src/data/blog/tag/fading/index.html @@ -7,13 +7,13 @@We added easy to understand samples for both C# and Visual Basic.
You can simply follow a link from start menu to open the Visual Studio project for your favourite language, and play with all the features of Better ListView.
-C# and VB Samples projects in Solution Explorer
C# and VB Samples projects in Solution Explorer
We added a Quick Start Tutorial to help you with setup, activation and integration of Better ListView in your projects, as well as many entirely new chapters in the documentation.
diff --git a/src/data/blog/tag/fast-listview/index.html b/src/data/blog/tag/fast-listview/index.html index abdbb3b..8009de9 100644 --- a/src/data/blog/tag/fast-listview/index.html +++ b/src/data/blog/tag/fast-listview/index.html @@ -7,13 +7,13 @@We will also take a look on smoother Visual Studio integration, so you can see Better ListView ready in toolbox just after installation (we have to deal with Visual Studio Packages, which is quite an esoteric topic). If Better ListView doesn’t currently appear in your Visual Studio toolbox automatically, you can just right-click the toolbox window, and use “Choose Items” to add the DLL file yourself.
Some background info for the more curious of you: Version 1.5 of Better ListView was very fast. It was so fast because every item in the list had precisely the same size. Some operations, like hit testing, was done in constant time and no extra measurement of individual items was necessary. The new major 2.0 version of Better ListView supports items with variable sizes, and irregular layout consisting of grouped items. However, we observed that even in complex settings, there are just few “types” of items – for example, there are only three possible item sizes when using multi-line items with up to three lines of text. Our optimizations will thus be focused on taking advantage of this to reduce most expensive operations back to constant time complexity.
-photo by Michael Roper
photo by Michael Roper
We will also take a look on smoother Visual Studio integration, so you can see Better ListView ready in toolbox just after installation (we have to deal with Visual Studio Packages, which is quite an esoteric topic). If Better ListView doesn’t currently appear in your Visual Studio toolbox automatically, you can just right-click the toolbox window, and use “Choose Items” to add the DLL file yourself.
Some background info for the more curious of you: Version 1.5 of Better ListView was very fast. It was so fast because every item in the list had precisely the same size. Some operations, like hit testing, was done in constant time and no extra measurement of individual items was necessary. The new major 2.0 version of Better ListView supports items with variable sizes, and irregular layout consisting of grouped items. However, we observed that even in complex settings, there are just few “types” of items – for example, there are only three possible item sizes when using multi-line items with up to three lines of text. Our optimizations will thus be focused on taking advantage of this to reduce most expensive operations back to constant time complexity.
-photo by Michael Roper
photo by Michael Roper
Hierarchical items in two groups
+Hierarchical items in two groups
We are currently working hard on finishing Better ListView version 2.0 which will add new features: Support for groups, tree-like item structure (tree nodes are collapsible, as expected), and multi-line items.
We expect to release this upgrade in about a month. It will be a free upgrade for current and new users.
You can even include images into group headers (as you can see in the preview above), which is not possible in .NET ListView.
Groups are collapsible by default and the expand button can be switched off on each group individually.
Here are groups combined with Tile view (the second group is collapsed):
-Groups with Tile view
Groups with Tile view
The previous figure displays vertically oriented groups, but Better ListView also support horizontally oriented groups in the List mode:
-Groups with List view
Groups with List view
We put special effort to mimic the group display and behavior of Windows Explorer. The group headers can display all of the 15 group header states available in Windows visual style and their display is governed by the same logic as in the ListView counterpart.
The group headers always look perfect and native, right out of the box. You don’t need to tweak anything.
This works in the similar way as in the standard TreeView control. Each item (or node) has property called ChildItems which can be filled with new BetterListViewItem instances. SubItems collection can still be used in either items and child-items (child items are treated in the very same way as their parents).
Item hierarchy can be combined with Groups feature as seen in the first preview.
Multi-line items
Multi-line items
A simple setting of item layout (MaximumTextLines property) allows breaking item text into several lines (up to the specified value). When the text is longer than MaximumTextLines, then the default trimming method is used (one from the TextTrimming enumeration: None, TrimCharacter, TrimWord, EllipsisCharacter, EllipsisWord, EllipsisPath).
Multi-line text can be used in every view and also in column headers.
+
Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.
The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:
C#
@@ -90,7 +90,7 @@ End Sub End SubNaturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.
-Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
+Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
]]>
There are two controls derived from BetterListView. One for the navigation pane (folder tree on left side) and one for the file view (on the right side).
+
There are two controls derived from BetterListView. One for the navigation pane (folder tree on left side) and one for the file view (on the right side).
The FolderListView control allows browsing through virtual folders as well as folders on removable drives. We needed this control in our products because .NET does not provide any similar managed control (there is only FolderBrowserDialog, but we actually need a control).
You can use it for your purposes as well, it is available in Better ListView Samples source code.
Many features of Better ListView can be used to enhance file browsing, for example:
diff --git a/src/data/blog/tag/file/index.html b/src/data/blog/tag/file/index.html index 1ee9fff..0d64258 100644 --- a/src/data/blog/tag/file/index.html +++ b/src/data/blog/tag/file/index.html @@ -7,13 +7,13 @@
+
Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.
The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:
C#
@@ -90,7 +90,7 @@ End Sub End SubNaturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.
-Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
+Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
]]>
+
Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.
The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:
C#
@@ -90,7 +90,7 @@ End Sub End SubNaturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.
-Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
+Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
]]>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:
-
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:
-
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!
diff --git a/src/data/blog/tag/focus/index.html b/src/data/blog/tag/focus/index.html index d674032..ba9d813 100644 --- a/src/data/blog/tag/focus/index.html +++ b/src/data/blog/tag/focus/index.html @@ -7,13 +7,13 @@Dynamic resizing of the focused item
Dynamic resizing of the focused item
We also introduced FocusedItemChanged event, so that you can detect when focus has moved from one element (item / sub-item / group) to another.
These features can be combined to display only the focused item with more details to save space code of the FocusedItemChanged event handler may look like this:
C#
diff --git a/src/data/blog/tag/focused/index.html b/src/data/blog/tag/focused/index.html index 1e7f59a..6f53f01 100644 --- a/src/data/blog/tag/focused/index.html +++ b/src/data/blog/tag/focused/index.html @@ -7,13 +7,13 @@The component is fully customizable and by default inherits native Windows theme. We tested it on Windows 8 with success:
-Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser contains default implementation for loading thumbnail images from disk. If you want to gather all images from a given folder (say “c:\images”), display them in Better Thumbnail Browser and load them on background, the code is particularly simple:
thumbnailBrowser.Path = "c:\\images";@@ -88,9 +88,9 @@
There are two controls derived from BetterListView. One for the navigation pane (folder tree on left side) and one for the file view (on the right side).
+
There are two controls derived from BetterListView. One for the navigation pane (folder tree on left side) and one for the file view (on the right side).
The FolderListView control allows browsing through virtual folders as well as folders on removable drives. We needed this control in our products because .NET does not provide any similar managed control (there is only FolderBrowserDialog, but we actually need a control).
You can use it for your purposes as well, it is available in Better ListView Samples source code.
Many features of Better ListView can be used to enhance file browsing, for example:
diff --git a/src/data/blog/tag/folder/index.html b/src/data/blog/tag/folder/index.html index b0bab06..3de9976 100644 --- a/src/data/blog/tag/folder/index.html +++ b/src/data/blog/tag/folder/index.html @@ -7,13 +7,13 @@Hot Tracking
This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>
+
I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.
You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:
C#
diff --git a/src/data/blog/tag/gradient/index.html b/src/data/blog/tag/gradient/index.html index 8d8e981..e38077d 100644 --- a/src/data/blog/tag/gradient/index.html +++ b/src/data/blog/tag/gradient/index.html @@ -7,13 +7,13 @@Default list without grid lines below items
-List with grid lines added
Default list without grid lines below items
+List with grid lines added
Setting grid lines in Better ListView is easy. Simply make sure you are using Details view (the default view). Then you can set GridLines property to one of the following values:
Default list without grid lines below items
-List with grid lines added
Default list without grid lines below items
+List with grid lines added
Setting grid lines in Better ListView is easy. Simply make sure you are using Details view (the default view). Then you can set GridLines property to one of the following values:
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.
+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.
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
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.
@@ -67,7 +67,7 @@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#
diff --git a/src/data/blog/tag/group-header/index.html b/src/data/blog/tag/group-header/index.html index b290a2a..06a6a5b 100644 --- a/src/data/blog/tag/group-header/index.html +++ b/src/data/blog/tag/group-header/index.html @@ -7,13 +7,13 @@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.
+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.
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
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.
@@ -67,7 +67,7 @@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#
diff --git a/src/data/blog/tag/group/index.html b/src/data/blog/tag/group/index.html index 7f34902..f940654 100644 --- a/src/data/blog/tag/group/index.html +++ b/src/data/blog/tag/group/index.html @@ -7,13 +7,13 @@Item hierarchy with multi-line items in groups
Item hierarchy with multi-line items in groups
We have added four new major features:
List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.
Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.
Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.
-Thumbnails in groups
DataTable bound to Better ListView
Thumbnails in groups
DataTable bound to Better ListView
We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.
]]>Contrary to many custom controls, Better ListView adjusts itself to current theme even if the theme is changed in run-time. For example, when user of your application switches theme from Classic to Aero, or to some other custom theme with elements of different sizes, Better ListView re-measures itself for the new theme smoothly. Reloading the component or re-starting the application is not necessary.
One of the sweet bonuses of using Better ListView 2.0 instead of regular .NET ListView is the full Groups functionality in all themes and all versions of the operating system. For example, groups are not collapsible in standard ListView on Windows XP and even does not support images. In Better ListView, however, you are able to unleash full potential of groups everywhere.
The following images show Better ListView in different Windows themes: Classic, XP Luna and Aero:
-Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
]]>
Hierarchical items in two groups
+Hierarchical items in two groups
We are currently working hard on finishing Better ListView version 2.0 which will add new features: Support for groups, tree-like item structure (tree nodes are collapsible, as expected), and multi-line items.
We expect to release this upgrade in about a month. It will be a free upgrade for current and new users.
You can even include images into group headers (as you can see in the preview above), which is not possible in .NET ListView.
Groups are collapsible by default and the expand button can be switched off on each group individually.
Here are groups combined with Tile view (the second group is collapsed):
-Groups with Tile view
Groups with Tile view
The previous figure displays vertically oriented groups, but Better ListView also support horizontally oriented groups in the List mode:
-Groups with List view
Groups with List view
We put special effort to mimic the group display and behavior of Windows Explorer. The group headers can display all of the 15 group header states available in Windows visual style and their display is governed by the same logic as in the ListView counterpart.
The group headers always look perfect and native, right out of the box. You don’t need to tweak anything.
This works in the similar way as in the standard TreeView control. Each item (or node) has property called ChildItems which can be filled with new BetterListViewItem instances. SubItems collection can still be used in either items and child-items (child items are treated in the very same way as their parents).
Item hierarchy can be combined with Groups feature as seen in the first preview.
Multi-line items
Multi-line items
A simple setting of item layout (MaximumTextLines property) allows breaking item text into several lines (up to the specified value). When the text is longer than MaximumTextLines, then the default trimming method is used (one from the TextTrimming enumeration: None, TrimCharacter, TrimWord, EllipsisCharacter, EllipsisWord, EllipsisPath).
Multi-line text can be used in every view and also in column headers.
Compared to tree-like structure, user can still bind an IList to Better ListView or serialize/traverse through the whole item “hierarchy” with a simple foreach block.
.NET 2.0 supports visual styles through its VisualStyleElement and VisualStyleRenderer classes, but this support is limited to basic elements. When it comes to shiny new elements that can be seen in Windows Explorer (e.g. triangular expando buttons or styles group headers), one have to hack into Windows theme to obtain correct constants. We did this nasty work to bring user visual style that matches exactly what he sees in native controls:
-Visual Style Elements for Groups
Visual Style Elements for Groups
The picture shows all the elements used in “Groups” and “Item Hierarchy” features. As You can see, it is a LOT. Only group header alone has 15 (!) states that should be drawn each in its specific situation. And Better ListView will handle all of them automatically for you.
We’ve taken customized themes into consideration, as well as older themes like “Vista Basic” or “XP Luna” or “Classic”. In all cases, we test control display thoroughly to obtain consistent results (a solid reference for us is a good old Windows Explorer as it shows most up-to-date wonders of native ListView control in each version of Windows at one place).
]]> diff --git a/src/data/blog/tag/groups/index.html b/src/data/blog/tag/groups/index.html index 52622e7..5d78122 100644 --- a/src/data/blog/tag/groups/index.html +++ b/src/data/blog/tag/groups/index.html @@ -7,13 +7,13 @@Centered images in Better ListView
Centered images in Better ListView
Better ListView 3.11 supports aligning images in sub-items and columns to center. Simply set AlignHorizontalImage property of an sub-item or column to BetterListViewImageAlignmentHorizontal.OverlayCenter.
The image will be centered inside available space regardless of text.
This is useful for sub-items and column headers consisting of image only.
@@ -71,8 +71,8 @@Hiding Column Headers
Hiding Column Headers
To hide column headers, simply set HeaderStyle property to BetterListViewHeaderStyle.None. There are other possible styles for all column headers:
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.
+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.
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
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.
@@ -139,7 +139,7 @@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#
diff --git a/src/data/blog/tag/header/index.html b/src/data/blog/tag/header/index.html index 51ea74e..a4aa693 100644 --- a/src/data/blog/tag/header/index.html +++ b/src/data/blog/tag/header/index.html @@ -7,13 +7,13 @@Hiding Column Headers
Hiding Column Headers
To hide column headers, simply set HeaderStyle property to BetterListViewHeaderStyle.None. There are other possible styles for all column headers:
Better ListView custom scroll bar size
-Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
+Better ListView custom scroll bar size
+Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
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:
diff --git a/src/data/blog/tag/height/index.html b/src/data/blog/tag/height/index.html index 27e7cfd..fbf0160 100644 --- a/src/data/blog/tag/height/index.html +++ b/src/data/blog/tag/height/index.html @@ -7,13 +7,13 @@Hiding Column Headers
Hiding Column Headers
To hide column headers, simply set HeaderStyle property to BetterListViewHeaderStyle.None. There are other possible styles for all column headers:
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.
@@ -109,13 +109,13 @@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.
+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.
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
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.
@@ -136,7 +136,7 @@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#
@@ -171,11 +171,11 @@So how we neatly hide a column?
We introduced Column Hiding feature in the version 2.0.1. You can simply call Hide() on your column header instance and you’re done! There is also corresponding Show() method provided. Or you can set boolean Visible property. Now the column and all subsequent sub-items are hidden from view (although they are still present in data, of course):
-
Hiding column via context menu...
Hiding column via context menu...
-
...and the sixth column gets hidden.
...and the sixth column gets hidden.
- + ]]>
Hiding Column Headers
Hiding Column Headers
To hide column headers, simply set HeaderStyle property to BetterListViewHeaderStyle.None. There are other possible styles for all column headers:
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.
@@ -110,11 +110,11 @@So how we neatly hide a column?
We introduced Column Hiding feature in the version 2.0.1. You can simply call Hide() on your column header instance and you’re done! There is also corresponding Show() method provided. Or you can set boolean Visible property. Now the column and all subsequent sub-items are hidden from view (although they are still present in data, of course):
-
Hiding column via context menu...
Hiding column via context menu...
-
...and the sixth column gets hidden.
...and the sixth column gets hidden.
- + ]]>
Item hierarchy with multi-line items in groups
Item hierarchy with multi-line items in groups
We have added four new major features:
List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.
Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.
Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.
-Thumbnails in groups
DataTable bound to Better ListView
Thumbnails in groups
DataTable bound to Better ListView
We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.
]]>Compared to tree-like structure, user can still bind an IList to Better ListView or serialize/traverse through the whole item “hierarchy” with a simple foreach block.
.NET 2.0 supports visual styles through its VisualStyleElement and VisualStyleRenderer classes, but this support is limited to basic elements. When it comes to shiny new elements that can be seen in Windows Explorer (e.g. triangular expando buttons or styles group headers), one have to hack into Windows theme to obtain correct constants. We did this nasty work to bring user visual style that matches exactly what he sees in native controls:
-Visual Style Elements for Groups
Visual Style Elements for Groups
The picture shows all the elements used in “Groups” and “Item Hierarchy” features. As You can see, it is a LOT. Only group header alone has 15 (!) states that should be drawn each in its specific situation. And Better ListView will handle all of them automatically for you.
We’ve taken customized themes into consideration, as well as older themes like “Vista Basic” or “XP Luna” or “Classic”. In all cases, we test control display thoroughly to obtain consistent results (a solid reference for us is a good old Windows Explorer as it shows most up-to-date wonders of native ListView control in each version of Windows at one place).
]]>Search Highlight Feature
Search Highlight Feature
To enable the highlight, simply add UpdateSearchHighlight option in the search settings:
C#
@@ -60,9 +60,9 @@ ListView.SearchSettings = New BetterListViewSearchSettings(Every item contains information about the match in the BetterListViewItem.SearchHighlight property. When BetterListViewItem.SearchHighlight.IsEmpty is true, the item was not matched by the search. Otherwise it contains information about the matched substring: its index and number of characters.
Highlight colors can be adjusted by three properties: ColorSearchHighlight, ColorSearchHighlightBorder and ColorSearchHighlightText:
-Search Highlight Properties
Search Highlight Properties
The display can be adjusted even further with owner drawing:
-Customized Search Highlight Feature
Customized Search Highlight Feature
Here we have used ellipses drawn on item background by modifying OnDrawItem and OnDrawItemBackground methods of BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
diff --git a/src/data/blog/tag/highlight/index.html b/src/data/blog/tag/highlight/index.html
index 023612e..7edc66f 100644
--- a/src/data/blog/tag/highlight/index.html
+++ b/src/data/blog/tag/highlight/index.html
@@ -7,13 +7,13 @@
Search Highlight Feature
Search Highlight Feature
To enable the highlight, simply add UpdateSearchHighlight option in the search settings:
C#
@@ -60,9 +60,9 @@ ListView.SearchSettings = New BetterListViewSearchSettings(Every item contains information about the match in the BetterListViewItem.SearchHighlight property. When BetterListViewItem.SearchHighlight.IsEmpty is true, the item was not matched by the search. Otherwise it contains information about the matched substring: its index and number of characters.
Highlight colors can be adjusted by three properties: ColorSearchHighlight, ColorSearchHighlightBorder and ColorSearchHighlightText:
-Search Highlight Properties
Search Highlight Properties
The display can be adjusted even further with owner drawing:
-Customized Search Highlight Feature
Customized Search Highlight Feature
Here we have used ellipses drawn on item background by modifying OnDrawItem and OnDrawItemBackground methods of BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
diff --git a/src/data/blog/tag/highlighting/index.html b/src/data/blog/tag/highlighting/index.html
index 888f26d..a29a63f 100644
--- a/src/data/blog/tag/highlighting/index.html
+++ b/src/data/blog/tag/highlighting/index.html
@@ -7,13 +7,13 @@
Hot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>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.
+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.
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
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.
@@ -192,7 +192,7 @@ End SubHere 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#
@@ -223,9 +223,9 @@ End SubOwner drawing in Better ListView 2.3.0 and higher allows you to draw elements (column headers, items, sub-items and groups) in any state you wish (hot, selected, focused and any combination of the three).
For example, we would like to highlight several items in one Better ListView depending on hovered item in other Better ListView:
-Better ListView shows multiple hot items
Better ListView shows multiple hot items
Items can be also be drawn as if the control is focused, enabled or disabled. This feature can be applied when you wish to display items in highlighted state even if Better ListView is not focused:
-Better ListView keeps selected items highlighted
Better ListView keeps selected items highlighted
We implemented the first sample (showing mulitple hot items) by inheriting from BetterListView, making a new class called HotListView. The implementation is very simple:
C#
diff --git a/src/data/blog/tag/hot/index.html b/src/data/blog/tag/hot/index.html index 4635cc3..fe9636b 100644 --- a/src/data/blog/tag/hot/index.html +++ b/src/data/blog/tag/hot/index.html @@ -7,13 +7,13 @@Hot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>Hot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>Hot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>Hot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>Hot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>Hot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>Better ListView with bound list
Better ListView with bound list
Say you have a simple Server type:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -129,7 +129,7 @@ listView.DataSource = servers
listView.ImageList = imageList
[/vb]
Let’s take a look on the result:
-Better ListView with bound list
Better ListView with bound list
The columns were auto-generated and Server properties properly converted to item and sub-item labels. The generated column header labels are just names of the corresponding properties (ServerName, ServerStatus). You can make the names more convenient by providing DisplayNameAttribute on the respective properties:
C#
@@ -173,7 +173,7 @@ End Property…
[/vb]
Now the column names are more user friendly:
-Better ListView with bound list
Better ListView with bound list
We will finally add state images (instead of the numbers) and highlight some items. To do that, we have to override DataCreateItem method in a class derived from BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -228,7 +228,7 @@ Public Class CustomListView
End Class
[/vb]
Now the control displays adjusted images and a highlighted item:
-Better ListView with bound list
Better ListView with bound list
Note that you can customize data binding the other way as well by overriding the DataUpdateSubItemToSource method. This method is responsible for updating the bound data source when item/sub-item value have been modified.
]]>Better ListView with bound list
Better ListView with bound list
Say you have a simple Server type:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -129,7 +129,7 @@ listView.DataSource = servers
listView.ImageList = imageList
[/vb]
Let’s take a look on the result:
-Better ListView with bound list
Better ListView with bound list
The columns were auto-generated and Server properties properly converted to item and sub-item labels. The generated column header labels are just names of the corresponding properties (ServerName, ServerStatus). You can make the names more convenient by providing DisplayNameAttribute on the respective properties:
C#
@@ -173,7 +173,7 @@ End Property…
[/vb]
Now the column names are more user friendly:
-Better ListView with bound list
Better ListView with bound list
We will finally add state images (instead of the numbers) and highlight some items. To do that, we have to override DataCreateItem method in a class derived from BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -228,7 +228,7 @@ Public Class CustomListView
End Class
[/vb]
Now the control displays adjusted images and a highlighted item:
-Better ListView with bound list
Better ListView with bound list
Note that you can customize data binding the other way as well by overriding the DataUpdateSubItemToSource method. This method is responsible for updating the bound data source when item/sub-item value have been modified.
]]>Our great inspiration for designing Better ListView is nothing less than the mighty Windows Explorer. This file manager uses obviously much more powerful control that the regular .NET list-view alone is.
It supports some extra views, line Contents and Extra Large Icons. It is also possible to adjust image size by rolling a mouse wheel while holding Control key.
Better ListView has the capability of displaying item icons with arbitrary sizes, but we also extended it with one extra view: Thumbnails:
-Thumbnails Sample
Thumbnails Sample
This view aligns items in the center while keeping constant spacing between items. Thumbnails also keep just single line of text for compactness. On the other hand, LargeIcon view varies horizontal space between items to fill client area evenly and breaks long text into several lines.
The constant spacing is inspired by various photo managers, where image thumbnails are better viewed side-by-side (and the view looks also more organized).
Image thumbnails also look better with some kind border or frame. We added this new feature in Better ListView 1.5 and it works in all views. There are several pre-defined types of borders, but user can draw his own:
@@ -53,10 +53,10 @@Thumbnails use DropShadow by default, but it can be adjusted for every view separately. One can also adjust thickness of the border/shadow and define custom spacing around image.
Take a look at one possible setting:
-Image Borders
Image Borders
This is SingleOffset border of width 3 pixels. Notice that also column header images can have its borders (these are SymmetricShadow).
When the border is defined and image size should be kept the same, some spacing have to be added around image. You can adjust this spacing to draw you own borders or any additional graphics (such as overlay icons). Here is an example –
-Thumbnail with Extra Icons
Thumbnail with Extra Icons
You can download Better ListView and play with it yourself.
]]>Centered images in Better ListView
+Centered images in Better ListView
Better ListView 3.11 supports aligning images in sub-items and columns to center. Simply set AlignHorizontalImage property of an sub-item or column to BetterListViewImageAlignmentHorizontal.OverlayCenter.
The image will be centered inside available space regardless of text.
This is useful for sub-items and column headers consisting of image only.
@@ -92,7 +92,7 @@The component is fully customizable and by default inherits native Windows theme. We tested it on Windows 8 with success:
-Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser contains default implementation for loading thumbnail images from disk. If you want to gather all images from a given folder (say “c:\images”), display them in Better Thumbnail Browser and load them on background, the code is particularly simple:
thumbnailBrowser.Path = "c:\\images";diff --git a/src/data/blog/tag/image/index.html b/src/data/blog/tag/image/index.html index fb1c4d0..da66ca0 100644 --- a/src/data/blog/tag/image/index.html +++ b/src/data/blog/tag/image/index.html @@ -7,13 +7,13 @@
Better ListView with bound list
Better ListView with bound list
Say you have a simple Server type:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -129,7 +129,7 @@ listView.DataSource = servers
listView.ImageList = imageList
[/vb]
Let’s take a look on the result:
-Better ListView with bound list
Better ListView with bound list
The columns were auto-generated and Server properties properly converted to item and sub-item labels. The generated column header labels are just names of the corresponding properties (ServerName, ServerStatus). You can make the names more convenient by providing DisplayNameAttribute on the respective properties:
C#
@@ -173,7 +173,7 @@ End Property…
[/vb]
Now the column names are more user friendly:
-Better ListView with bound list
Better ListView with bound list
We will finally add state images (instead of the numbers) and highlight some items. To do that, we have to override DataCreateItem method in a class derived from BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -228,7 +228,7 @@ Public Class CustomListView
End Class
[/vb]
Now the control displays adjusted images and a highlighted item:
-Better ListView with bound list
Better ListView with bound list
Note that you can customize data binding the other way as well by overriding the DataUpdateSubItemToSource method. This method is responsible for updating the bound data source when item/sub-item value have been modified.
]]>Better ListView with bound list
Better ListView with bound list
Say you have a simple Server type:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -129,7 +129,7 @@ listView.DataSource = servers
listView.ImageList = imageList
[/vb]
Let’s take a look on the result:
-Better ListView with bound list
Better ListView with bound list
The columns were auto-generated and Server properties properly converted to item and sub-item labels. The generated column header labels are just names of the corresponding properties (ServerName, ServerStatus). You can make the names more convenient by providing DisplayNameAttribute on the respective properties:
C#
@@ -173,7 +173,7 @@ End Property…
[/vb]
Now the column names are more user friendly:
-Better ListView with bound list
Better ListView with bound list
We will finally add state images (instead of the numbers) and highlight some items. To do that, we have to override DataCreateItem method in a class derived from BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -228,7 +228,7 @@ Public Class CustomListView
End Class
[/vb]
Now the control displays adjusted images and a highlighted item:
-Better ListView with bound list
Better ListView with bound list
Note that you can customize data binding the other way as well by overriding the DataUpdateSubItemToSource method. This method is responsible for updating the bound data source when item/sub-item value have been modified.
]]>Centered images in Better ListView
+Centered images in Better ListView
Better ListView 3.11 supports aligning images in sub-items and columns to center. Simply set AlignHorizontalImage property of an sub-item or column to BetterListViewImageAlignmentHorizontal.OverlayCenter.
The image will be centered inside available space regardless of text.
This is useful for sub-items and column headers consisting of image only.
@@ -73,8 +73,8 @@Better ListView with bound list
Better ListView with bound list
Say you have a simple Server type:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -161,7 +161,7 @@ listView.DataSource = servers
listView.ImageList = imageList
[/vb]
Let’s take a look on the result:
-Better ListView with bound list
Better ListView with bound list
The columns were auto-generated and Server properties properly converted to item and sub-item labels. The generated column header labels are just names of the corresponding properties (ServerName, ServerStatus). You can make the names more convenient by providing DisplayNameAttribute on the respective properties:
C#
@@ -205,7 +205,7 @@ End Property…
[/vb]
Now the column names are more user friendly:
-Better ListView with bound list
Better ListView with bound list
We will finally add state images (instead of the numbers) and highlight some items. To do that, we have to override DataCreateItem method in a class derived from BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -260,7 +260,7 @@ Public Class CustomListView
End Class
[/vb]
Now the control displays adjusted images and a highlighted item:
-Better ListView with bound list
Better ListView with bound list
Note that you can customize data binding the other way as well by overriding the DataUpdateSubItemToSource method. This method is responsible for updating the bound data source when item/sub-item value have been modified.
]]>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.
]]>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:
-
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:
-
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!
diff --git a/src/data/blog/tag/internet-addiction/index.html b/src/data/blog/tag/internet-addiction/index.html index c2a9bc7..c23d94f 100644 --- a/src/data/blog/tag/internet-addiction/index.html +++ b/src/data/blog/tag/internet-addiction/index.html @@ -7,13 +7,13 @@Hiding Column Headers
Hiding Column Headers
To hide column headers, simply set HeaderStyle property to BetterListViewHeaderStyle.None. There are other possible styles for all column headers:
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.
diff --git a/src/data/blog/tag/invisible/index.html b/src/data/blog/tag/invisible/index.html index 0e562dc..ec135d7 100644 --- a/src/data/blog/tag/invisible/index.html +++ b/src/data/blog/tag/invisible/index.html @@ -7,13 +7,13 @@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:
diff --git a/src/data/blog/tag/item-height-in-list-view/index.html b/src/data/blog/tag/item-height-in-list-view/index.html index a384d97..8540bad 100644 --- a/src/data/blog/tag/item-height-in-list-view/index.html +++ b/src/data/blog/tag/item-height-in-list-view/index.html @@ -7,13 +7,13 @@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:
diff --git a/src/data/blog/tag/item-height/index.html b/src/data/blog/tag/item-height/index.html index 07002ea..0956757 100644 --- a/src/data/blog/tag/item-height/index.html +++ b/src/data/blog/tag/item-height/index.html @@ -7,13 +7,13 @@Item hierarchy with multi-line items in groups
Item hierarchy with multi-line items in groups
We have added four new major features:
List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.
Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.
Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.
-Thumbnails in groups
DataTable bound to Better ListView
Thumbnails in groups
DataTable bound to Better ListView
We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.
]]>Hierarchical items in two groups
+Hierarchical items in two groups
We are currently working hard on finishing Better ListView version 2.0 which will add new features: Support for groups, tree-like item structure (tree nodes are collapsible, as expected), and multi-line items.
We expect to release this upgrade in about a month. It will be a free upgrade for current and new users.
You can even include images into group headers (as you can see in the preview above), which is not possible in .NET ListView.
Groups are collapsible by default and the expand button can be switched off on each group individually.
Here are groups combined with Tile view (the second group is collapsed):
-Groups with Tile view
Groups with Tile view
The previous figure displays vertically oriented groups, but Better ListView also support horizontally oriented groups in the List mode:
-Groups with List view
Groups with List view
We put special effort to mimic the group display and behavior of Windows Explorer. The group headers can display all of the 15 group header states available in Windows visual style and their display is governed by the same logic as in the ListView counterpart.
The group headers always look perfect and native, right out of the box. You don’t need to tweak anything.
This works in the similar way as in the standard TreeView control. Each item (or node) has property called ChildItems which can be filled with new BetterListViewItem instances. SubItems collection can still be used in either items and child-items (child items are treated in the very same way as their parents).
Item hierarchy can be combined with Groups feature as seen in the first preview.
Multi-line items
Multi-line items
A simple setting of item layout (MaximumTextLines property) allows breaking item text into several lines (up to the specified value). When the text is longer than MaximumTextLines, then the default trimming method is used (one from the TextTrimming enumeration: None, TrimCharacter, TrimWord, EllipsisCharacter, EllipsisWord, EllipsisPath).
Multi-line text can be used in every view and also in column headers.
Our Better ListView control supports drag and drop item reordering out of the box. Zero code is needed – all you have to do is to set the property BetterListViewItemReorderMode to Enabled.
It works just like this:
-
You can just download and install Better ListView, and start using it right away. It can do everything the regular .NET listview component can, and much more.
See more in the Drag Drop Sample that is included with Better ListView. It includes source code.
]]> diff --git a/src/data/blog/tag/item-reorder/index.html b/src/data/blog/tag/item-reorder/index.html index e2f5f30..b082bb6 100644 --- a/src/data/blog/tag/item-reorder/index.html +++ b/src/data/blog/tag/item-reorder/index.html @@ -7,13 +7,13 @@Our Better ListView control supports drag and drop item reordering out of the box. Zero code is needed – all you have to do is to set the property BetterListViewItemReorderMode to Enabled.
It works just like this:
-
You can just download and install Better ListView, and start using it right away. It can do everything the regular .NET listview component can, and much more.
See more in the Drag Drop Sample that is included with Better ListView. It includes source code.
]]> diff --git a/src/data/blog/tag/item-sort/index.html b/src/data/blog/tag/item-sort/index.html index 11c2560..2ee6cf7 100644 --- a/src/data/blog/tag/item-sort/index.html +++ b/src/data/blog/tag/item-sort/index.html @@ -7,13 +7,13 @@Hot Tracking
This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>Customized item selection.
+Customized item selection.
-
By default, Better ListView uses system theme for drawing selections.
+By default, Better ListView uses system theme for drawing selections.
To draw custom selection, you can use owner drawing capabilities of Better ListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -248,8 +248,8 @@ End Class
Dynamic resizing of the focused item
Dynamic resizing of the focused item
We also introduced FocusedItemChanged event, so that you can detect when focus has moved from one element (item / sub-item / group) to another.
These features can be combined to display only the focused item with more details to save space code of the FocusedItemChanged event handler may look like this:
C#
@@ -326,7 +326,7 @@ End SubCompared to tree-like structure, user can still bind an IList to Better ListView or serialize/traverse through the whole item “hierarchy” with a simple foreach block.
.NET 2.0 supports visual styles through its VisualStyleElement and VisualStyleRenderer classes, but this support is limited to basic elements. When it comes to shiny new elements that can be seen in Windows Explorer (e.g. triangular expando buttons or styles group headers), one have to hack into Windows theme to obtain correct constants. We did this nasty work to bring user visual style that matches exactly what he sees in native controls:
-Visual Style Elements for Groups
Visual Style Elements for Groups
The picture shows all the elements used in “Groups” and “Item Hierarchy” features. As You can see, it is a LOT. Only group header alone has 15 (!) states that should be drawn each in its specific situation. And Better ListView will handle all of them automatically for you.
We’ve taken customized themes into consideration, as well as older themes like “Vista Basic” or “XP Luna” or “Classic”. In all cases, we test control display thoroughly to obtain consistent results (a solid reference for us is a good old Windows Explorer as it shows most up-to-date wonders of native ListView control in each version of Windows at one place).
]]>
+
I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.
You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:
C#
@@ -171,8 +171,8 @@ End ClassHot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -259,7 +259,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>Search Highlight Feature
Search Highlight Feature
To enable the highlight, simply add UpdateSearchHighlight option in the search settings:
C#
@@ -307,9 +307,9 @@ ListView.SearchSettings = New BetterListViewSearchSettings(Every item contains information about the match in the BetterListViewItem.SearchHighlight property. When BetterListViewItem.SearchHighlight.IsEmpty is true, the item was not matched by the search. Otherwise it contains information about the matched substring: its index and number of characters.
Highlight colors can be adjusted by three properties: ColorSearchHighlight, ColorSearchHighlightBorder and ColorSearchHighlightText:
-Search Highlight Properties
Search Highlight Properties
The display can be adjusted even further with owner drawing:
-Customized Search Highlight Feature
Customized Search Highlight Feature
Here we have used ellipses drawn on item background by modifying OnDrawItem and OnDrawItemBackground methods of BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -403,7 +403,7 @@ End Class
Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.
The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:
C#
@@ -449,7 +449,7 @@ End Sub End SubNaturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.
-Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
+Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
]]>Customized item selection.
+Customized item selection.
-
By default, Better ListView uses system theme for drawing selections.
+By default, Better ListView uses system theme for drawing selections.
To draw custom selection, you can use owner drawing capabilities of Better ListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -563,8 +563,8 @@ End Class
Hiding Column Headers
Hiding Column Headers
To hide column headers, simply set HeaderStyle property to BetterListViewHeaderStyle.None. There are other possible styles for all column headers:
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:
@@ -727,9 +727,9 @@ Me.listView.LoadContentBinary(stream)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).
@@ -757,7 +757,7 @@ Me.listView.LoadContentBinary(stream)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.
diff --git a/src/data/blog/tag/items/index.html b/src/data/blog/tag/items/index.html index 174c5b2..20e80fd 100644 --- a/src/data/blog/tag/items/index.html +++ b/src/data/blog/tag/items/index.html @@ -7,13 +7,13 @@
+
Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.
The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:
C#
@@ -90,7 +90,7 @@ End Sub End SubNaturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.
-Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
+Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
]]>
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
+
Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.
The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:
C#
@@ -90,7 +90,7 @@ End Sub End SubNaturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.
-Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
+Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
]]>Better ListView custom scroll bar size
-Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
+Better ListView custom scroll bar size
+Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
Better ListView custom scroll bar size
-Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
+Better ListView custom scroll bar size
+Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
Centered images in Better ListView
+Centered images in Better ListView
Better ListView 3.11 supports aligning images in sub-items and columns to center. Simply set AlignHorizontalImage property of an sub-item or column to BetterListViewImageAlignmentHorizontal.OverlayCenter.
The image will be centered inside available space regardless of text.
This is useful for sub-items and column headers consisting of image only.
diff --git a/src/data/blog/tag/layout/index.html b/src/data/blog/tag/layout/index.html index 7ece1d2..fd550c7 100644 --- a/src/data/blog/tag/layout/index.html +++ b/src/data/blog/tag/layout/index.html @@ -7,13 +7,13 @@Items with multi-line text
Items with multi-line text
Column headers and even groups can contain multi-line text:
-Multi-line text in groups
Multi-line text in groups
So the text can be split on multiple lines not only by wrapping the text, but also by user defined newline characters.
This feature comes out of the box.
The only setting associated with multi-line items is the MaximumTextLines property of the corresponding layout (e.g. BetterListView.LayoutItemsLargeIcon). This property specifies how many lines the text can have and this applies to both wrapped text and text with newline characters. So if you expect you text to have 5 to 20 lines, set the MaximumTextLines property to 20 and you know the items will not get too high while still displaying all the lines.
diff --git a/src/data/blog/tag/lf/index.html b/src/data/blog/tag/lf/index.html index 406c56e..471406c 100644 --- a/src/data/blog/tag/lf/index.html +++ b/src/data/blog/tag/lf/index.html @@ -7,13 +7,13 @@Items with multi-line text
Items with multi-line text
Column headers and even groups can contain multi-line text:
-Multi-line text in groups
Multi-line text in groups
So the text can be split on multiple lines not only by wrapping the text, but also by user defined newline characters.
This feature comes out of the box.
The only setting associated with multi-line items is the MaximumTextLines property of the corresponding layout (e.g. BetterListView.LayoutItemsLargeIcon). This property specifies how many lines the text can have and this applies to both wrapped text and text with newline characters. So if you expect you text to have 5 to 20 lines, set the MaximumTextLines property to 20 and you know the items will not get too high while still displaying all the lines.
diff --git a/src/data/blog/tag/line/index.html b/src/data/blog/tag/line/index.html index cbd29c7..1c41428 100644 --- a/src/data/blog/tag/line/index.html +++ b/src/data/blog/tag/line/index.html @@ -7,13 +7,13 @@Items with multi-line text
Items with multi-line text
Column headers and even groups can contain multi-line text:
-Multi-line text in groups
Multi-line text in groups
So the text can be split on multiple lines not only by wrapping the text, but also by user defined newline characters.
This feature comes out of the box.
The only setting associated with multi-line items is the MaximumTextLines property of the corresponding layout (e.g. BetterListView.LayoutItemsLargeIcon). This property specifies how many lines the text can have and this applies to both wrapped text and text with newline characters. So if you expect you text to have 5 to 20 lines, set the MaximumTextLines property to 20 and you know the items will not get too high while still displaying all the lines.
diff --git a/src/data/blog/tag/linefeed/index.html b/src/data/blog/tag/linefeed/index.html index 80989fe..bfebd3c 100644 --- a/src/data/blog/tag/linefeed/index.html +++ b/src/data/blog/tag/linefeed/index.html @@ -7,13 +7,13 @@Default list without grid lines below items
-List with grid lines added
Default list without grid lines below items
+List with grid lines added
Setting grid lines in Better ListView is easy. Simply make sure you are using Details view (the default view). Then you can set GridLines property to one of the following values:
Hot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>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.
+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.
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
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.
@@ -67,7 +67,7 @@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#
diff --git a/src/data/blog/tag/list-view-group-headers/index.html b/src/data/blog/tag/list-view-group-headers/index.html index 48d1347..d707567 100644 --- a/src/data/blog/tag/list-view-group-headers/index.html +++ b/src/data/blog/tag/list-view-group-headers/index.html @@ -7,13 +7,13 @@Search Highlight Feature
Search Highlight Feature
To enable the highlight, simply add UpdateSearchHighlight option in the search settings:
C#
@@ -60,9 +60,9 @@ ListView.SearchSettings = New BetterListViewSearchSettings(Every item contains information about the match in the BetterListViewItem.SearchHighlight property. When BetterListViewItem.SearchHighlight.IsEmpty is true, the item was not matched by the search. Otherwise it contains information about the matched substring: its index and number of characters.
Highlight colors can be adjusted by three properties: ColorSearchHighlight, ColorSearchHighlightBorder and ColorSearchHighlightText:
-Search Highlight Properties
Search Highlight Properties
The display can be adjusted even further with owner drawing:
-Customized Search Highlight Feature
Customized Search Highlight Feature
Here we have used ellipses drawn on item background by modifying OnDrawItem and OnDrawItemBackground methods of BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
diff --git a/src/data/blog/tag/list/index.html b/src/data/blog/tag/list/index.html
index e3a5e1e..783e4ad 100644
--- a/src/data/blog/tag/list/index.html
+++ b/src/data/blog/tag/list/index.html
@@ -7,13 +7,13 @@
Hierarchical items in two groups
+Hierarchical items in two groups
We are currently working hard on finishing Better ListView version 2.0 which will add new features: Support for groups, tree-like item structure (tree nodes are collapsible, as expected), and multi-line items.
We expect to release this upgrade in about a month. It will be a free upgrade for current and new users.
You can even include images into group headers (as you can see in the preview above), which is not possible in .NET ListView.
Groups are collapsible by default and the expand button can be switched off on each group individually.
Here are groups combined with Tile view (the second group is collapsed):
-Groups with Tile view
Groups with Tile view
The previous figure displays vertically oriented groups, but Better ListView also support horizontally oriented groups in the List mode:
-Groups with List view
Groups with List view
We put special effort to mimic the group display and behavior of Windows Explorer. The group headers can display all of the 15 group header states available in Windows visual style and their display is governed by the same logic as in the ListView counterpart.
The group headers always look perfect and native, right out of the box. You don’t need to tweak anything.
This works in the similar way as in the standard TreeView control. Each item (or node) has property called ChildItems which can be filled with new BetterListViewItem instances. SubItems collection can still be used in either items and child-items (child items are treated in the very same way as their parents).
Item hierarchy can be combined with Groups feature as seen in the first preview.
Multi-line items
Multi-line items
A simple setting of item layout (MaximumTextLines property) allows breaking item text into several lines (up to the specified value). When the text is longer than MaximumTextLines, then the default trimming method is used (one from the TextTrimming enumeration: None, TrimCharacter, TrimWord, EllipsisCharacter, EllipsisWord, EllipsisPath).
Multi-line text can be used in every view and also in column headers.
Better ListView Sub-item Check Boxes
Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
+Better ListView Sub-item Check Boxes
+Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.
Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).
Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.
@@ -73,8 +73,8 @@Default list without grid lines below items
-List with grid lines added
Default list without grid lines below items
+List with grid lines added
Setting grid lines in Better ListView is easy. Simply make sure you are using Details view (the default view). Then you can set GridLines property to one of the following values:
Search Highlight Feature
Search Highlight Feature
To enable the highlight, simply add UpdateSearchHighlight option in the search settings:
C#
@@ -166,9 +166,9 @@ ListView.SearchSettings = New BetterListViewSearchSettings(Every item contains information about the match in the BetterListViewItem.SearchHighlight property. When BetterListViewItem.SearchHighlight.IsEmpty is true, the item was not matched by the search. Otherwise it contains information about the matched substring: its index and number of characters.
Highlight colors can be adjusted by three properties: ColorSearchHighlight, ColorSearchHighlightBorder and ColorSearchHighlightText:
-Search Highlight Properties
Search Highlight Properties
The display can be adjusted even further with owner drawing:
-Customized Search Highlight Feature
Customized Search Highlight Feature
Here we have used ellipses drawn on item background by modifying OnDrawItem and OnDrawItemBackground methods of BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -262,7 +262,7 @@ End Class
Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.
The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:
C#
@@ -308,7 +308,7 @@ End Sub End SubNaturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.
-Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
+Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
]]>The component is fully customizable and by default inherits native Windows theme. We tested it on Windows 8 with success:
-Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser contains default implementation for loading thumbnail images from disk. If you want to gather all images from a given folder (say “c:\images”), display them in Better Thumbnail Browser and load them on background, the code is particularly simple:
thumbnailBrowser.Path = "c:\\images";@@ -390,11 +390,11 @@ End Sub
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.
]]>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
Disabled state
Read-only state
Normal state
Disabled 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.
@@ -458,9 +458,9 @@ End SubItems with multi-line text
Items with multi-line text
Column headers and even groups can contain multi-line text:
-Multi-line text in groups
Multi-line text in groups
So the text can be split on multiple lines not only by wrapping the text, but also by user defined newline characters.
This feature comes out of the box.
The only setting associated with multi-line items is the MaximumTextLines property of the corresponding layout (e.g. BetterListView.LayoutItemsLargeIcon). This property specifies how many lines the text can have and this applies to both wrapped text and text with newline characters. So if you expect you text to have 5 to 20 lines, set the MaximumTextLines property to 20 and you know the items will not get too high while still displaying all the lines.
@@ -498,7 +498,7 @@ End SubWe will also take a look on smoother Visual Studio integration, so you can see Better ListView ready in toolbox just after installation (we have to deal with Visual Studio Packages, which is quite an esoteric topic). If Better ListView doesn’t currently appear in your Visual Studio toolbox automatically, you can just right-click the toolbox window, and use “Choose Items” to add the DLL file yourself.
Some background info for the more curious of you: Version 1.5 of Better ListView was very fast. It was so fast because every item in the list had precisely the same size. Some operations, like hit testing, was done in constant time and no extra measurement of individual items was necessary. The new major 2.0 version of Better ListView supports items with variable sizes, and irregular layout consisting of grouped items. However, we observed that even in complex settings, there are just few “types” of items – for example, there are only three possible item sizes when using multi-line items with up to three lines of text. Our optimizations will thus be focused on taking advantage of this to reduce most expensive operations back to constant time complexity.
-photo by Michael Roper
photo by Michael Roper
Item hierarchy with multi-line items in groups
Item hierarchy with multi-line items in groups
We have added four new major features:
List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.
Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.
Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.
-Thumbnails in groups
DataTable bound to Better ListView
Thumbnails in groups
DataTable bound to Better ListView
We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.
]]>The component is fully customizable and by default inherits native Windows theme. We tested it on Windows 8 with success:
-Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser contains default implementation for loading thumbnail images from disk. If you want to gather all images from a given folder (say “c:\images”), display them in Better Thumbnail Browser and load them on background, the code is particularly simple:
thumbnailBrowser.Path = "c:\\images";diff --git a/src/data/blog/tag/load/index.html b/src/data/blog/tag/load/index.html index 5a15526..b3aab7f 100644 --- a/src/data/blog/tag/load/index.html +++ b/src/data/blog/tag/load/index.html @@ -7,13 +7,13 @@
The component is fully customizable and by default inherits native Windows theme. We tested it on Windows 8 with success:
-Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser contains default implementation for loading thumbnail images from disk. If you want to gather all images from a given folder (say “c:\images”), display them in Better Thumbnail Browser and load them on background, the code is particularly simple:
thumbnailBrowser.Path = "c:\\images";diff --git a/src/data/blog/tag/loading/index.html b/src/data/blog/tag/loading/index.html index 0f3c3cc..7226816 100644 --- a/src/data/blog/tag/loading/index.html +++ b/src/data/blog/tag/loading/index.html @@ -7,13 +7,13 @@
Contrary to many custom controls, Better ListView adjusts itself to current theme even if the theme is changed in run-time. For example, when user of your application switches theme from Classic to Aero, or to some other custom theme with elements of different sizes, Better ListView re-measures itself for the new theme smoothly. Reloading the component or re-starting the application is not necessary.
One of the sweet bonuses of using Better ListView 2.0 instead of regular .NET ListView is the full Groups functionality in all themes and all versions of the operating system. For example, groups are not collapsible in standard ListView on Windows XP and even does not support images. In Better ListView, however, you are able to unleash full potential of groups everywhere.
The following images show Better ListView in different Windows themes: Classic, XP Luna and Aero:
-Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
]]>
Search Highlight Feature
Search Highlight Feature
To enable the highlight, simply add UpdateSearchHighlight option in the search settings:
C#
@@ -60,9 +60,9 @@ ListView.SearchSettings = New BetterListViewSearchSettings(Every item contains information about the match in the BetterListViewItem.SearchHighlight property. When BetterListViewItem.SearchHighlight.IsEmpty is true, the item was not matched by the search. Otherwise it contains information about the matched substring: its index and number of characters.
Highlight colors can be adjusted by three properties: ColorSearchHighlight, ColorSearchHighlightBorder and ColorSearchHighlightText:
-Search Highlight Properties
Search Highlight Properties
The display can be adjusted even further with owner drawing:
-Customized Search Highlight Feature
Customized Search Highlight Feature
Here we have used ellipses drawn on item background by modifying OnDrawItem and OnDrawItemBackground methods of BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
diff --git a/src/data/blog/tag/mark/index.html b/src/data/blog/tag/mark/index.html
index 883f889..26a38d1 100644
--- a/src/data/blog/tag/mark/index.html
+++ b/src/data/blog/tag/mark/index.html
@@ -7,13 +7,13 @@
Search Highlight Feature
Search Highlight Feature
To enable the highlight, simply add UpdateSearchHighlight option in the search settings:
C#
@@ -60,9 +60,9 @@ ListView.SearchSettings = New BetterListViewSearchSettings(Every item contains information about the match in the BetterListViewItem.SearchHighlight property. When BetterListViewItem.SearchHighlight.IsEmpty is true, the item was not matched by the search. Otherwise it contains information about the matched substring: its index and number of characters.
Highlight colors can be adjusted by three properties: ColorSearchHighlight, ColorSearchHighlightBorder and ColorSearchHighlightText:
-Search Highlight Properties
Search Highlight Properties
The display can be adjusted even further with owner drawing:
-Customized Search Highlight Feature
Customized Search Highlight Feature
Here we have used ellipses drawn on item background by modifying OnDrawItem and OnDrawItemBackground methods of BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
diff --git a/src/data/blog/tag/matched/index.html b/src/data/blog/tag/matched/index.html
index becd3e6..1b9c5b6 100644
--- a/src/data/blog/tag/matched/index.html
+++ b/src/data/blog/tag/matched/index.html
@@ -7,13 +7,13 @@
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:
-
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:
-
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!
diff --git a/src/data/blog/tag/mental-work/index.html b/src/data/blog/tag/mental-work/index.html index 03acdbb..bfd8d62 100644 --- a/src/data/blog/tag/mental-work/index.html +++ b/src/data/blog/tag/mental-work/index.html @@ -7,13 +7,13 @@We added easy to understand samples for both C# and Visual Basic.
You can simply follow a link from start menu to open the Visual Studio project for your favourite language, and play with all the features of Better ListView.
-C# and VB Samples projects in Solution Explorer
C# and VB Samples projects in Solution Explorer
We added a Quick Start Tutorial to help you with setup, activation and integration of Better ListView in your projects, as well as many entirely new chapters in the documentation.
diff --git a/src/data/blog/tag/migration/index.html b/src/data/blog/tag/migration/index.html index d993686..e29b1be 100644 --- a/src/data/blog/tag/migration/index.html +++ b/src/data/blog/tag/migration/index.html @@ -7,13 +7,13 @@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
Disabled state
Read-only state
Normal state
Disabled 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.
diff --git a/src/data/blog/tag/mode/index.html b/src/data/blog/tag/mode/index.html index b33479b..c45030c 100644 --- a/src/data/blog/tag/mode/index.html +++ b/src/data/blog/tag/mode/index.html @@ -7,13 +7,13 @@Hot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>Dynamic resizing of the focused item
Dynamic resizing of the focused item
We also introduced FocusedItemChanged event, so that you can detect when focus has moved from one element (item / sub-item / group) to another.
These features can be combined to display only the focused item with more details to save space code of the FocusedItemChanged event handler may look like this:
C#
@@ -105,8 +105,8 @@ End SubItem hierarchy with multi-line items in groups
Item hierarchy with multi-line items in groups
We have added four new major features:
List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.
Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.
Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.
-Thumbnails in groups
DataTable bound to Better ListView
Thumbnails in groups
DataTable bound to Better ListView
We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.
]]>Items with multi-line text
Items with multi-line text
Column headers and even groups can contain multi-line text:
-Multi-line text in groups
Multi-line text in groups
So the text can be split on multiple lines not only by wrapping the text, but also by user defined newline characters.
This feature comes out of the box.
The only setting associated with multi-line items is the MaximumTextLines property of the corresponding layout (e.g. BetterListView.LayoutItemsLargeIcon). This property specifies how many lines the text can have and this applies to both wrapped text and text with newline characters. So if you expect you text to have 5 to 20 lines, set the MaximumTextLines property to 20 and you know the items will not get too high while still displaying all the lines.
diff --git a/src/data/blog/tag/multi/index.html b/src/data/blog/tag/multi/index.html index 1df1cb4..d4bbaca 100644 --- a/src/data/blog/tag/multi/index.html +++ b/src/data/blog/tag/multi/index.html @@ -7,13 +7,13 @@Items with multi-line text
Items with multi-line text
Column headers and even groups can contain multi-line text:
-Multi-line text in groups
Multi-line text in groups
So the text can be split on multiple lines not only by wrapping the text, but also by user defined newline characters.
This feature comes out of the box.
The only setting associated with multi-line items is the MaximumTextLines property of the corresponding layout (e.g. BetterListView.LayoutItemsLargeIcon). This property specifies how many lines the text can have and this applies to both wrapped text and text with newline characters. So if you expect you text to have 5 to 20 lines, set the MaximumTextLines property to 20 and you know the items will not get too high while still displaying all the lines.
diff --git a/src/data/blog/tag/multiline-items/index.html b/src/data/blog/tag/multiline-items/index.html index e8cb6b9..20eba72 100644 --- a/src/data/blog/tag/multiline-items/index.html +++ b/src/data/blog/tag/multiline-items/index.html @@ -7,13 +7,13 @@Dynamic resizing of the focused item
Dynamic resizing of the focused item
We also introduced FocusedItemChanged event, so that you can detect when focus has moved from one element (item / sub-item / group) to another.
These features can be combined to display only the focused item with more details to save space code of the FocusedItemChanged event handler may look like this:
C#
@@ -105,9 +105,9 @@ End SubItems with multi-line text
Items with multi-line text
Column headers and even groups can contain multi-line text:
-Multi-line text in groups
Multi-line text in groups
So the text can be split on multiple lines not only by wrapping the text, but also by user defined newline characters.
This feature comes out of the box.
The only setting associated with multi-line items is the MaximumTextLines property of the corresponding layout (e.g. BetterListView.LayoutItemsLargeIcon). This property specifies how many lines the text can have and this applies to both wrapped text and text with newline characters. So if you expect you text to have 5 to 20 lines, set the MaximumTextLines property to 20 and you know the items will not get too high while still displaying all the lines.
@@ -143,8 +143,8 @@ End SubItem hierarchy with multi-line items in groups
Item hierarchy with multi-line items in groups
We have added four new major features:
List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.
Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.
Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.
-Thumbnails in groups
DataTable bound to Better ListView
Thumbnails in groups
DataTable bound to Better ListView
We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.
]]>Compared to tree-like structure, user can still bind an IList to Better ListView or serialize/traverse through the whole item “hierarchy” with a simple foreach block.
.NET 2.0 supports visual styles through its VisualStyleElement and VisualStyleRenderer classes, but this support is limited to basic elements. When it comes to shiny new elements that can be seen in Windows Explorer (e.g. triangular expando buttons or styles group headers), one have to hack into Windows theme to obtain correct constants. We did this nasty work to bring user visual style that matches exactly what he sees in native controls:
-Visual Style Elements for Groups
Visual Style Elements for Groups
The picture shows all the elements used in “Groups” and “Item Hierarchy” features. As You can see, it is a LOT. Only group header alone has 15 (!) states that should be drawn each in its specific situation. And Better ListView will handle all of them automatically for you.
We’ve taken customized themes into consideration, as well as older themes like “Vista Basic” or “XP Luna” or “Classic”. In all cases, we test control display thoroughly to obtain consistent results (a solid reference for us is a good old Windows Explorer as it shows most up-to-date wonders of native ListView control in each version of Windows at one place).
]]>See what’s new in Better ListView 1.52.
-Download the new version.
+Download the new version.
We are still working on the new major features (Item hierarchy, groups) as described here. These new features are near completion.
]]>Items with multi-line text
Items with multi-line text
Column headers and even groups can contain multi-line text:
-Multi-line text in groups
Multi-line text in groups
So the text can be split on multiple lines not only by wrapping the text, but also by user defined newline characters.
This feature comes out of the box.
The only setting associated with multi-line items is the MaximumTextLines property of the corresponding layout (e.g. BetterListView.LayoutItemsLargeIcon). This property specifies how many lines the text can have and this applies to both wrapped text and text with newline characters. So if you expect you text to have 5 to 20 lines, set the MaximumTextLines property to 20 and you know the items will not get too high while still displaying all the lines.
diff --git a/src/data/blog/tag/newline/index.html b/src/data/blog/tag/newline/index.html index 9120849..b152abe 100644 --- a/src/data/blog/tag/newline/index.html +++ b/src/data/blog/tag/newline/index.html @@ -7,13 +7,13 @@Items with multi-line text
Items with multi-line text
Column headers and even groups can contain multi-line text:
-Multi-line text in groups
Multi-line text in groups
So the text can be split on multiple lines not only by wrapping the text, but also by user defined newline characters.
This feature comes out of the box.
The only setting associated with multi-line items is the MaximumTextLines property of the corresponding layout (e.g. BetterListView.LayoutItemsLargeIcon). This property specifies how many lines the text can have and this applies to both wrapped text and text with newline characters. So if you expect you text to have 5 to 20 lines, set the MaximumTextLines property to 20 and you know the items will not get too high while still displaying all the lines.
diff --git a/src/data/blog/tag/newlines/index.html b/src/data/blog/tag/newlines/index.html index fec5638..0deae8e 100644 --- a/src/data/blog/tag/newlines/index.html +++ b/src/data/blog/tag/newlines/index.html @@ -7,13 +7,13 @@Item hierarchy with multi-line items in groups
Item hierarchy with multi-line items in groups
We have added four new major features:
List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.
Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.
Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.
-Thumbnails in groups
DataTable bound to Better ListView
Thumbnails in groups
DataTable bound to Better ListView
We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.
]]>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.
diff --git a/src/data/blog/tag/non-selectable-list-view-items/index.html b/src/data/blog/tag/non-selectable-list-view-items/index.html index 9d7f1e2..ce19ccd 100644 --- a/src/data/blog/tag/non-selectable-list-view-items/index.html +++ b/src/data/blog/tag/non-selectable-list-view-items/index.html @@ -7,13 +7,13 @@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.
@@ -66,10 +66,10 @@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.
diff --git a/src/data/blog/tag/non-selectable/index.html b/src/data/blog/tag/non-selectable/index.html index 29f7505..2f1a40b 100644 --- a/src/data/blog/tag/non-selectable/index.html +++ b/src/data/blog/tag/non-selectable/index.html @@ -7,13 +7,13 @@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.
@@ -66,10 +66,10 @@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.
diff --git a/src/data/blog/tag/nonselectable/index.html b/src/data/blog/tag/nonselectable/index.html index c324f0b..78786cc 100644 --- a/src/data/blog/tag/nonselectable/index.html +++ b/src/data/blog/tag/nonselectable/index.html @@ -7,13 +7,13 @@Alternating Rows
+Alternating Rows
Lists with alternating row colors are more readable. It is very simple to implement alternating rows in Better ListView.
Simply add DrawItemBackground event handler and fill background on odd/even items:
diff --git a/src/data/blog/tag/odd/index.html b/src/data/blog/tag/odd/index.html index f3b4f53..3bd6648 100644 --- a/src/data/blog/tag/odd/index.html +++ b/src/data/blog/tag/odd/index.html @@ -7,13 +7,13 @@
We will also take a look on smoother Visual Studio integration, so you can see Better ListView ready in toolbox just after installation (we have to deal with Visual Studio Packages, which is quite an esoteric topic). If Better ListView doesn’t currently appear in your Visual Studio toolbox automatically, you can just right-click the toolbox window, and use “Choose Items” to add the DLL file yourself.
Some background info for the more curious of you: Version 1.5 of Better ListView was very fast. It was so fast because every item in the list had precisely the same size. Some operations, like hit testing, was done in constant time and no extra measurement of individual items was necessary. The new major 2.0 version of Better ListView supports items with variable sizes, and irregular layout consisting of grouped items. However, we observed that even in complex settings, there are just few “types” of items – for example, there are only three possible item sizes when using multi-line items with up to three lines of text. Our optimizations will thus be focused on taking advantage of this to reduce most expensive operations back to constant time complexity.
-photo by Michael Roper
photo by Michael Roper
+
I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.
You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:
C#
diff --git a/src/data/blog/tag/over/index.html b/src/data/blog/tag/over/index.html index e873431..0b7acd9 100644 --- a/src/data/blog/tag/over/index.html +++ b/src/data/blog/tag/over/index.html @@ -7,13 +7,13 @@
+
I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.
You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:
C#
@@ -171,8 +171,8 @@ End ClassHot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -259,7 +259,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>Customized item selection.
+Customized item selection.
-
By default, Better ListView uses system theme for drawing selections.
+By default, Better ListView uses system theme for drawing selections.
To draw custom selection, you can use owner drawing capabilities of Better ListView:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -371,7 +371,7 @@ End Class
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.
@@ -400,9 +400,9 @@ End ClassOwner drawing in Better ListView 2.3.0 and higher allows you to draw elements (column headers, items, sub-items and groups) in any state you wish (hot, selected, focused and any combination of the three).
For example, we would like to highlight several items in one Better ListView depending on hovered item in other Better ListView:
-Better ListView shows multiple hot items
Better ListView shows multiple hot items
Items can be also be drawn as if the control is focused, enabled or disabled. This feature can be applied when you wish to display items in highlighted state even if Better ListView is not focused:
-Better ListView keeps selected items highlighted
Better ListView keeps selected items highlighted
We implemented the first sample (showing mulitple hot items) by inheriting from BetterListView, making a new class called HotListView. The implementation is very simple:
C#
diff --git a/src/data/blog/tag/owner/index.html b/src/data/blog/tag/owner/index.html index dd1464a..5cb71fe 100644 --- a/src/data/blog/tag/owner/index.html +++ b/src/data/blog/tag/owner/index.html @@ -7,13 +7,13 @@Hot Tracking
-This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>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.
diff --git a/src/data/blog/tag/ownerdraw/index.html b/src/data/blog/tag/ownerdraw/index.html index cd355ad..17aecfb 100644 --- a/src/data/blog/tag/ownerdraw/index.html +++ b/src/data/blog/tag/ownerdraw/index.html @@ -7,13 +7,13 @@
+
I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.
You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:
C#
diff --git a/src/data/blog/tag/ownerdrawing/index.html b/src/data/blog/tag/ownerdrawing/index.html index 3ed342b..1eebd4b 100644 --- a/src/data/blog/tag/ownerdrawing/index.html +++ b/src/data/blog/tag/ownerdrawing/index.html @@ -7,13 +7,13 @@
+
I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.
You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:
C#
@@ -160,9 +160,9 @@ End ClassCustomized item selection.
+Customized item selection.
-
By default, Better ListView uses system theme for drawing selections.
+By default, Better ListView uses system theme for drawing selections.
To draw custom selection, you can use owner drawing capabilities of Better ListView:
C#
[csharp gutter=”false” toolbar=”false”]
diff --git a/src/data/blog/tag/ownerdrawn/index.html b/src/data/blog/tag/ownerdrawn/index.html
index eea5834..4a7fbdb 100644
--- a/src/data/blog/tag/ownerdrawn/index.html
+++ b/src/data/blog/tag/ownerdrawn/index.html
@@ -7,13 +7,13 @@
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).
@@ -70,7 +70,7 @@Our great inspiration for designing Better ListView is nothing less than the mighty Windows Explorer. This file manager uses obviously much more powerful control that the regular .NET list-view alone is.
It supports some extra views, line Contents and Extra Large Icons. It is also possible to adjust image size by rolling a mouse wheel while holding Control key.
Better ListView has the capability of displaying item icons with arbitrary sizes, but we also extended it with one extra view: Thumbnails:
-Thumbnails Sample
Thumbnails Sample
This view aligns items in the center while keeping constant spacing between items. Thumbnails also keep just single line of text for compactness. On the other hand, LargeIcon view varies horizontal space between items to fill client area evenly and breaks long text into several lines.
The constant spacing is inspired by various photo managers, where image thumbnails are better viewed side-by-side (and the view looks also more organized).
Image thumbnails also look better with some kind border or frame. We added this new feature in Better ListView 1.5 and it works in all views. There are several pre-defined types of borders, but user can draw his own:
@@ -83,10 +83,10 @@Thumbnails use DropShadow by default, but it can be adjusted for every view separately. One can also adjust thickness of the border/shadow and define custom spacing around image.
Take a look at one possible setting:
-Image Borders
Image Borders
This is SingleOffset border of width 3 pixels. Notice that also column header images can have its borders (these are SymmetricShadow).
When the border is defined and image size should be kept the same, some spacing have to be added around image. You can adjust this spacing to draw you own borders or any additional graphics (such as overlay icons). Here is an example –
-Thumbnail with Extra Icons
Thumbnail with Extra Icons
You can download Better ListView and play with it yourself.
]]>
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
We added easy to understand samples for both C# and Visual Basic.
You can simply follow a link from start menu to open the Visual Studio project for your favourite language, and play with all the features of Better ListView.
-C# and VB Samples projects in Solution Explorer
C# and VB Samples projects in Solution Explorer
We added a Quick Start Tutorial to help you with setup, activation and integration of Better ListView in your projects, as well as many entirely new chapters in the documentation.
@@ -89,7 +89,7 @@We will also take a look on smoother Visual Studio integration, so you can see Better ListView ready in toolbox just after installation (we have to deal with Visual Studio Packages, which is quite an esoteric topic). If Better ListView doesn’t currently appear in your Visual Studio toolbox automatically, you can just right-click the toolbox window, and use “Choose Items” to add the DLL file yourself.
Some background info for the more curious of you: Version 1.5 of Better ListView was very fast. It was so fast because every item in the list had precisely the same size. Some operations, like hit testing, was done in constant time and no extra measurement of individual items was necessary. The new major 2.0 version of Better ListView supports items with variable sizes, and irregular layout consisting of grouped items. However, we observed that even in complex settings, there are just few “types” of items – for example, there are only three possible item sizes when using multi-line items with up to three lines of text. Our optimizations will thus be focused on taking advantage of this to reduce most expensive operations back to constant time complexity.
-photo by Michael Roper
photo by Michael Roper
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.
diff --git a/src/data/blog/tag/prevent-item-selection-in-list-view/index.html b/src/data/blog/tag/prevent-item-selection-in-list-view/index.html index ed2bbc6..a69d328 100644 --- a/src/data/blog/tag/prevent-item-selection-in-list-view/index.html +++ b/src/data/blog/tag/prevent-item-selection-in-list-view/index.html @@ -7,13 +7,13 @@Hierarchical items in two groups
+Hierarchical items in two groups
We are currently working hard on finishing Better ListView version 2.0 which will add new features: Support for groups, tree-like item structure (tree nodes are collapsible, as expected), and multi-line items.
We expect to release this upgrade in about a month. It will be a free upgrade for current and new users.
You can even include images into group headers (as you can see in the preview above), which is not possible in .NET ListView.
Groups are collapsible by default and the expand button can be switched off on each group individually.
Here are groups combined with Tile view (the second group is collapsed):
-Groups with Tile view
Groups with Tile view
The previous figure displays vertically oriented groups, but Better ListView also support horizontally oriented groups in the List mode:
-Groups with List view
Groups with List view
We put special effort to mimic the group display and behavior of Windows Explorer. The group headers can display all of the 15 group header states available in Windows visual style and their display is governed by the same logic as in the ListView counterpart.
The group headers always look perfect and native, right out of the box. You don’t need to tweak anything.
This works in the similar way as in the standard TreeView control. Each item (or node) has property called ChildItems which can be filled with new BetterListViewItem instances. SubItems collection can still be used in either items and child-items (child items are treated in the very same way as their parents).
Item hierarchy can be combined with Groups feature as seen in the first preview.
Multi-line items
Multi-line items
A simple setting of item layout (MaximumTextLines property) allows breaking item text into several lines (up to the specified value). When the text is longer than MaximumTextLines, then the default trimming method is used (one from the TextTrimming enumeration: None, TrimCharacter, TrimWord, EllipsisCharacter, EllipsisWord, EllipsisPath).
Multi-line text can be used in every view and also in column headers.
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:
-
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:
-
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!
diff --git a/src/data/blog/tag/productivity/index.html b/src/data/blog/tag/productivity/index.html index 180cb2b..d8c50ec 100644 --- a/src/data/blog/tag/productivity/index.html +++ b/src/data/blog/tag/productivity/index.html @@ -7,13 +7,13 @@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:
-
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:
-
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!
diff --git a/src/data/blog/tag/programming-productivity/index.html b/src/data/blog/tag/programming-productivity/index.html index 8396012..72cee54 100644 --- a/src/data/blog/tag/programming-productivity/index.html +++ b/src/data/blog/tag/programming-productivity/index.html @@ -7,13 +7,13 @@We will also take a look on smoother Visual Studio integration, so you can see Better ListView ready in toolbox just after installation (we have to deal with Visual Studio Packages, which is quite an esoteric topic). If Better ListView doesn’t currently appear in your Visual Studio toolbox automatically, you can just right-click the toolbox window, and use “Choose Items” to add the DLL file yourself.
Some background info for the more curious of you: Version 1.5 of Better ListView was very fast. It was so fast because every item in the list had precisely the same size. Some operations, like hit testing, was done in constant time and no extra measurement of individual items was necessary. The new major 2.0 version of Better ListView supports items with variable sizes, and irregular layout consisting of grouped items. However, we observed that even in complex settings, there are just few “types” of items – for example, there are only three possible item sizes when using multi-line items with up to three lines of text. Our optimizations will thus be focused on taking advantage of this to reduce most expensive operations back to constant time complexity.
-photo by Michael Roper
photo by Michael Roper
Compared to tree-like structure, user can still bind an IList to Better ListView or serialize/traverse through the whole item “hierarchy” with a simple foreach block.
.NET 2.0 supports visual styles through its VisualStyleElement and VisualStyleRenderer classes, but this support is limited to basic elements. When it comes to shiny new elements that can be seen in Windows Explorer (e.g. triangular expando buttons or styles group headers), one have to hack into Windows theme to obtain correct constants. We did this nasty work to bring user visual style that matches exactly what he sees in native controls:
-Visual Style Elements for Groups
Visual Style Elements for Groups
The picture shows all the elements used in “Groups” and “Item Hierarchy” features. As You can see, it is a LOT. Only group header alone has 15 (!) states that should be drawn each in its specific situation. And Better ListView will handle all of them automatically for you.
We’ve taken customized themes into consideration, as well as older themes like “Vista Basic” or “XP Luna” or “Classic”. In all cases, we test control display thoroughly to obtain consistent results (a solid reference for us is a good old Windows Explorer as it shows most up-to-date wonders of native ListView control in each version of Windows at one place).
]]> diff --git a/src/data/blog/tag/progress/index.html b/src/data/blog/tag/progress/index.html index 1a1ab3f..86f4f02 100644 --- a/src/data/blog/tag/progress/index.html +++ b/src/data/blog/tag/progress/index.html @@ -7,13 +7,13 @@Better ListView Sub-item Check Boxes
Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
+Better ListView Sub-item Check Boxes
+Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.
Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).
Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.
diff --git a/src/data/blog/tag/radio/index.html b/src/data/blog/tag/radio/index.html index 4298b36..90386fc 100644 --- a/src/data/blog/tag/radio/index.html +++ b/src/data/blog/tag/radio/index.html @@ -7,13 +7,13 @@Better ListView Sub-item Check Boxes
-Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
+Better ListView Sub-item Check Boxes
+Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.
Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).
Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.
diff --git a/src/data/blog/tag/radios/index.html b/src/data/blog/tag/radios/index.html index 5d98e28..fc334ad 100644 --- a/src/data/blog/tag/radios/index.html +++ b/src/data/blog/tag/radios/index.html @@ -7,13 +7,13 @@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
Disabled state
Read-only state
Normal state
Disabled 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.
@@ -72,9 +72,9 @@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.
diff --git a/src/data/blog/tag/read-only/index.html b/src/data/blog/tag/read-only/index.html index ddcbc1d..6dea6ab 100644 --- a/src/data/blog/tag/read-only/index.html +++ b/src/data/blog/tag/read-only/index.html @@ -7,13 +7,13 @@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
Disabled state
Read-only state
Normal state
Disabled 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.
@@ -72,9 +72,9 @@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.
diff --git a/src/data/blog/tag/readonly/index.html b/src/data/blog/tag/readonly/index.html index de6e67a..7ce7a1d 100644 --- a/src/data/blog/tag/readonly/index.html +++ b/src/data/blog/tag/readonly/index.html @@ -7,13 +7,13 @@Contrary to many custom controls, Better ListView adjusts itself to current theme even if the theme is changed in run-time. For example, when user of your application switches theme from Classic to Aero, or to some other custom theme with elements of different sizes, Better ListView re-measures itself for the new theme smoothly. Reloading the component or re-starting the application is not necessary.
One of the sweet bonuses of using Better ListView 2.0 instead of regular .NET ListView is the full Groups functionality in all themes and all versions of the operating system. For example, groups are not collapsible in standard ListView on Windows XP and even does not support images. In Better ListView, however, you are able to unleash full potential of groups everywhere.
The following images show Better ListView in different Windows themes: Classic, XP Luna and Aero:
-Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
]]>
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:
-
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:
-
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!
diff --git a/src/data/blog/tag/relaxing-when-working-on-computer/index.html b/src/data/blog/tag/relaxing-when-working-on-computer/index.html index d19acd1..2433748 100644 --- a/src/data/blog/tag/relaxing-when-working-on-computer/index.html +++ b/src/data/blog/tag/relaxing-when-working-on-computer/index.html @@ -7,13 +7,13 @@
+
Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.
The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:
C#
@@ -90,7 +90,7 @@ End Sub End SubNaturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.
-Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
+Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.
]]>Our Better ListView control supports drag and drop item reordering out of the box. Zero code is needed – all you have to do is to set the property BetterListViewItemReorderMode to Enabled.
It works just like this:
-
You can just download and install Better ListView, and start using it right away. It can do everything the regular .NET listview component can, and much more.
See more in the Drag Drop Sample that is included with Better ListView. It includes source code.
]]>Our Better ListView control supports drag and drop item reordering out of the box. Zero code is needed – all you have to do is to set the property BetterListViewItemReorderMode to Enabled.
It works just like this:
-
You can just download and install Better ListView, and start using it right away. It can do everything the regular .NET listview component can, and much more.
See more in the Drag Drop Sample that is included with Better ListView. It includes source code.
]]>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.
]]>Alternating Rows
+Alternating Rows
Lists with alternating row colors are more readable. It is very simple to implement alternating rows in Better ListView.
Simply add DrawItemBackground event handler and fill background on odd/even items:
diff --git a/src/data/blog/tag/rows/index.html b/src/data/blog/tag/rows/index.html index ba1ae4d..be3d842 100644 --- a/src/data/blog/tag/rows/index.html +++ b/src/data/blog/tag/rows/index.html @@ -7,13 +7,13 @@
Contrary to many custom controls, Better ListView adjusts itself to current theme even if the theme is changed in run-time. For example, when user of your application switches theme from Classic to Aero, or to some other custom theme with elements of different sizes, Better ListView re-measures itself for the new theme smoothly. Reloading the component or re-starting the application is not necessary.
One of the sweet bonuses of using Better ListView 2.0 instead of regular .NET ListView is the full Groups functionality in all themes and all versions of the operating system. For example, groups are not collapsible in standard ListView on Windows XP and even does not support images. In Better ListView, however, you are able to unleash full potential of groups everywhere.
The following images show Better ListView in different Windows themes: Classic, XP Luna and Aero:
-Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
]]>
Better ListView custom scroll bar size
-Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
+Better ListView custom scroll bar size
+Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
Better ListView custom scroll bar size
-Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
+Better ListView custom scroll bar size
+Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
Better ListView custom scroll bar size
-Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
+Better ListView custom scroll bar size
+Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
Search Highlight Feature
Search Highlight Feature
To enable the highlight, simply add UpdateSearchHighlight option in the search settings:
C#
@@ -60,9 +60,9 @@ ListView.SearchSettings = New BetterListViewSearchSettings(Every item contains information about the match in the BetterListViewItem.SearchHighlight property. When BetterListViewItem.SearchHighlight.IsEmpty is true, the item was not matched by the search. Otherwise it contains information about the matched substring: its index and number of characters.
Highlight colors can be adjusted by three properties: ColorSearchHighlight, ColorSearchHighlightBorder and ColorSearchHighlightText:
-Search Highlight Properties
Search Highlight Properties
The display can be adjusted even further with owner drawing:
-Customized Search Highlight Feature
Customized Search Highlight Feature
Here we have used ellipses drawn on item background by modifying OnDrawItem and OnDrawItemBackground methods of BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
diff --git a/src/data/blog/tag/search/index.html b/src/data/blog/tag/search/index.html
index 99eac57..c59a248 100644
--- a/src/data/blog/tag/search/index.html
+++ b/src/data/blog/tag/search/index.html
@@ -7,13 +7,13 @@
Search Highlight Feature
Search Highlight Feature
To enable the highlight, simply add UpdateSearchHighlight option in the search settings:
C#
@@ -60,9 +60,9 @@ ListView.SearchSettings = New BetterListViewSearchSettings(Every item contains information about the match in the BetterListViewItem.SearchHighlight property. When BetterListViewItem.SearchHighlight.IsEmpty is true, the item was not matched by the search. Otherwise it contains information about the matched substring: its index and number of characters.
Highlight colors can be adjusted by three properties: ColorSearchHighlight, ColorSearchHighlightBorder and ColorSearchHighlightText:
-Search Highlight Properties
Search Highlight Properties
The display can be adjusted even further with owner drawing:
-Customized Search Highlight Feature
Customized Search Highlight Feature
Here we have used ellipses drawn on item background by modifying OnDrawItem and OnDrawItemBackground methods of BetterListView:
C#
[csharp gutter=”false” toolbar=”false”]
diff --git a/src/data/blog/tag/searching/index.html b/src/data/blog/tag/searching/index.html
index 7b6cdd6..79ea310 100644
--- a/src/data/blog/tag/searching/index.html
+++ b/src/data/blog/tag/searching/index.html
@@ -7,13 +7,13 @@
Customized item selection.
+Customized item selection.
-
By default, Better ListView uses system theme for drawing selections.
+By default, Better ListView uses system theme for drawing selections.
To draw custom selection, you can use owner drawing capabilities of Better ListView:
C#
[csharp gutter=”false” toolbar=”false”]
diff --git a/src/data/blog/tag/selection/index.html b/src/data/blog/tag/selection/index.html
index 6d6b86c..b7f65c1 100644
--- a/src/data/blog/tag/selection/index.html
+++ b/src/data/blog/tag/selection/index.html
@@ -7,13 +7,13 @@
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.
diff --git a/src/data/blog/tag/separators/index.html b/src/data/blog/tag/separators/index.html index 40f2a53..732d33f 100644 --- a/src/data/blog/tag/separators/index.html +++ b/src/data/blog/tag/separators/index.html @@ -7,13 +7,13 @@Our great inspiration for designing Better ListView is nothing less than the mighty Windows Explorer. This file manager uses obviously much more powerful control that the regular .NET list-view alone is.
It supports some extra views, line Contents and Extra Large Icons. It is also possible to adjust image size by rolling a mouse wheel while holding Control key.
Better ListView has the capability of displaying item icons with arbitrary sizes, but we also extended it with one extra view: Thumbnails:
-Thumbnails Sample
Thumbnails Sample
This view aligns items in the center while keeping constant spacing between items. Thumbnails also keep just single line of text for compactness. On the other hand, LargeIcon view varies horizontal space between items to fill client area evenly and breaks long text into several lines.
The constant spacing is inspired by various photo managers, where image thumbnails are better viewed side-by-side (and the view looks also more organized).
Image thumbnails also look better with some kind border or frame. We added this new feature in Better ListView 1.5 and it works in all views. There are several pre-defined types of borders, but user can draw his own:
@@ -53,10 +53,10 @@Thumbnails use DropShadow by default, but it can be adjusted for every view separately. One can also adjust thickness of the border/shadow and define custom spacing around image.
Take a look at one possible setting:
-Image Borders
Image Borders
This is SingleOffset border of width 3 pixels. Notice that also column header images can have its borders (these are SymmetricShadow).
When the border is defined and image size should be kept the same, some spacing have to be added around image. You can adjust this spacing to draw you own borders or any additional graphics (such as overlay icons). Here is an example –
-Thumbnail with Extra Icons
Thumbnail with Extra Icons
You can download Better ListView and play with it yourself.
]]>Better ListView custom scroll bar size
-Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
+Better ListView custom scroll bar size
+Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
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:
diff --git a/src/data/blog/tag/size/index.html b/src/data/blog/tag/size/index.html index 711bbe6..ed2e865 100644 --- a/src/data/blog/tag/size/index.html +++ b/src/data/blog/tag/size/index.html @@ -7,13 +7,13 @@Better ListView custom scroll bar size
-Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
+Better ListView custom scroll bar size
+Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
Our Better ListView control supports drag and drop item reordering out of the box. Zero code is needed – all you have to do is to set the property BetterListViewItemReorderMode to Enabled.
It works just like this:
-
You can just download and install Better ListView, and start using it right away. It can do everything the regular .NET listview component can, and much more.
See more in the Drag Drop Sample that is included with Better ListView. It includes source code.
]]>Our Better ListView control supports drag and drop item reordering out of the box. Zero code is needed – all you have to do is to set the property BetterListViewItemReorderMode to Enabled.
It works just like this:
-
You can just download and install Better ListView, and start using it right away. It can do everything the regular .NET listview component can, and much more.
See more in the Drag Drop Sample that is included with Better ListView. It includes source code.
]]>Default list without grid lines below items
-List with grid lines added
Default list without grid lines below items
+List with grid lines added
Setting grid lines in Better ListView is easy. Simply make sure you are using Details view (the default view). Then you can set GridLines property to one of the following values:
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:
@@ -136,9 +136,9 @@ What this code does is getting the last visible item using BottomItemhttp://www.componentowl.com/blog/?p=753Custom 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).
diff --git a/src/data/blog/tag/space/index.html b/src/data/blog/tag/space/index.html index 18410e6..ace1193 100644 --- a/src/data/blog/tag/space/index.html +++ b/src/data/blog/tag/space/index.html @@ -7,13 +7,13 @@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).
@@ -70,7 +70,7 @@Our great inspiration for designing Better ListView is nothing less than the mighty Windows Explorer. This file manager uses obviously much more powerful control that the regular .NET list-view alone is.
It supports some extra views, line Contents and Extra Large Icons. It is also possible to adjust image size by rolling a mouse wheel while holding Control key.
Better ListView has the capability of displaying item icons with arbitrary sizes, but we also extended it with one extra view: Thumbnails:
-Thumbnails Sample
Thumbnails Sample
This view aligns items in the center while keeping constant spacing between items. Thumbnails also keep just single line of text for compactness. On the other hand, LargeIcon view varies horizontal space between items to fill client area evenly and breaks long text into several lines.
The constant spacing is inspired by various photo managers, where image thumbnails are better viewed side-by-side (and the view looks also more organized).
Image thumbnails also look better with some kind border or frame. We added this new feature in Better ListView 1.5 and it works in all views. There are several pre-defined types of borders, but user can draw his own:
@@ -83,10 +83,10 @@Thumbnails use DropShadow by default, but it can be adjusted for every view separately. One can also adjust thickness of the border/shadow and define custom spacing around image.
Take a look at one possible setting:
-Image Borders
Image Borders
This is SingleOffset border of width 3 pixels. Notice that also column header images can have its borders (these are SymmetricShadow).
When the border is defined and image size should be kept the same, some spacing have to be added around image. You can adjust this spacing to draw you own borders or any additional graphics (such as overlay icons). Here is an example –
-Thumbnail with Extra Icons
Thumbnail with Extra Icons
You can download Better ListView and play with it yourself.
]]>
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
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
Disabled state
Read-only state
Normal state
Disabled 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.
@@ -69,9 +69,9 @@Owner drawing in Better ListView 2.3.0 and higher allows you to draw elements (column headers, items, sub-items and groups) in any state you wish (hot, selected, focused and any combination of the three).
For example, we would like to highlight several items in one Better ListView depending on hovered item in other Better ListView:
-Better ListView shows multiple hot items
Better ListView shows multiple hot items
Items can be also be drawn as if the control is focused, enabled or disabled. This feature can be applied when you wish to display items in highlighted state even if Better ListView is not focused:
-Better ListView keeps selected items highlighted
Better ListView keeps selected items highlighted
We implemented the first sample (showing mulitple hot items) by inheriting from BetterListView, making a new class called HotListView. The implementation is very simple:
C#
diff --git a/src/data/blog/tag/state/index.html b/src/data/blog/tag/state/index.html index 095f0da..d93878c 100644 --- a/src/data/blog/tag/state/index.html +++ b/src/data/blog/tag/state/index.html @@ -7,13 +7,13 @@Compared to tree-like structure, user can still bind an IList to Better ListView or serialize/traverse through the whole item “hierarchy” with a simple foreach block.
.NET 2.0 supports visual styles through its VisualStyleElement and VisualStyleRenderer classes, but this support is limited to basic elements. When it comes to shiny new elements that can be seen in Windows Explorer (e.g. triangular expando buttons or styles group headers), one have to hack into Windows theme to obtain correct constants. We did this nasty work to bring user visual style that matches exactly what he sees in native controls:
-Visual Style Elements for Groups
Visual Style Elements for Groups
The picture shows all the elements used in “Groups” and “Item Hierarchy” features. As You can see, it is a LOT. Only group header alone has 15 (!) states that should be drawn each in its specific situation. And Better ListView will handle all of them automatically for you.
We’ve taken customized themes into consideration, as well as older themes like “Vista Basic” or “XP Luna” or “Classic”. In all cases, we test control display thoroughly to obtain consistent results (a solid reference for us is a good old Windows Explorer as it shows most up-to-date wonders of native ListView control in each version of Windows at one place).
]]>Centered images in Better ListView
+Centered images in Better ListView
Better ListView 3.11 supports aligning images in sub-items and columns to center. Simply set AlignHorizontalImage property of an sub-item or column to BetterListViewImageAlignmentHorizontal.OverlayCenter.
The image will be centered inside available space regardless of text.
This is useful for sub-items and column headers consisting of image only.
@@ -76,8 +76,8 @@Better ListView Sub-item Check Boxes
-Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
+Better ListView Sub-item Check Boxes
+Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.
Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).
Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.
@@ -108,11 +108,11 @@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.
]]>By default, each view has its defaults, but you can customize text alignment on every column, item, sub-item and group individually:
Vertical alignments of text
Vertical alignments of text
Various text wrapping modes
Various text wrapping modes
The sub-item in the first column has TextWrapping set to Layout and the layout has MaximumTextLines set to 4. The sub-item text thus can be split to up to four lines. It is actually split just to three because the column is wide enough.
The sub-item in the second column has TextWrapping set to None, which means the text in this sub-item is kept on single line.
diff --git a/src/data/blog/tag/sub-item/index.html b/src/data/blog/tag/sub-item/index.html index 3ad7471..71310ec 100644 --- a/src/data/blog/tag/sub-item/index.html +++ b/src/data/blog/tag/sub-item/index.html @@ -7,13 +7,13 @@Centered images in Better ListView
Centered images in Better ListView
Better ListView 3.11 supports aligning images in sub-items and columns to center. Simply set AlignHorizontalImage property of an sub-item or column to BetterListViewImageAlignmentHorizontal.OverlayCenter.
The image will be centered inside available space regardless of text.
This is useful for sub-items and column headers consisting of image only.
@@ -71,8 +71,8 @@Hiding Column Headers
Hiding Column Headers
To hide column headers, simply set HeaderStyle property to BetterListViewHeaderStyle.None. There are other possible styles for all column headers:
Hiding Column Headers
Hiding Column Headers
To hide column headers, simply set HeaderStyle property to BetterListViewHeaderStyle.None. There are other possible styles for all column headers:
Centered images in Better ListView
+Centered images in Better ListView
Better ListView 3.11 supports aligning images in sub-items and columns to center. Simply set AlignHorizontalImage property of an sub-item or column to BetterListViewImageAlignmentHorizontal.OverlayCenter.
The image will be centered inside available space regardless of text.
This is useful for sub-items and column headers consisting of image only.
@@ -76,8 +76,8 @@Better ListView Sub-item Check Boxes
-Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
+Better ListView Sub-item Check Boxes
+Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.
Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).
Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.
@@ -108,11 +108,11 @@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.
]]>Centered images in Better ListView
+Centered images in Better ListView
Better ListView 3.11 supports aligning images in sub-items and columns to center. Simply set AlignHorizontalImage property of an sub-item or column to BetterListViewImageAlignmentHorizontal.OverlayCenter.
The image will be centered inside available space regardless of text.
This is useful for sub-items and column headers consisting of image only.
@@ -76,8 +76,8 @@Better ListView Sub-item Check Boxes
-Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
+Better ListView Sub-item Check Boxes
+Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.
This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.
Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).
Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.
@@ -108,8 +108,8 @@Hiding Column Headers
Hiding Column Headers
To hide column headers, simply set HeaderStyle property to BetterListViewHeaderStyle.None. There are other possible styles for all column headers:
Contrary to many custom controls, Better ListView adjusts itself to current theme even if the theme is changed in run-time. For example, when user of your application switches theme from Classic to Aero, or to some other custom theme with elements of different sizes, Better ListView re-measures itself for the new theme smoothly. Reloading the component or re-starting the application is not necessary.
One of the sweet bonuses of using Better ListView 2.0 instead of regular .NET ListView is the full Groups functionality in all themes and all versions of the operating system. For example, groups are not collapsible in standard ListView on Windows XP and even does not support images. In Better ListView, however, you are able to unleash full potential of groups everywhere.
The following images show Better ListView in different Windows themes: Classic, XP Luna and Aero:
-Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
]]>
Items with multi-line text
Items with multi-line text
Column headers and even groups can contain multi-line text:
-Multi-line text in groups
Multi-line text in groups
So the text can be split on multiple lines not only by wrapping the text, but also by user defined newline characters.
This feature comes out of the box.
The only setting associated with multi-line items is the MaximumTextLines property of the corresponding layout (e.g. BetterListView.LayoutItemsLargeIcon). This property specifies how many lines the text can have and this applies to both wrapped text and text with newline characters. So if you expect you text to have 5 to 20 lines, set the MaximumTextLines property to 20 and you know the items will not get too high while still displaying all the lines.
@@ -74,7 +74,7 @@By default, each view has its defaults, but you can customize text alignment on every column, item, sub-item and group individually:
Vertical alignments of text
Vertical alignments of text
Various text wrapping modes
Various text wrapping modes
The sub-item in the first column has TextWrapping set to Layout and the layout has MaximumTextLines set to 4. The sub-item text thus can be split to up to four lines. It is actually split just to three because the column is wide enough.
The sub-item in the second column has TextWrapping set to None, which means the text in this sub-item is kept on single line.
diff --git a/src/data/blog/tag/text/index.html b/src/data/blog/tag/text/index.html index 413e636..36ae9ce 100644 --- a/src/data/blog/tag/text/index.html +++ b/src/data/blog/tag/text/index.html @@ -7,13 +7,13 @@Contrary to many custom controls, Better ListView adjusts itself to current theme even if the theme is changed in run-time. For example, when user of your application switches theme from Classic to Aero, or to some other custom theme with elements of different sizes, Better ListView re-measures itself for the new theme smoothly. Reloading the component or re-starting the application is not necessary.
One of the sweet bonuses of using Better ListView 2.0 instead of regular .NET ListView is the full Groups functionality in all themes and all versions of the operating system. For example, groups are not collapsible in standard ListView on Windows XP and even does not support images. In Better ListView, however, you are able to unleash full potential of groups everywhere.
The following images show Better ListView in different Windows themes: Classic, XP Luna and Aero:
-Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
]]>
Compared to tree-like structure, user can still bind an IList to Better ListView or serialize/traverse through the whole item “hierarchy” with a simple foreach block.
.NET 2.0 supports visual styles through its VisualStyleElement and VisualStyleRenderer classes, but this support is limited to basic elements. When it comes to shiny new elements that can be seen in Windows Explorer (e.g. triangular expando buttons or styles group headers), one have to hack into Windows theme to obtain correct constants. We did this nasty work to bring user visual style that matches exactly what he sees in native controls:
-Visual Style Elements for Groups
Visual Style Elements for Groups
The picture shows all the elements used in “Groups” and “Item Hierarchy” features. As You can see, it is a LOT. Only group header alone has 15 (!) states that should be drawn each in its specific situation. And Better ListView will handle all of them automatically for you.
We’ve taken customized themes into consideration, as well as older themes like “Vista Basic” or “XP Luna” or “Classic”. In all cases, we test control display thoroughly to obtain consistent results (a solid reference for us is a good old Windows Explorer as it shows most up-to-date wonders of native ListView control in each version of Windows at one place).
]]> diff --git a/src/data/blog/tag/themes/index.html b/src/data/blog/tag/themes/index.html index a3b1b58..360f547 100644 --- a/src/data/blog/tag/themes/index.html +++ b/src/data/blog/tag/themes/index.html @@ -7,13 +7,13 @@Our great inspiration for designing Better ListView is nothing less than the mighty Windows Explorer. This file manager uses obviously much more powerful control that the regular .NET list-view alone is.
It supports some extra views, line Contents and Extra Large Icons. It is also possible to adjust image size by rolling a mouse wheel while holding Control key.
Better ListView has the capability of displaying item icons with arbitrary sizes, but we also extended it with one extra view: Thumbnails:
-Thumbnails Sample
Thumbnails Sample
This view aligns items in the center while keeping constant spacing between items. Thumbnails also keep just single line of text for compactness. On the other hand, LargeIcon view varies horizontal space between items to fill client area evenly and breaks long text into several lines.
The constant spacing is inspired by various photo managers, where image thumbnails are better viewed side-by-side (and the view looks also more organized).
Image thumbnails also look better with some kind border or frame. We added this new feature in Better ListView 1.5 and it works in all views. There are several pre-defined types of borders, but user can draw his own:
@@ -53,10 +53,10 @@Thumbnails use DropShadow by default, but it can be adjusted for every view separately. One can also adjust thickness of the border/shadow and define custom spacing around image.
Take a look at one possible setting:
-Image Borders
Image Borders
This is SingleOffset border of width 3 pixels. Notice that also column header images can have its borders (these are SymmetricShadow).
When the border is defined and image size should be kept the same, some spacing have to be added around image. You can adjust this spacing to draw you own borders or any additional graphics (such as overlay icons). Here is an example –
-Thumbnail with Extra Icons
Thumbnail with Extra Icons
You can download Better ListView and play with it yourself.
]]> diff --git a/src/data/blog/tag/thumbnail-view/index.html b/src/data/blog/tag/thumbnail-view/index.html index bd2dd09..bf26687 100644 --- a/src/data/blog/tag/thumbnail-view/index.html +++ b/src/data/blog/tag/thumbnail-view/index.html @@ -7,13 +7,13 @@The component is fully customizable and by default inherits native Windows theme. We tested it on Windows 8 with success:
-Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser contains default implementation for loading thumbnail images from disk. If you want to gather all images from a given folder (say “c:\images”), display them in Better Thumbnail Browser and load them on background, the code is particularly simple:
thumbnailBrowser.Path = "c:\\images";diff --git a/src/data/blog/tag/thumbnail/index.html b/src/data/blog/tag/thumbnail/index.html index 0096da0..8df6b3d 100644 --- a/src/data/blog/tag/thumbnail/index.html +++ b/src/data/blog/tag/thumbnail/index.html @@ -7,13 +7,13 @@
The component is fully customizable and by default inherits native Windows theme. We tested it on Windows 8 with success:
-Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser contains default implementation for loading thumbnail images from disk. If you want to gather all images from a given folder (say “c:\images”), display them in Better Thumbnail Browser and load them on background, the code is particularly simple:
thumbnailBrowser.Path = "c:\\images";diff --git a/src/data/blog/tag/thumbnailbrowser/index.html b/src/data/blog/tag/thumbnailbrowser/index.html index 0945ef4..a66b7d3 100644 --- a/src/data/blog/tag/thumbnailbrowser/index.html +++ b/src/data/blog/tag/thumbnailbrowser/index.html @@ -7,13 +7,13 @@
Our great inspiration for designing Better ListView is nothing less than the mighty Windows Explorer. This file manager uses obviously much more powerful control that the regular .NET list-view alone is.
It supports some extra views, line Contents and Extra Large Icons. It is also possible to adjust image size by rolling a mouse wheel while holding Control key.
Better ListView has the capability of displaying item icons with arbitrary sizes, but we also extended it with one extra view: Thumbnails:
-Thumbnails Sample
Thumbnails Sample
This view aligns items in the center while keeping constant spacing between items. Thumbnails also keep just single line of text for compactness. On the other hand, LargeIcon view varies horizontal space between items to fill client area evenly and breaks long text into several lines.
The constant spacing is inspired by various photo managers, where image thumbnails are better viewed side-by-side (and the view looks also more organized).
Image thumbnails also look better with some kind border or frame. We added this new feature in Better ListView 1.5 and it works in all views. There are several pre-defined types of borders, but user can draw his own:
@@ -53,10 +53,10 @@Thumbnails use DropShadow by default, but it can be adjusted for every view separately. One can also adjust thickness of the border/shadow and define custom spacing around image.
Take a look at one possible setting:
-Image Borders
Image Borders
This is SingleOffset border of width 3 pixels. Notice that also column header images can have its borders (these are SymmetricShadow).
When the border is defined and image size should be kept the same, some spacing have to be added around image. You can adjust this spacing to draw you own borders or any additional graphics (such as overlay icons). Here is an example –
-Thumbnail with Extra Icons
Thumbnail with Extra Icons
You can download Better ListView and play with it yourself.
]]> diff --git a/src/data/blog/tag/thumbnails-view/index.html b/src/data/blog/tag/thumbnails-view/index.html index 412ca1b..a44676c 100644 --- a/src/data/blog/tag/thumbnails-view/index.html +++ b/src/data/blog/tag/thumbnails-view/index.html @@ -7,13 +7,13 @@The component is fully customizable and by default inherits native Windows theme. We tested it on Windows 8 with success:
-Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser contains default implementation for loading thumbnail images from disk. If you want to gather all images from a given folder (say “c:\images”), display them in Better Thumbnail Browser and load them on background, the code is particularly simple:
thumbnailBrowser.Path = "c:\\images";@@ -95,7 +95,7 @@
Our great inspiration for designing Better ListView is nothing less than the mighty Windows Explorer. This file manager uses obviously much more powerful control that the regular .NET list-view alone is.
It supports some extra views, line Contents and Extra Large Icons. It is also possible to adjust image size by rolling a mouse wheel while holding Control key.
Better ListView has the capability of displaying item icons with arbitrary sizes, but we also extended it with one extra view: Thumbnails:
-Thumbnails Sample
Thumbnails Sample
This view aligns items in the center while keeping constant spacing between items. Thumbnails also keep just single line of text for compactness. On the other hand, LargeIcon view varies horizontal space between items to fill client area evenly and breaks long text into several lines.
The constant spacing is inspired by various photo managers, where image thumbnails are better viewed side-by-side (and the view looks also more organized).
Image thumbnails also look better with some kind border or frame. We added this new feature in Better ListView 1.5 and it works in all views. There are several pre-defined types of borders, but user can draw his own:
@@ -108,10 +108,10 @@Thumbnails use DropShadow by default, but it can be adjusted for every view separately. One can also adjust thickness of the border/shadow and define custom spacing around image.
Take a look at one possible setting:
-Image Borders
Image Borders
This is SingleOffset border of width 3 pixels. Notice that also column header images can have its borders (these are SymmetricShadow).
When the border is defined and image size should be kept the same, some spacing have to be added around image. You can adjust this spacing to draw you own borders or any additional graphics (such as overlay icons). Here is an example –
-Thumbnail with Extra Icons
Thumbnail with Extra Icons
You can download Better ListView and play with it yourself.
]]> diff --git a/src/data/blog/tag/thumbnails/index.html b/src/data/blog/tag/thumbnails/index.html index b7b78ae..9a2c818 100644 --- a/src/data/blog/tag/thumbnails/index.html +++ b/src/data/blog/tag/thumbnails/index.html @@ -7,13 +7,13 @@Hot Tracking
This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>Hierarchical items in two groups
+Hierarchical items in two groups
We are currently working hard on finishing Better ListView version 2.0 which will add new features: Support for groups, tree-like item structure (tree nodes are collapsible, as expected), and multi-line items.
We expect to release this upgrade in about a month. It will be a free upgrade for current and new users.
You can even include images into group headers (as you can see in the preview above), which is not possible in .NET ListView.
Groups are collapsible by default and the expand button can be switched off on each group individually.
Here are groups combined with Tile view (the second group is collapsed):
-Groups with Tile view
Groups with Tile view
The previous figure displays vertically oriented groups, but Better ListView also support horizontally oriented groups in the List mode:
-Groups with List view
Groups with List view
We put special effort to mimic the group display and behavior of Windows Explorer. The group headers can display all of the 15 group header states available in Windows visual style and their display is governed by the same logic as in the ListView counterpart.
The group headers always look perfect and native, right out of the box. You don’t need to tweak anything.
This works in the similar way as in the standard TreeView control. Each item (or node) has property called ChildItems which can be filled with new BetterListViewItem instances. SubItems collection can still be used in either items and child-items (child items are treated in the very same way as their parents).
Item hierarchy can be combined with Groups feature as seen in the first preview.
Multi-line items
Multi-line items
A simple setting of item layout (MaximumTextLines property) allows breaking item text into several lines (up to the specified value). When the text is longer than MaximumTextLines, then the default trimming method is used (one from the TextTrimming enumeration: None, TrimCharacter, TrimWord, EllipsisCharacter, EllipsisWord, EllipsisPath).
Multi-line text can be used in every view and also in column headers.
There are two controls derived from BetterListView. One for the navigation pane (folder tree on left side) and one for the file view (on the right side).
+
There are two controls derived from BetterListView. One for the navigation pane (folder tree on left side) and one for the file view (on the right side).
The FolderListView control allows browsing through virtual folders as well as folders on removable drives. We needed this control in our products because .NET does not provide any similar managed control (there is only FolderBrowserDialog, but we actually need a control).
You can use it for your purposes as well, it is available in Better ListView Samples source code.
Many features of Better ListView can be used to enhance file browsing, for example:
@@ -82,8 +82,8 @@Item hierarchy with multi-line items in groups
Item hierarchy with multi-line items in groups
We have added four new major features:
List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.
Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.
Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.
-Thumbnails in groups
DataTable bound to Better ListView
Thumbnails in groups
DataTable bound to Better ListView
We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.
]]>Item hierarchy with multi-line items in groups
Item hierarchy with multi-line items in groups
We have added four new major features:
List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.
Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.
Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.
-Thumbnails in groups
DataTable bound to Better ListView
Thumbnails in groups
DataTable bound to Better ListView
We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.
]]>Hot Tracking
This post will show you how easy it is to make item hot tracking in Better ListView.
+Hot Tracking
+This post will show you how easy it is to make item hot tracking in Better ListView.
First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:
C#
[csharp gutter=”false” toolbar=”false”]
@@ -137,7 +137,7 @@ End Sub
[/vb]
This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.
Thats’ it!
-Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
+Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.
]]>We added easy to understand samples for both C# and Visual Basic.
You can simply follow a link from start menu to open the Visual Studio project for your favourite language, and play with all the features of Better ListView.
-C# and VB Samples projects in Solution Explorer
C# and VB Samples projects in Solution Explorer
We added a Quick Start Tutorial to help you with setup, activation and integration of Better ListView in your projects, as well as many entirely new chapters in the documentation.
@@ -96,7 +96,7 @@Compared to tree-like structure, user can still bind an IList to Better ListView or serialize/traverse through the whole item “hierarchy” with a simple foreach block.
.NET 2.0 supports visual styles through its VisualStyleElement and VisualStyleRenderer classes, but this support is limited to basic elements. When it comes to shiny new elements that can be seen in Windows Explorer (e.g. triangular expando buttons or styles group headers), one have to hack into Windows theme to obtain correct constants. We did this nasty work to bring user visual style that matches exactly what he sees in native controls:
-Visual Style Elements for Groups
Visual Style Elements for Groups
The picture shows all the elements used in “Groups” and “Item Hierarchy” features. As You can see, it is a LOT. Only group header alone has 15 (!) states that should be drawn each in its specific situation. And Better ListView will handle all of them automatically for you.
We’ve taken customized themes into consideration, as well as older themes like “Vista Basic” or “XP Luna” or “Classic”. In all cases, we test control display thoroughly to obtain consistent results (a solid reference for us is a good old Windows Explorer as it shows most up-to-date wonders of native ListView control in each version of Windows at one place).
]]>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:
diff --git a/src/data/blog/tag/variable/index.html b/src/data/blog/tag/variable/index.html index 1afec0e..24501a4 100644 --- a/src/data/blog/tag/variable/index.html +++ b/src/data/blog/tag/variable/index.html @@ -7,13 +7,13 @@By default, each view has its defaults, but you can customize text alignment on every column, item, sub-item and group individually:
Vertical alignments of text
Vertical alignments of text
Various text wrapping modes
Various text wrapping modes
The sub-item in the first column has TextWrapping set to Layout and the layout has MaximumTextLines set to 4. The sub-item text thus can be split to up to four lines. It is actually split just to three because the column is wide enough.
The sub-item in the second column has TextWrapping set to None, which means the text in this sub-item is kept on single line.
diff --git a/src/data/blog/tag/vertical/index.html b/src/data/blog/tag/vertical/index.html index fcfec31..9dc0893 100644 --- a/src/data/blog/tag/vertical/index.html +++ b/src/data/blog/tag/vertical/index.html @@ -7,13 +7,13 @@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).
diff --git a/src/data/blog/tag/view/index.html b/src/data/blog/tag/view/index.html index 96a68e6..189d6b2 100644 --- a/src/data/blog/tag/view/index.html +++ b/src/data/blog/tag/view/index.html @@ -7,13 +7,13 @@Hiding Column Headers
Hiding Column Headers
To hide column headers, simply set HeaderStyle property to BetterListViewHeaderStyle.None. There are other possible styles for all column headers:
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.
@@ -70,11 +70,11 @@So how we neatly hide a column?
We introduced Column Hiding feature in the version 2.0.1. You can simply call Hide() on your column header instance and you’re done! There is also corresponding Show() method provided. Or you can set boolean Visible property. Now the column and all subsequent sub-items are hidden from view (although they are still present in data, of course):
-
Hiding column via context menu...
Hiding column via context menu...
-
...and the sixth column gets hidden.
...and the sixth column gets hidden.
- + ]]>
Compared to tree-like structure, user can still bind an IList to Better ListView or serialize/traverse through the whole item “hierarchy” with a simple foreach block.
.NET 2.0 supports visual styles through its VisualStyleElement and VisualStyleRenderer classes, but this support is limited to basic elements. When it comes to shiny new elements that can be seen in Windows Explorer (e.g. triangular expando buttons or styles group headers), one have to hack into Windows theme to obtain correct constants. We did this nasty work to bring user visual style that matches exactly what he sees in native controls:
-Visual Style Elements for Groups
Visual Style Elements for Groups
The picture shows all the elements used in “Groups” and “Item Hierarchy” features. As You can see, it is a LOT. Only group header alone has 15 (!) states that should be drawn each in its specific situation. And Better ListView will handle all of them automatically for you.
We’ve taken customized themes into consideration, as well as older themes like “Vista Basic” or “XP Luna” or “Classic”. In all cases, we test control display thoroughly to obtain consistent results (a solid reference for us is a good old Windows Explorer as it shows most up-to-date wonders of native ListView control in each version of Windows at one place).
]]>We added easy to understand samples for both C# and Visual Basic.
You can simply follow a link from start menu to open the Visual Studio project for your favourite language, and play with all the features of Better ListView.
-C# and VB Samples projects in Solution Explorer
C# and VB Samples projects in Solution Explorer
We added a Quick Start Tutorial to help you with setup, activation and integration of Better ListView in your projects, as well as many entirely new chapters in the documentation.
@@ -79,7 +79,7 @@See what’s new in Better ListView 1.52.
-Download the new version.
+Download the new version.
We are still working on the new major features (Item hierarchy, groups) as described here. These new features are near completion.
]]>Better ListView custom scroll bar size
Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
+Better ListView custom scroll bar size
+Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:
The component is fully customizable and by default inherits native Windows theme. We tested it on Windows 8 with success:
-Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser with Windows 8 Theme
Better Thumbnail Browser contains default implementation for loading thumbnail images from disk. If you want to gather all images from a given folder (say “c:\images”), display them in Better Thumbnail Browser and load them on background, the code is particularly simple:
thumbnailBrowser.Path = "c:\\images";diff --git a/src/data/blog/tag/winforms/index.html b/src/data/blog/tag/winforms/index.html index b50d8b1..af31dec 100644 --- a/src/data/blog/tag/winforms/index.html +++ b/src/data/blog/tag/winforms/index.html @@ -7,13 +7,13 @@
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:
-
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:
-
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!
diff --git a/src/data/blog/tag/work-focus/index.html b/src/data/blog/tag/work-focus/index.html index 0bc1e9b..476a3a7 100644 --- a/src/data/blog/tag/work-focus/index.html +++ b/src/data/blog/tag/work-focus/index.html @@ -7,13 +7,13 @@We will also take a look on smoother Visual Studio integration, so you can see Better ListView ready in toolbox just after installation (we have to deal with Visual Studio Packages, which is quite an esoteric topic). If Better ListView doesn’t currently appear in your Visual Studio toolbox automatically, you can just right-click the toolbox window, and use “Choose Items” to add the DLL file yourself.
Some background info for the more curious of you: Version 1.5 of Better ListView was very fast. It was so fast because every item in the list had precisely the same size. Some operations, like hit testing, was done in constant time and no extra measurement of individual items was necessary. The new major 2.0 version of Better ListView supports items with variable sizes, and irregular layout consisting of grouped items. However, we observed that even in complex settings, there are just few “types” of items – for example, there are only three possible item sizes when using multi-line items with up to three lines of text. Our optimizations will thus be focused on taking advantage of this to reduce most expensive operations back to constant time complexity.
-photo by Michael Roper
photo by Michael Roper
Compared to tree-like structure, user can still bind an IList to Better ListView or serialize/traverse through the whole item “hierarchy” with a simple foreach block.
.NET 2.0 supports visual styles through its VisualStyleElement and VisualStyleRenderer classes, but this support is limited to basic elements. When it comes to shiny new elements that can be seen in Windows Explorer (e.g. triangular expando buttons or styles group headers), one have to hack into Windows theme to obtain correct constants. We did this nasty work to bring user visual style that matches exactly what he sees in native controls:
-Visual Style Elements for Groups
Visual Style Elements for Groups
The picture shows all the elements used in “Groups” and “Item Hierarchy” features. As You can see, it is a LOT. Only group header alone has 15 (!) states that should be drawn each in its specific situation. And Better ListView will handle all of them automatically for you.
We’ve taken customized themes into consideration, as well as older themes like “Vista Basic” or “XP Luna” or “Classic”. In all cases, we test control display thoroughly to obtain consistent results (a solid reference for us is a good old Windows Explorer as it shows most up-to-date wonders of native ListView control in each version of Windows at one place).
]]>By default, each view has its defaults, but you can customize text alignment on every column, item, sub-item and group individually:
Vertical alignments of text
Vertical alignments of text
Various text wrapping modes
Various text wrapping modes
The sub-item in the first column has TextWrapping set to Layout and the layout has MaximumTextLines set to 4. The sub-item text thus can be split to up to four lines. It is actually split just to three because the column is wide enough.
The sub-item in the second column has TextWrapping set to None, which means the text in this sub-item is kept on single line.
diff --git a/src/data/blog/tag/wrapping/index.html b/src/data/blog/tag/wrapping/index.html index c674f26..b60b422 100644 --- a/src/data/blog/tag/wrapping/index.html +++ b/src/data/blog/tag/wrapping/index.html @@ -7,13 +7,13 @@Contrary to many custom controls, Better ListView adjusts itself to current theme even if the theme is changed in run-time. For example, when user of your application switches theme from Classic to Aero, or to some other custom theme with elements of different sizes, Better ListView re-measures itself for the new theme smoothly. Reloading the component or re-starting the application is not necessary.
One of the sweet bonuses of using Better ListView 2.0 instead of regular .NET ListView is the full Groups functionality in all themes and all versions of the operating system. For example, groups are not collapsible in standard ListView on Windows XP and even does not support images. In Better ListView, however, you are able to unleash full potential of groups everywhere.
The following images show Better ListView in different Windows themes: Classic, XP Luna and Aero:
-Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
Better ListView in Classic theme
Better ListView in XP Luna Theme
Better ListView in Aero Theme
]]>
Compared to tree-like structure, user can still bind an IList to Better ListView or serialize/traverse through the whole item “hierarchy” with a simple foreach block.
.NET 2.0 supports visual styles through its VisualStyleElement and VisualStyleRenderer classes, but this support is limited to basic elements. When it comes to shiny new elements that can be seen in Windows Explorer (e.g. triangular expando buttons or styles group headers), one have to hack into Windows theme to obtain correct constants. We did this nasty work to bring user visual style that matches exactly what he sees in native controls:
-Visual Style Elements for Groups
Visual Style Elements for Groups
The picture shows all the elements used in “Groups” and “Item Hierarchy” features. As You can see, it is a LOT. Only group header alone has 15 (!) states that should be drawn each in its specific situation. And Better ListView will handle all of them automatically for you.
We’ve taken customized themes into consideration, as well as older themes like “Vista Basic” or “XP Luna” or “Classic”. In all cases, we test control display thoroughly to obtain consistent results (a solid reference for us is a good old Windows Explorer as it shows most up-to-date wonders of native ListView control in each version of Windows at one place).
]]> diff --git a/src/data/blog/tag/xp/index.html b/src/data/blog/tag/xp/index.html index 44cd674..f1c12b0 100644 --- a/src/data/blog/tag/xp/index.html +++ b/src/data/blog/tag/xp/index.html @@ -7,13 +7,13 @@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:
-
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:
-
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!
diff --git a/src/data/blog/tag/zen-coder/index.html b/src/data/blog/tag/zen-coder/index.html index 9ad0e6e..ee81ce2 100644 --- a/src/data/blog/tag/zen-coder/index.html +++ b/src/data/blog/tag/zen-coder/index.html @@ -7,13 +7,13 @@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:
-
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:
-
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!
diff --git a/src/data/blog/tag/zen-habits/index.html b/src/data/blog/tag/zen-habits/index.html index 7aecc60..4fdabf8 100644 --- a/src/data/blog/tag/zen-habits/index.html +++ b/src/data/blog/tag/zen-habits/index.html @@ -7,13 +7,13 @@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:
-
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:
-
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!
diff --git a/src/data/blog/tag/zen/index.html b/src/data/blog/tag/zen/index.html index 64bbf09..e354ba6 100644 --- a/src/data/blog/tag/zen/index.html +++ b/src/data/blog/tag/zen/index.html @@ -7,13 +7,13 @@
Daniel N says: 