I am new to WPF and am trying to find the right control.
I am coding a WPF app that has two sections. The left side is an Outlook like sidebar (Odyssey controls).
For everything else I want a control that I can easily swap the contents of based on what is in the side bar.
So the user selects an option in the side bar and all the controls in the main section would change.
If I was writing this in Windows Forms I could just create a few Panels and then show the one that is relevant (and hide the others). When I try this in WPF you can see the contents of the panel underneath. I know I could make them not visible, but I am getting the feeling that I may be going about this the wrong way.
So here is the question. What is the best way (in WPF) to handle content sections of the app to change.
Based on your example (switching what is shown based on what is selected in a side panel) I'd recommend restyling a TabControl because that's really tab switching even if it doesn't look like it. Check out this for a decent example, set TabStripPlacement to Left and you will have a good start.
Depending on how your data is set up a Master-Detail pattern might be another good choice.
If you want to switch everything programmatically you'll want to use a ContentPresenter and DataTemplates for the UI "panels". This article by Josh Smith is about MVVM but his example application is basically the pattern you'll be looking for.
Related
I have problems with editing panels in C# windows forms(Visual studio 2008). I placed some panels into another, and now I have problems with navigating panels inside parental containers. Is there any tool that gives not only drag-drop control, but also tree view of container and panels in it. For example, like Navigator window in NetBeans(IDE for Java). Any help?
I'm not sure about VS2008, but newer versions have Document Outline Window (View > Other Windows > Document Outline)
To not get lost in controls, consider to name them properly. Then you can find them in the list of Properties window.
Instead of label1 use labelInputName, located on panel1, which you also rename to panelInput. This gives parent/child feeling and you will never lost.
If you get lost, use Document Outline window to see tree-like relation via Controls property (who is control of who). This window is a helper (help to find and select control), you will still have to use designer to do changes.
Another important thing is UI design. Whenever you get cluttered or bulky feeling, than it's the time to change something.
Making UserControl for repeatable part is one way.
Another is to differ design and run time (what you see in designer): to example, if you have several panels, which has to be shown at same place, then you can use dynamic container for them (FlowLayoutPanel, TableLayoutPanel) or you can have them placed in a way for you to easily see them in design-time, but their position will be corrected during run-time (to example, in the constructor). Prioritizing designing is a must if you are going to support project and edit functionality in next versions.
p.s.: talking about winforms, but all said should be true for wpf as well.
I have a NavBarControl which contains collection of NavBarGroups.
NavBarGroup have a header and container control. NavBarGroups can be collapsed/expanded.
The button to expand/collapse is on right side. By default it looks like double up/down arrow. I want to customize this button to change its look and feel to indicate collapsed/expanded state.
(using Devexpress in Windows Forms)
For future reference, the self-help and online support at DevExpress is exceptionally thorough, and they will answer questions like this for paid subscribers within 24 hours, usually with a code sample.
In this case there are two ways to achieve your goal (assuming you're on a relatively recent version of DevExpress) as described here.
The "right way" to do what you want is to make a custom skin with your own icons; you can use their skin editor to open your current skin, make changes, and save it. Nearly every aspect of the look & feel of their controls is skinned and you can make pretty significant changes to them.
Deploying custom skins isn't all that complex but it might be a bit overkill for the effect you're trying to achieve. The other option is to custom draw the group caption. There's a sample attached to that post that is a working example of doing so, but you basically implement the CustomDrawGroupCaption event and do your own painting, including whatever icons you want based on the group's state.
I have a TabControl containing Prism regions. I want to trigger some kind of notification (e.g. flashing the tab header) for certain events, and I want to trigger this notification from the components in the Prism regions.
Once the tab containing such a component was open once, this works nicely using VisualTreeUtil.GetParent() and going up until I find my TabControl and can modify it to indicate the notification.
But the problem is that this doesn't work until the tab is opened by the user because VisualTreeUtil.GetParent() returns null; obviously because Prism doesn't hook up the visual tree until then.
Calling UpdateLayout() on the TabItem containing the region doesn't help. I don't want to open the TabItems programmatically, because this would confuse the user.
Is there anything I can do short of implementing a kind of region registry (which would be rather ugly and harder to maintain)?
If you want to look at code, I wrote a minimal solution to demonstrate the issue. The Print Structure button tries to go up the visual tree from the (initially unrendered invisible) hello TextBlock on the second tab. Before you switch to the tab it prints only the TextBlock, afterwards you get to the root of the visual tree. This is what I want to accomplish without switching to the tab.
Adding comment as answer:
This probably isn't exactly the answer you are looking for, but it seems like you're taking a very procedural approach.
Have you considered using an MVVM approach? Each TabItem in the TabControl can have a HeaderTemplate. In the template you can bind to a property in the ViewModel that causes the tab to flash or change appearance
Hm.. IIRC Prism regions are just a configured ContentControl/ContentPresenter. Once they are ready to work, all the bindings and datamodels should be in place, but the trees are left not created because they are invisible. If so, you should be able to call ApplyTemplate() on them to force it. I do not remember, however, if the Prism assigns the contenttemplates/datacontexts upon init, or upon demand - the latter may cause calling ApplyTemplate useless.
I'm making a custom GUI for my application. Basically my application has multiple 'tabs'. Each tab has a panel control binded to it, to display tabs contents. Whenever any of the tabs are clicked, appropriate panel control becomes visible (that displays contents) and the rest of the panels become invisible.
The problem is that when I design them in Visual Studio, it's hard to work, ether panels are stacked up on each other or I put them in different coordinates, and when panel becomes active, it's location is updated.
Is there I way I could design all the panels, like on separate 'form' or something like the same way I have separate classes? if that makes sense. Thanks!
EDIT:
I can't use the standard tab control, because my application has custom GUI, all buttons and everything is designed in image processing app. Tab control doesn't allow me to use my own graphics.
I'm going to take a look at UserControl, thanks everybody!
You can create each tab content in a separate UserControl. Use that each UserControl as the only content on each tab.
You should be able to design each "panel" as a separate UserControl.
Your main Form can just be composed from those UserControls, instead of having the entire UI built into one class.
First I would suggest you stick with the standard .NET controls in most cases. Particularly in this case the standard TabControl seems to be a good fit.
That said, you can place all the panels on the form in their final location (being sure not to place a panel within the other panel). You can then use the drop down in the Properties dialog to select the Panel you wish to work with. Next go to the Format menu and choose Order->Bring to Front. This will bring the wanted panel to the front so you may use the designer on it. You can then continue to hide or show the appropriate panels at runtime.
What is the difference between the winphone 7 Panorama and Pivot Controls? To me they seem very similar, apart from the slightly different visual appearance.
In which situations should one or the other be used?
There is a video on Channel 9 with Amy Alberts and Chad Roberts that talks about the differences between the Panorama and Pivot controls and when you should use each.
In my opinion, the Panorama control is for when you need to create a "hub"-type application (like the Games hub) that acts primarily as a jumping point and offers summary information for the rest of the application. The Pivot is used in much the same way that you would use a tab control on other platforms.
As said above, the Panorama control is really meant for rich Hub type look .. smooth multi-screen scrolling with Parallax effect, ideally including images in the views. The Pivot control is more for presenting slices of the related data to the user or categorizing the content .. the in-built emails & calendar are examples. Both controls are very suited for dynamic data-binding.
Jeff Blankenburg, one of the MSFT evangelists wrote two nice posts explaining their use:
http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7.aspx
Hope this helps!
I would use the Panorama control if the content of your application lends itself to being presented in a format where you think of the screen as being a window into a larger page...one that can loop back around to the beginning. Also, consider whether that content needs to support gestures, especially swipes, because those will cause conflicts between some action intended to take place in a control, for example a map with panning, and the "outer" Panorama control's behavior of scrolling.
I'm also reconsidering using the Pivot control. It has a more distinct division between sections of content than Panorama does and I like both the gesture swiping to switch between pivots and the animation. However, it has caused some tombstoning problems and with the advent of copy-and-paste there could be a conflict between the user trying to select content to copy and the triggering of the swipe gesture to switch pivots. Disabling the Pivot Control swipe gesture talks about a possible work-around, although I haven't tried it and see from the comments below that article that there may be some other issues.