Does anyone know some good guides on making Ribbons that actually look good like the one in Office 2010?
Preferably non-Microsoft guides since I've read several already and wasn't too thrilled with the results or ease. Some things in particular that I've never seen replicated are the semi-transparent deselected tab headings, good high DPI scaling, and smooth window resizing, etc. Little things like that make or break the program!
I'm using the Windows Ribbon for WPF (October 2010) / Windows 7 / .NET 4
Here are some options to look into:
DevExpress Ribbon
CodeProject Ribbon Wrapper
Ribbon API
Related
I am currently learning WPF framework; I have some past (not much though) experience with Winforms. One problem I've had in both is that the menubar does not look native. I've found a workaround in Winforms, but I haven't been able to find anything for WPF. I've not had this problem in other frameworks I've used, particularly Qt.
In many pics I've seen, it looks native enough in Windows 7, but not Windows 10. I included some pics.
How it currently looks:
How it should look:
Thanks in advance!
Edit
While I have not seen the possible duplicate link, I am aware of setting the foreground/background on WPF controls. That link doesn't really answer my question. I don't want to come up with my own style at this point; all I want to do is make controls look native.
If custom styling is the only way, that's fine, but if there is another way, that would be preferable.
Thanks!
I don't think there's a quick fix to get what you want. WPF renders using DirectX, allowing for much more flexibility in styling applications. A WPF app should render exactly the same way on any version of Windows - it will not automatically adopt a native look and feel (that was actually one of the main selling points of the technology in its early days).
While MS made the default styling somewhat close to Windows at the time of release (Vista, I think?), if you want WPF controls to have a particular look you're going to have to style them yourself.
This might be an easy one to answer as I'm probably just Googling for the incorrect search terms.
I'd like to change the visual appearance of my application to look more like the interface of Visual Studio 2013. Now with VS you can choose between three color themes (blue, dark and light). I'm trying to Google for ways that I can give my application that sort of look but any search for "theme" or "color theme" results in plenty of hits for how to choose a different color theme for VS.
I'm not so much interested in the colors as such but more the "flat" appearance for lack of a better word. Notice how my application has the standard Windows frame, standard minimize, maximize and close buttons at the top right and how the form's title bar, menu strip and tool strip are all different colors. On the Visual Studio UI, these are all one color and so appears to form a single unit. I also like how the form doesn't have any more border around it than is really necessary. The form basically consists of a "header" at the top (combined title bar, menu strip and tool strip) and a status strip at the bottom. Between those there is nothing but usable real estate, no silly border around the edge.
Is there an easy way to achieve this for my own applications?
This isn't possible with WinForms.
It's possible, but really really hard to achieve and not recommendable.
You need Windows Presentation Foundation.
Why?
First of all you need hardware acceleration. The UI in WPF is DirectX rather than GDI+ (WinForms) so it can make use of the acceleration and processing available in DirectX, and work in 3D.
Visual Studio it self is build with WPF.
If you want a fresh modern Look for your WinForms Application i would recommend Metro for WinForms (WinForms on steroids).
You also should look at ComponentOne Studio WinForms Edition. Maybe one of the 25 designed themes for WinForms suits you.
You need to use WPF for the same
https://msdn.microsoft.com/en-us/library/ms754130%28v=vs.110%29.aspx
https://visualstudiogallery.msdn.microsoft.com/7a4362a7-fe5d-4f9d-bc7b-0c0dc272fe31
For Screenshots:
https://github.com/firstfloorsoftware/mui/wiki/Screenshots
I am new to Creating WPF GUI Applications.
I am a Mid Level Programmer. I dont have any idea or knowledge about the Graphics Development.
I would like to know how do I use the UI Elements designed in Photoshop in my WPF Application.
Eg: I would like to replace the default textbox or the button in WPF with the button or textbox designed in Adobe Photoshop.
Last Information:
I am using Expression Blend 4.
Any Help Would Be Appreciated, Thanks
Starting with WPF
I personally work with a combination of Microsoft Visual Studio (environment) and Microsoft Expression Blend (elements editing).
Blend is a WYSIWYG front-end for designing XAML-based interfaces for WPF and Silverlight applications, and it's good for templates, visual states, and animation.
Editing Templates
If you are working with templates, a nice tool is WPF Theme Editor by DevExpress. It integrates with Blend, and the tree browser and template hierarchy are very useful for locating styles.
One thing you'll always find helpful is access to the actual structural templates for the elements. I usually find myself visiting the DevExpress WPF Controls website, which has a very comprehensive list of libraries and controls.
The Demo Center for DevExpress is also a great downloadable app for extracting and editing templates. I find it particularly useful with complex elements like charts (not included in Blend), where you can toggle the visibility of elements and then move the code to your dev space.
Creating Graphics
For working with graphics themselves, I found Microsoft Expression Design to be quite good for drawing and exporting vectors into png, WPF or Silverlight formats. It has a nice simple set of tools, and you can import elements from vector. Also, version 4 is free.
Testing
I just discovered this nice tool for testing live called Snoop. It's open source, and it allows you to spy/browse the visual tree of a running WPF application (without the need for a debugger), and change properties live.
For all of these you will probably need at least a basic knowledge of how to write/read WPF. I personally use all of the previous and write custom styles for custom elements.
For a new project, I'm writing an administrative tool as a client software.
So far, I've only written some small winforms application with a 'old-lookin' GUI.
I'm thinking of something fresh, new looking like ribbon based design.
The questions that come into my mind are:
1) Should I prefer WPF over Winforms for a ribbon based GUI(though I've never touched WPF before)
2) Are there any recommendations for free ribbon controls? I've found out that Microsoft seems to have this ribbon license, but I still don't get it. Do they offer a full functional ribbon based control? If yes, Winforms or WPF?
Visit http://fluent.codeplex.com/ to download a free ribbon for WPF. This ribbon has the style of the Office 2010 ribbon, and I've already used it in one of my apps. The download also has a lot of examples on how to implement the ribbon into a WPF application.
As far as switching from WinForms to WPF, yes it's a big learning curve, but at some point you should take the dive and start learning it. You'll be glad you did.
I'm using WINFORMS not WPF.
I just know basic c# .net gui programming. I donot want the traditional windows look. I want to have my own custom look (eg. gtalk, antivirus softwares, media players, google chrome).
Actually I'm inspired by google's PICASA software. Its awesome. I want to do something like that.How can I do that? If there is something I should learn please point me.
Also I may have to write my own custom controls (like modified tree view etc..) I guess. Please give some good learning resources.
This article describes how to draw custom windows. The author also shows how to draw non-rectangular windows.
If you could use WPF instead of Windows Forms, this is a good article about customizing window drawing:
http://www.codeguru.com/csharp/.net/net_wpf/article.php/c16379/
There is also a question with some good answers here on SO:
Creating custom forms in WPF?
Update:
I think that skinning and custom drawing is fun to do from a programmers perspective, but I also think that there is almost no benefit for the user.
The creators of the platform you are developing for might have put a lot of effort into the design of their windowing toolkits.
If you just want to change some visual aspects of your application you also should take into account that you might miss some important other aspects of UI design:
consistency
accessibility
aesthetics (if you are overdoing
effects, gradients, ...)
internationalization
...
As you are developing for Windows, you also lose the skinning ability of the OS itself. And I think that some of the skins that come with newer versions of Windows are pretty good.
You can try any of the following:
telerik
Syncfusion
(source: componentsource.co.jp)
Or other components.
They do make your UI pretty.
Edit: if you want to study how they do it, you can buy the source code-- along with documentation and understand from there.
There are some commercial control libraries available.
I can recommend the Krypton Suite. It consists of the free Krypton Toolkit (which contains a lot of skinnable controls) and other non-free controls (Navigator, Ribbon, Docking, Workspace). It has some built-in palettes and renderers that allow you to make your UI look like Office 2010, Office 2007, Office 2003, ...
You want to look for +winforms +skinning. I haven't tried these, but the first hits don't look bad. Most decent skinning tools will be paid for.
From what you said, you want to develop your own custom controls. You have some frameworks for this like Qt which can use Direct3D for hardware accelerated graphics. It also have a Visual Studio plugin. There is a free LGPL version and a commercial version of it.
I remembered about Qt because you mentioned Picasa and as far as I remember, I heard the Picasa UI has been written through Qt.
You can try using "SetWindowRgn(..)" to set an arbitrary region for your window. This may range from giving a rounded rectangle shape to giving a weird looking shape to the form!
Check this out: Link.
There is another option if you are working in Vista(aero enabled), ie you can check out DwmExtendFrameIntoClientArea(..) function here: link text
You can set the form's border style to 'none' and go on to create your custom form! You then might have to create custom buttons to carry out tasks like close, minimise, maximise etc. You might even need to write code for drag and drop events..
For the background, you might need to have a look at the gradient fills to give a great effect, otherwise you can use great looking pictures as Background..! But the latter option isnt good unless you have really good pic.