I am re-designing some GUI items and want to implement something like the following:
As you change options in the TreeView on the left, the controls on the right change according to the option selected.
My question is, what is the best way to implement this? I was thinking of setting the visible property to true / false for each control to it's respective TreeView option selection; however, designing this on the VS GUI editor would be pretty painful as there would be hundreds of controls all over the place and on top of each other.
User controls. Create the blocks you have outlined in red as user controls and add/remove as you select/change node in the treeview.
If you want a "buffer" effect to avoid flicker when removing an existing control, then use a tab control with two pages (without showing the tabs.) Start with showing TAB1 then when selecting a node in the treeview add the correct control to TAB2 and then make TAB2 the active page. And then remove any existing controls from TAB1. And then the other way around when the next node is selected. etc etc.
Related
I am trying to achieve this look&feel in WPF.
It basically acts like a TabControl, with the tabs on the left (vertically)
The right side of the window completely changes depending on which item you have clicked on the left "nav bar":
Oculus UI
What I did:
I started doing a Custom Control. A grid with two columns, a StackPanel in the left column in which there will be a clickable button/label for every menu entry (vertically of course). A Property MenuEntries which is a List<string>.
How do I get the control to add a "tabpage" (a grid/canvas?) programmatically for every MenuEntry the user adds at design time?
How can I achieve the behavior of the TabControl during design time, i.e. the content on the right side changes as soon as the user clicks an item on the left (in the designer/editor)? (kind of like the TabControl itself?)
Is this the right approach or would you do that completely differently?
Yes, you can use TabControl for that, just set TabStripPlacement="Left", (some more details)
The whole rest: colors, margins etc is set via styles.
Also, to save you a lot of trouble, use MVVM (with some framework for WPF) for that. Set ViewModel collection as ItemsSource for the TabControl.
Then, when you select one of the tabs, the control will display the view for the selected VM.
DO NOT set TabItems in xaml for each tab, this is wrong way to go in the long run.
I have created a form that shows data and the filter that has checkbox in it
combobox
I have used a Button and a Panel to do this and found that the panel is only shown in the parent's panel not float like the combobox
or panel can't do like this?
Regards
You want something that cannot be done with parented components (like panels)
I see some options:
(1) owner draw a combobox to include checkboxes, see Codeprojects https://www.codeproject.com/Articles/31105/A-ComboBox-with-a-CheckedListBox-as-a-Dropdown
or
(2) Create a small floating popup form without system menu and a single pixel border. Inside the form, you could place a CheckListBox docked Fill to allow for filter checkboxes for each item.. you may have a look at this topic Is there a simple way to implement a Checked Combobox in WinForms
(3) Both solutions have drawbacks. Actually it may be better to avoid it, find another way to specify your filter options, redesign your UI.
I have created a Windows form using a Tab Control, but it has a header with it. I want to hide it. I am not able to do it using any properties of the Tab Control. Is there any property defined for hiding the tab header for the Tab Control without going through the code?
Use following code to hide the tabs or set these properties in design.
tabControl.Appearance = TabAppearance.FlatButtons;
tabControl.ItemSize = new Size(0, 1);
tabControl.SizeMode = TabSizeMode.Fixed;
You want the tab panels without the feature allowing a user to switch between them, so I suppose you want to create few separate sets of controls to be shown to the user one at a time. You can achieve this in several ways (you can choose one of them if you find it appropriate in your case):
Use several Panel controls instead of several tabs in the TabControl, however, it would be hard to work in the designer, because all the controls would be visible
Use different Forms instead of tabs to keep the layout parts separated. It can be ok, but you may not want to use multiple Forms, so it depends on a specific case.
and finally, the suggested solution:
Encapsulate each set of controls in a UserControl. This allows you to keep each layout separately, so you can easily design each of them without the other controls getting in the way ;). The the code handling each of the layouts would also be separated. Then just drag those controls in the Form and use set their visibilities appropriately to show the one you want.
If none of those suggestions work for you, let me know, so I can look for other possible solutions.
It's more easy as you think, you just drag the panel's window upper, so will be outside of the form.
Use DrawMode: OwnerDrawFixed will hide TabPage header text DrawMode : OwnerDrawFixed
Another way to achieve the same (or similar) is: You can remove tabs from TabControl.TabPages collection and then add the tab you want to show.
During the Form initialization I remove tabs (so into the designer I can easily manage them) and in some control event (as button click) I show the tab the user has to see.
Something like that:
// During form load:
ctrTab.TabPages.Clear();
// ......
// During button click or some other event:
if(rbSend.Checked)
ctrTab.TabPages.Add(pgSend);
else
ctrTab.TabPages.Add(pgReceive);
In this way the user can still see the header tab but just as title of controls group, he can't change/switch the current active tab.
I am making a windows application in C#.
I want to use the checkbox that comes in windows 7 control panel program feature.
If the subcheckboxes of the tree are all not selected then the parent checkbox should be filled
If all subitems are selected then the parent checkbox should be checked
If all subitems are unselected then the parent checkbox should be unselected.
I am using separate checkboxes (like checkboxImageList, found in google), not a treeview checkbox.
Well, a treeview checkbox would save you a lot of hassle here, because you can just use LINQ to check or uncheck all nodes when a node is clicked by handling the Click event (let's say clickedItem is the node that was clicked:
foreach (TreeNode node in clickedItem.Nodes.ToList())
{
node.IsSelected = clickedItem.IsSelected;
}
Also, from a user interface point of view, the TreeView makes sense. If you absolutely insist on using individual checkboxes, then you just build a tree of CheckBox items in memory, perhaps using something like this sample Tree<T> data type, and then when you click on a checkbox, just recursively travel through the tree until you've checked every box under that one.
But consider what will happen with your app. You might have so many options in the future that you'll need a way to programatically add them. You might need scrolling. You might need to make the entire thing configurable. And once you've added all that, you'll just have re-implemented TreeView.
Maybe you should better use a TreeView. Here's an example of a TreeView managing alone the mid-check state.
I need to create a control which has a single permanent tab ("home"), and all of the other tabs are scrollable.
Right now I am trying to achieve this result by subclassing the TabControl, adding an extra button (which looks like a tab) to the overridden template, and setting the SelectedIndex to -1 whenever the button is clicked. When SelectedIndex is -1, a trigger causes the TabControl's ContentControl to be bound to a special "Home" tab's content. Basically, I am faking the behavior of a real tab and overriding the ability to deselect all tabs in doing so.
This seems to work, except for two problems:
Select example tab #3, then select home. THEN, try to select tab #3 again. Tab #3 doesn't respond.
Select tab #3, then select home. THEN, try to use the menu which happens to be in the same window. When I go to use the menu, #3 pops up as the selected tab again.
I've tried to listen to all kinds of events associated with the TabControl at this point, but none of them seem to give me something I can work with to get around these behaviors.
Is there something out there that will allow me to override the default SelectedIndex behavior? Should I be doing this another way? Ideally, I would like some way to take in a collection of tabs that allows me split up the tabs visually without losing the basic functionality of a TabControl.
The only way I can think of to accomplish this would be to use a custom ControlTemplate for the tab control. You can use StyleSnooper to get the current template. The that is part of that template would need to be replaced with a custom panel that you wrote. You base that on Panel. You would only need to override ArrangeOverride so that it arranged the Home tab in its place, and the others depending on the scroll position.
I was able to implement this by writing my own custom tab panel, as AresAvatar suggested. However, the panel needed to extend from the ConceptualPanel implementation from http://www.codeproject.com/KB/WPF/ConceptualChildren.aspx. The problem is that the panel needs to have IsItemsHost="true" in the TabControl template to preserve the tabs' selection behavior. Unfortunately, once a normal panel is an items host, it's Children can't be changed from inside it's own class code. So, I couldn't add the scroll buttons that I needed. I was able to get around that problem with the ConceptualPanel by adding everything (tabs + scroll buttons) via AddVisualChild.
There might be a better way to do this, but this worked for me.