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.
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 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 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 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've come across the strangest bug pertaining to DataGridViews in Windows Forms.
I have a TabControl, that is supposed to contain a docked DataGridView in each tab page. I thought it would be convenient that the grid is focused upon changing the tab page, so that the user could simply hover the mouse over the grid and start scrolling when he changes the page. So, I just put a grids[tabs.SelectedIndex].Focus() in the event handler for changing the tab page.
However, something really strange happened. In my test application, I have three tab pages. If I try scrolling the grid right after starting the application, it doesn't work; I have to click in the grid first. I was expecting this. However, if I change the tab page, I can't scroll in any of the other grids until I click, except for the first one!
So, if I switch pages to the second page, then back to the first, I can automatically scroll that grid without clicking, but if I then switch to the third, I have to click for the grid to focus.
I had a look at the CanFocus properties of the grids, and it seems that only the first grid has it set to True. They are all created programmatically, and all in the same way. I don't see why they would be different.
Any ideas?
Inactive tab pages have their Visible property set to false. The documentation for CanFocus says:
In order for a control to receive
input focus, the control must have a
handle assigned to it, and the Visible
and Enabled properties must both be
set to true for both the control and
all its parent controls
Well, I solved it. Stupid programming error on my part, I had grids[tabs.TabIndex].Focus() instead of grids[tabs.SelectedIndex].Focus().
Oh well.