Alright, here comes something tricky and I really hope there's some WPF guru here who knows a solution or at least a good approach for it:
I got a menu which can be switched into compact mode. In this mode only the label color, the icon and some informational controls are visible. All content of the menu item is hidden.
Now Normal and Compact modes are nice, but not very smooth. In compact mode the whole menu expands when you move your mouse over it. I'd like to achieve this effect with just one single menu item, but without resizing the whole menu (since the menu has a different background than the rest of the window, it would be visible that the whole menu expanded but not all menu items).
My idea is a "flyout". This alone might not be too difficult to implement, but there's some criteria which should be met in order to make it look good.
Here are pictures of the compact menu and one item in it's normal state.
Now I'd like to achieve that when you move over one of the compact entries, the entry kinda flies out to the left and is visible in it's full state like a popup. The problem here is: I can't remove the control since this would alter the menu order (visibly). I can't use a VisualBrush since it needs to be interactive.
As you can see, this looks pretty ugly.
That is what I would like to achieve (just poorly pasted in):
Any ideas how you could implement this?
Related
I am building an application and I would like the one of the forms to look like the control panel
Would you use a listview with groups?
thanks
No, I don't think you can make the ListView do this. At least not without rewriting its painting routines.
It isn't going to be easy to replicate this layout precisely in WinForms. There's nothing you can just drag over from the toolbox that is going to do it. It is possible, but it will take some effort.
What I would do, conceptually, is break it up into pieces. I count 8 different repeated "blocks". So I'd create a UserControl that models each of these.
Inside of the UserControl, I'd have a PictureBox control to display the icon, a Label control to display the heading, and a TableLayoutPanel that can be filled with the desired number of LinkLabel controls. Set all of the properties of the controls so that they match, and then write public methods to set the icon, heading, and add/remove links.
Then I'd drop a TableLayoutPanel onto my form, set the margins to have lots of whitespace, and add as many of those UserControls as necessary. At the top of the form, of course, you'd need another Label to display the heading/instruction text. Make the form's background white, and you're pretty much there.
The logic to switch between views isn't implemented, but consider whether you really need that. It is important in Windows because users are used to the old way of doing things. This doesn't apply to you.
I'm making a custom dropdown button (since the one included in wpf requires too much hacking to style right). Now that i got the button bit out of the way i need to add the drop down part.
My first thought was to add a stackpanel and use that to contain the items but it gets cut off if it leaves the borders of the grid that the button is in. Next up was the popup primitive, it gets on top of everything nicely enough but position wise it just free floats and i haven't figured out how to make it follow the button it was spawned by. I also tried using contextmenu but that seems to have no positioning controls at all and just sits where the mouse made it..
Anyways wpf is a big package and I'm just getting into it, anybody know which direction i might find what I'm looking for?
Preferred approach normally is to use a Popup. You got two very important properties with a Popup
PlacementTarget and Placement
Setup a binding for PlacementTarget on the Popup to your custom Button and then use Placement to position the Popup accordingly w.r.t to the PlacementTarget(Button)
Placement accepts an enum of type PlacementMode which gives you quite a few options to position the Popup.
Our app has a tab control that shows a variable number of tabs. Most of the time, there are a handful of tabs, and the "tabbed" metaphor is simple and easy to use.
But on rare occasions (when working with certain types of data), we might need many more tabs than will fit across the screen. When that happens, the trusty tab control is no longer a good user experience. Whether you do multiple rows of tabs, or the little scroll buttons, finding the tab you want becomes a huge headache.
Visual Studio's editor can handle this situation with relative grace. It only shows a limited number of tabs at a time (however many will fit across the screen); and if you want something that's not currently visible, there's a dropdown button that shows the complete list. Are there any third-party WinForms tab controls that offer similar functionality -- a few tabs at a time, plus a dropdown?
There will actually be times when even the dropdown list would be too long to fit on the screen, so it would be helpful to know how any tab controls deal with that. A scrollbar (where you can drag the thumb quickly to the right neighborhood) would be great; so would incremental searching using the keyboard.
For purposes of this question, assume that replacing the tabs with some other UI metaphor (e.g. a listbox down the left side) is not an option. (We are exploring that, but that's not what this question is about.)
Telerik have a commercial Winforms control library which has a control called RadPageView. This can behave similar to what you describe when in StripView mode. The library is costly just for this one control though.
DevExpress also have one as part of their XtraEditors library called XtraTabControl. This has an "Additional paint style emulating the Visual Studio 2005 tabbed interface", although there are no screen shots of what that looks like. There is a screen shot on this page, although it doesn't look like what you require.
Infragistics has a WinTab control that can be customized to do this. If you set ShowTabListButton to True, you get the dropdown button that shows a list of all the tabs; and if you set ScrollButtons to None and ShowPartialTab to False, it will only show as many tabs as will fit.
It's also very performant -- I can add 750 tabs in less than a second (as opposed to 6 seconds for the standard WinForms TabControl, and 43 seconds for the DevExpress XtraTabControl). It even supports content that's shared across all the pages, which happens to be something our app needs.
The only downside is, when you click the "tab list" dropdown, it shows the list in a dropdown menu. This menu doesn't support incremental searching with the keyboard; and if the menu is taller than will fit on the screen, there's no way to scroll quickly -- you just get "scroll up" and "scroll down" buttons, which scroll painfully slowly. So when the list is longer than will fit on the screen, this dropdown menu is just as unusable as scrolling horizontally through a long list of tabs.
On the other hand, there's a SpaceAfterTabs property, which lets you leave blank space to the right of the last tab. It would be possible to put a combo box, or some other sort of dropdown control, in that blank space, and roll your own, better-behaved overflow "menu".
I am getting up to speed on the new Microsoft Ribbon for WPF. I am creating a Ribbon with a Quick Access Toolbar. I have six items in the QAT--I'd like to show four of them and put the other two in the overflow button. At this point, all six buttons are showing, with no overflow button. How do I set the number of visible QuickAccess buttons? Thanks for your help.
As per current development is concerned, I think IsOverflowItem is Readonly. So you dont have the ability to specify for the item to be Overflown or not. It depends totally on how much space you have for the buttons. If you resize the window a bit smaller, you might eventually see the buttons being automatically populated in the menu as the menu will be dynamically created.
So based on the current implementation, you can only specify
<ribbon:RibbonQuickAccessToolBar IsOverflowOpen="True">
to make sure that the QuickAccessToolbar overflows when there is no room for the button.
I wrote an article on Ribbon Control which might help you a bit. Take a look
http://www.abhisheksur.com/2010/08/introducing-ribbon-ui-control-for-wpf.html
Thanks.
So I'm just starting out with WPF, and I'm really annoyed by the fact that if I lay two Grids on top of one another, the top Grid isn't opaque. It makes designing extremely annoying. Can this be turned off somehow?
I'm just building your standard Winforms STYLE application, but in WPF. I'm just trying to start bridging the gap here. In Winforms(and VB) you'd always have group boxes or something on your form, and then depending on some user context, one of those group boxes would be on top. Its how I've designed forms since time immemorial. One of two things must be true here:
A) This is not the recommended way to design Windows going forward with WPF, but I don't understand what you're supposed to do
B) There is some property to make the Grids opaque so I can build the Window in the style that I'm used to.
I'm fine with answers that solve either A or B. If I'm not doing things the right way because they've changed, then please enlighten me.
Update: So it turns out, I can make the grid opque by setting the background color, but now it seems like I'm locked into a White background as opposed to sticking with the system colors.
You could use SystemColors to make the control background colour match (rather than being white).
I don't understand why you want to put one grid on top of another though. In WPF you generally use a single grid to stack multiple visual elements within one region. Can you explain why you want to hide things in the background with foreground elements?
It sounds a little like you're implementing a tab control -- switching between pages of controls depending on focus. Have you experimented with the new TabControl?
I'm moving from WinForms to WPF development wherever possible and have found that in doing so it's taken some readjustment. WPF has a completely different way of laying things out and now that I'm more comfortable with it, I think it's superior. I'm guessing you just need to ride the learning curve a little longer.
Hope that helps.
EDIT: In response to your comment, I imagine you can have a tab control without tabs, though I haven't tried it myself (might be worthy of another question on SO). Tab controls are headered controls, meaning that they have a header item and a content item. In this case, the header is the tab button, the content is the page item. You can specify a ControlTemplate that details how these items should be displayed relative to one another.
Interestingly, many other types of common GUI element are also headered controls:
Menu items - The menu item text/icon is the header, and the optional submenu is the content
Tree view - Each node is the header, and optional children are within the content
Group box - The header is, well, the header and the content is, well, the content :)
Note that in the case of menu items and tree views, the type may recursively nest within itself. This is quite elegant and can give some wildly different presentation options over the same logical model with only changes to the control template.
For more information read about HeaderedContentControl and HeaderedItemsControl
You could use the following:
<Grid Background="{DynamicResource {x:Static SystemColors.WindowBrush}}">
<!-- content -->
</Grid>
This will respond to changes in the system colors on the fly (the DynamicResource does this).