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.
Related
I currently have an application that uses a ToggleButton/Popup feature and it all works as expected, but I wanted to see if there's a way (either through control templates or custom controls) that allows the toggle button to be included as part of the popup window.
The effect I'm going for is similar to the standard TabControl/TabItem layout but instead the ToggleButton would replace the header of the TabItem and the Popup would serve as it's content.
In the end, I want to have the Popup window display to the immediate right side of the ToggleButton and have one continuous border that wraps around the outside edges of the ToggleButton and the outside edges of the Popup window with no border inbetween. The final appearance would show no separation between the two controls, and the user would perceive the ToggleButton and the Popup as a single control object.
I was thinking it might be possible to edit a template of a standard TabItem and have it's content property display as a popup, but haven't tried it yet.
Let me know if you think this is the way to go or if there's any other potential solutions. Thanks.
Almost everything in WPF can be done in multiple ways. The same is true with your goal.
If you plan on reusing this control in multiple places, I would suggest building it as a custom control. I build custom controls and UI libraries for a living, so I am a bit biased.
I would build a custom control that inherits from HeaderedContentControl. The Header property is the content of your ToggleButton, and the Content property would be the content of your Popup. Since you own the ControlTemplate and code, you can make it look and function exactly how you need it to with no compromises.
I am working on a project in which I am using a property grid to display the properties of the selected control.
The Property Grid is fixed to the left edge of the container and in the rest of the space I have the form I am designing.
On clicking a control on the form, the specific control’s property is getting selected.
In the above figure, I have selected the textbox and the textbox’s properties get shown on the propertygrid.
Here if you observe, by default, the Name property is highlighted as well.
Is there some way to unselect this property programmatically?
I have tried some suggestions online but none have helped. I am not able to find find a way to remove all selections from the PropertyGrid, but its behaviour seem to be different form a DataGrid...
Here is why I need this...
On selecting a control, if a property in the property grid is selected, then the property is getting modified.
For example, If i cut the control using Ctrl + X, the selected value in property grid is getting cut which in some cases is forcing user to set the property before modifying anything on the form.
I have tried selecting multiple controls, but in that case alse the selected property seems to be persistent
Since PropertyGrid uses DefaultProperty to select a property in its grid, as an option you can set DefaultProperty attribute at run-time for your object to a non-browsable property, for example:
this.propertyGrid1.SelectedObject = null;
TypeDescriptor.AddAttributes(someControl,
new Attribute[] { new DefaultPropertyAttribute("Site") });
this.propertyGrid1.SelectedObject = someControl;
Well, what you are trying are hacks. It is never a good idea to do such hacks particularly if you are not the only person that use the software.
In your case, the focus should be on the designer while you interact with it. So if the user press Ctrl+X, the designer should respond to the keyboard and it should not have any effect on the property grid (as only one control can have the focus at the same time).
Thus it is up to you to make sure that your designer is focusable, that it has the focus when initially displayed, that it get the focus when you press the TAB key. Pressing the TAB key again should put the focus on the property grid so that user can interact with the grid without using the keyboard.
If you have more than these 2 controls, then obviously TAB should also stop at any appropriate controls. Also, it can be a good idea to have some direct shortcuts like F4 to (show and) activate the properties pane.
If you are not able to make it works, then the best compromise would be to use another windows for the properties grid. By using a distinct Tool windows for the properties, it should not respond to the keyboard when the main windows has the focus.
Here are some links that might help you:
Panel not getting focus
Control.Focus Method() — See Remarks section.
In any case, you should not prevent Ctrl+X to works as expected when the property grid has the focus and a property is selected. Users don't like software that do not follows UI conventions.
As a software developer, you should as much as possible ensure that your application follows standard behaviors. I recommend you that you take one or 2 extra days developing your software properly instead of doing hacks.
Often, compromise to gain a few days will never be fix and will be a pain for many years. Better to do it right from the start. Unselecting an item in the property grid is not an acceptable workaround. Your manager should not allows you to do that.
In the form pictured below, the entire content of the right side changes when an item is selected on the left side. Which control can I use to accomplish this effect? I’ve tried a ListBox if anyone can put the code or the design tools .
Picture of form:
The left side is most likely a Win32 TreeView control. The pane on the right is almost certainly a ListView control.
There's really nothing that will automatically swap the views out when you click on the tree control. You'll have to write you own code to toggle the main pane's view based on the item selected in the tree.
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.
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.