I am writing an application in C++ using WinAPI.
I have a ListView of items with checkboxes and a scrollbar. Sometimes I need to disable the whole thing. When I call EnableWindow() to do that, the behavior of ListView is ok. It gets disabled, none of the contents are accessible any more. However checkboxes and scrollbar still look normal (not grayed out as the rest of the element).
Is it possible to grey out all parts within the ListView?
Enabled
Disabled
Normal disabled checkbox looks liks this: <- this is how I would expect to see checkboxes in the ListView, same applies to the scrollbar.
Regarding the checkboxes, the documentation for LVS_EX_CHECKBOXES says:
When set to this style, the control creates and sets a state image list with two images using DrawFrameControl. State image 1 is the unchecked box, and state image 2 is the checked box. Setting the state image to zero removes the check box.
You can therefore just change those images at indices 1 and 2 in the image list to their properly disabled variants when you are disabling the whole control.
The process itself of course varies depending on the framework you are using (if any), but generally will be along the lines of creating an Image List of SM_CXSMICON×SM_CYSMICON icons, creating a bitmap (2*SM_CXSMICON × SM_CYSMICON) pixels big, selecting it into a Memory DC for drawing, calling DrawFrameControl(..., DFC_BUTTON, DFCS_BUTTONCHECK | DFCS_FLAT | ..., ...) twice as appropriate, then using that bitmap in the Image List (and saving the previous IL to restore when the window is enabled again).
Regarding the scroll bar, you cannot get access to the implicit scrollbar as a separate window, so I don't think you can easily make it look more disabled without resorting to more custom drawing hacks for the non-client area of the List View.
Or creating an explicit scroll bar control yourself, but then you need to make sure it behaves the same as the original one, changes when the list view items change, respects right-to-left locale and so on.
It might be a bit of a challenge to get all the offsets and possibly transparency right even for the custom checkbox images described above. Even though this is how the List View control itself does it, it might not be worth the effort in the end.
Related
If you look at the thumbnail images in Windows Explorer you'll notice that they have a drop shadow, is this effect associated with the ListView control or does Windows Explorer does some extra coding to accomplish this effect?
Edit:
So it turned out that Windows uses another control. So my question now is how can I add a drop shadow to the "normal" ListView.
For a standard list view, you may want to use a technique called custom draw (https://msdn.microsoft.com/en-us/library/windows/desktop/ff919569(v=vs.85).aspx).
Basically, you ask your list view not to draw its items, but instead send you some window messages for you to draw them yourself. This is a very flexible but also troublesome technique, because you need to handle many things (like whether an item is selected/disabled, font, color etc.)
The drop shadow you see in Windows Explorer is not publicly available for you to use. So you will have to custom-draw the items (NM_CUSTOMDRAW) by yourself.
Not sure if such effect is available in GDI/GDI+, but Direct2D does have one: https://learn.microsoft.com/en-us/windows/win32/direct2d/drop-shadow
I'm making my own UI from scratch using OpenGL that is why I'm asking this and please don't make any discouragement as this is just a hobby project.
Currently, I'm stuck implementing how this scrollbars really work. In my current implementation, the content scrolls at the wrong step value as well as the thumb, meaning, I set the value manually like 1px step for each of them.
The structure of my scrollbar implementation is describe as follows:
I draw scrollbars i.e the main rectangle where the 3 button lies.
Those 3 buttons are, thumb, buttonBack and buttonNext.
All of them do the basic logic of scrollbars i.e when I click each one of them, they moved. But the whole part(scrollbar) don't know how to scroll contents
So what I did is: I make another object and I call it scrollarea
It has two scrollbars, vertical and horizontal scrollbar.
I made a function called scrollToX and scrollToY which
does what I named to them.
But the step values I set to them are
manually set up.
I try to google some scrollbar, scrollarea, scrollview or whatever you call to that scrollable rectangle thing, but all I see are implementation and I cannot find any guides how to build your own. I have no choice but to look at their implementation. I try my best to comprehend what they did but their implementation of how their whole UI structure is very different to mine, and I cannot find anything useful there.
So I ask again here if anybody can explain me well how to make a properly functional scrollbar.
Most specific things I'm really concerned of are:
How do I determine the thumb step value?
How do I determine the content step value?
All of these depend on your content -
Is it just an image ? If so, you only need to change the offset depending on the size of the image.
Is it a list of values like in Windows explorer ? Then you need to create a data structure first that contains all of it, and shows the content that fits within the window as it scrolls.
OpenGL does not fit into this discussion.
I'm developing a Qt application and it's currently in an internal beta test. One member of the company has Windows configured to display text larger than its normal size, which breaks my UI. The About page, for example, currently looks like this:
but under his settings, looks like this (note the clipped text):
Coming from a C#/Winforms background, I'm amazed that I can't seem to find some easily configurable label property such as Form.AutoSize that will automatically size the labels to fit their containing text. I've tried messing with sizePolicy, scaledContents, and a few other properties, but none seem to do this.
I've come across various threads (such as this one) which give instructions for scaling the text to the label, but I want to do the opposite - scale the label to the text to facilitate for those with enlarged text settings like my co-worker. Is there a straightforward way to do this?
There are at least three solutions to this problem.
Use layouts. Their contents are scaled according to the size of the window.
Make a code which is executed whenever window size is changed. In that code, you get the width of the longest text in the window (How?)(another way) and then set window wider than that.
Do the same as in solution #2, but execute the code only when the dialog is shown. After that, alter the window properties so that its size cannot be changed.
folks!
I use a listview (Icon mode) to display items which consist of an image and a label.
As you can see in the shots the row height is variable on y depending on the label length. The problem is that I want the complete labels to be drawn, but they are automatically shrinked into two lines:
The strange thing about it is that once you select an item the whole label will be shown:
This is also the case when deselecting the item, but when another item gets selected, only that one will be shown completely.
Is there a way (without drawing the text manually) to avoid truncation in my case?
If some code is needed to answer this question, don't hesitate to ask.
Greetings,
Satara
I'm guessing this was a design choice: make things look less cluttered. E.g. picture your desktop with all labels shown completely... will look messy in my case.
However, you can fix this by drawing the label yourself. Have a look into custom draw which is a service provided by the list control. The thing is that it's usually an all or nothing approach, so this will likely require you to draw everything yourself: border, image, label, etc. The other option is to get hacky: subclass the window and draw the labels again after Windows did in response to several messages (unfortunately Windows does not restrict the painting to WM_PAINT, an optimization that is a left-over from the old days...)
I have a ListView-like control that displays a list of items of various heights. The contents of the list, and the heights of the items can change – a background thread is populating the list and calculating the layout of each item, possibly even while the user is scrolling the content.
Which brings me to my question: How do I display a useful vertical scrollbar for this view? I’ve seen cases (notably web browsers) where the slider “jumps away” from the mouse cursor while the user is dragging it, the result of the underlying content growing in height. I don’t want that.
So far
Instead of the slider representing the viewport height relative to the content height, maybe it could represent a point in a timeline instead? (The items are sorted by timestamp). This would at least prevent the scrollbar from changing as item layouts are calculated.
Get rid of the scrollbar altogether and use a forward/backward rocker switch like the one used in Picasa (the further the slider is pulled upwards or downwards, the faster the view is scrolled, until the user releases the slider). If I take this route, are there any controls you can recommend?
I am using Qt, but this applies to UI design in general.
IMO the fundamental problem with a classic scrollbar is that due to background population, the valid range is changing - and thus, the meaning of a scrollbar position changes.
If you can predict the full range of items, you can still provide a scrollbar and replace yet-unknown items with "loading...".
Otherwise, a rocker (is that an official name?) would be the next best thing to use.
However, since you have a dedicated scale (timeline), it might be better to have separate buttons that jump a dedicated time (e.g. one minute, one hour, one day, ..). For a fancier look, you could create a rocker with "hot" areas that jump for a specific time, whereas the areas inbetween are interpolated (linear or or logarithmic, depending on the scale to cover).
i.e. line this (drawing just the "backward" half):
--------------------------
|##|XXXXXXX|##|XXXXXXX|##|
--------------------------
-1h -1m -1s