Are Visio-Like WPF GUI's possible? - c#

I want to create buttons and displays in WPF that look something like the Visio Flow Chart displays. Are there classes for that?

Here's a series of articles which show you how to create a drag'n'drop flow chart designer in WPF:
http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part4.aspx

The problem with that particular implementation (WPF Diagram Designer on Code Project) is that it is not MVVM based and generally doesn't use an architecture that is flexible or extensible to further development (e.g. just wanting to add Undo/Redo support would argue for a rewrite). It does, however, include a path finding algorithm (though in production use I fear it may be a little buggy).
I would recommend looking at the WpfDesigner.* assemblies in the SharpDevelop project (it's open source) and the WPF DrawTools on Code Project (http://www.codeproject.com/Articles/22776/WPF-DrawTools). The architectures of both of these are at least somewhat amenable to further development. Just ensure the licensing is compatible with your use, particularly for SharpDevelop.

I found http://www.codeproject.com/Articles/182683/NetworkView-A-WPF-custom-control-for-visualizing-a quite good. You would need to extend it with some UI templates to get the shapes you want and perhaps change the connector attachment scheme to fixed locations.

Related

WPF- How to Make Menu control look native

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.

Do WPF application require the use of XAML?

I am wanting to learn C# and it seems everyone is switching from using WinForms to using WPF. WPF applications seems so much more complicated to me because of the use of the .XAML files that are used to building the Forms.
I am just asking before I get really involved, is the XAML files the only way to build WPF applications? Is there an easier method? I know I could just learn to use the WinForms which seems a lot easier since you basically have a Form object that you work with code but like I mentioned I think it would be best to build WPF apps
XAML does make things a lot easier if you know how to use it because it is more readable and declarative, but you can do (pretty much) anything in C# code as well if you like.
e.g.
<Border BorderBrush="Red">
<TextBlock Text="Lorem Ipsum"/>
</Border>
vs.
var border = new Border();
border.BorderBrush = Brushes.Red;
var textBlock = new TextBlock();
textBlock.Text = "Lorem Ipsum";
// The following step is implicit in XAML via the structure
border.Child = textBlock;
Though this can be written more concisely and hierarchically:
new Border
{
BorderBrush = Brushes.Red,
Child = new TextBlock
{
Text = "Lorem Ipsum"
}
};
Generally i would always recommend using XAML, reasons include:
The parser optimizes the tree construction according to WPF's layout system.
Creating DataTemplates in code is not supported. The construction using FrameworkElementFactories has been deprecated in favour of using the XamlParser (and i definitely do not recommend juggling XAML strings in code).
Separation between UI and code.
XAML is certainly not the only way to build WPF applications. After being run through a couple of tools XAML itself is translated into C# / IL which is used to actually build the UI. There is nothing stopping you from writing the exact same code and building a WPF form by hand.
I would caution you though to consider not taking this approach. XAML is certainly the tool of choice for building WPF applications. It will be in the vast majority of web samples. There are far fewer samples of hand coded WPF applications.
Yes, you can code pure WPF but I don't recommend it.
Petzold's book Application = Code + Markup walks you through using pure WPF from code before getting into using XAML. It's readily available second-hand and you can see the sample code there on the website. It's also available online on the Safari ebook site, so you can read for free with a trial account for a couple of weeks. His book is a very serious attempt to teach you WPF without XAML getting in the way as contrasted with the XAML-heavy approach of many other books.
The visual editor in VS2010 was much better than the previous one so you don't necessarily have to understand much XAML to create your interfaces. I also suggest trying the Expression Blend tool to see if you can get use to its "designer approach" to creating the interface.
WPF has a ton of flexibility in where you choose to do things. I've taken a more code-centric approach and use XAML for the layout and styling but do my binding of data and commands in code. That gives a cleaner style of XAML and avoids you having to learn some nuances of how to specify bindings in XAML. For easing the learning curve, I recommend starting with that approach.
I also suggest you start out using the MVVM pattern with a framework such as MVVMLite which will provide a lot of infrastructure for you and help with the separation of GUI and logic.
While you CAN build everything in codebehind, XAML IS the easy way to build WPF apps. Doing things this way also helps with seperating your view from your program logic. Ideally, a WPF development team would consist of at least one programmer/designer who is in charge, so to speak, of the XAML (or visual side) of things. they would be making animations, and other visual elements. and of at least one "normal" developer who is in charge of the programming logic and data model type things. Of course, this is not an ideal world.
No you do not have to but at #H.B. states it makes it easier.
If you use and IDE like Visual Studio, just like WinForms you have a designer plus Expression Blend. If you find XAML overwhelming at first perhaps play with that rather than going straight into XAML.

In what language these are made

I have seen some applications having such a rich layout that a person starts hating desktop applications like traditional c#.I was wondering how to make applications having GUI like this is it possible to make it in c#?
According to the title, this uses WPF, which can be used with C# and/or XAML. It can actually be used with any .NET language.
The problem is not the programming language. What you need is:
a UI framework that allows rich layouts (in C#, you'd use WPF),
and, even more important, a designer. With "designer", I mean a human, not a tool. If you look at your screenshot, you will notice that the colors of the background image match those of the buttons, that the buttons match the content circle, that the header of the content circle ("Getting Started") matches the header of the window.
So, really, this is not a matter of programming language. What you need is a design. Implementing it is the easy part (at least with technologies such as WPF).
Look at the window title... "Xceed DataGrid for WPF Recource Center". I might be going out on a limb here, but I'm guessing that it was written using WPF and C#.
Only the developers know for sure! Okay, the window title gives it away
Quick guess, they're using Windows Presentation Foundation, which isn't a language, but part of the .NET Framework (starting with 3.0).
Adding some resources here . . .
You have to use WPF for that, and probably with some custom controls.
For WPF have a look here:
Wikipedia
MSDN
Expression Studio
For already made controls you can check:
Xceed
Infragistics
Devexpress
There are a lot more out there even a lot of free ones. All the above are commercial but i think they have a few free samples.

What is Silverlight's relationship -- if any -- to WPF?

I was working with a WPF application and I decided that the controls and graphics I wanted to display on the grid might look better if it was a silverlight component.
I thought this way because of all the cool silverlight controls that look very flash-like.
But now that I have gottem my Visual Studio 2010 set up with SIlverlight, it seems that every silverlight app I can make are ASP.NET in nature. It seems that instead of a cool GUI control to make, Silverlight is telling me that it is primarely a dataflow sort of application for the web.
What is the relationship, if any, between WPF and Silverlight. Can I or can I not put a silverlight control into my existing WPF application?
It's my understanding that Silverlight is like "WPF lite", and that in many ways they are almost the same thing but made for different purposes (desktop vs. web). If you want your wpf application to have a different look, you don't need to bring in any other controls from silverlight, because you can simply re-style or re-template them to suit your needs (which you can also do in silverlight). But you can't simply use silverlight controls in wpf because they're compiled to run on different runtimes.
Silverlight does have a number of un-official controls in the silverlight toolkit which are not included in wpf or the wpf toolkit. They are open source, and if you really want, you could port them to wpf, especially since the code is very similar to wpf.
Silverlight is essentially a subset of WPF that is used to create web-based applications.
You might be able to jump through some hoops to get a limited Silverlight application running in WPF, but I doubt it would be worth it...
I know others may point out that SL is WPF lite.
But hope you find out they are different frameworks at least right now though they share XAML, and a similar model.
Not sure if in the future they become the same, but keep the differences in mind is critical at this moment. :)
We know DevExpress is now shipping the same code base of their components for WPF and SL, but that does come after putting a lot of efforts.
http://community.devexpress.com/blogs/ctodx/archive/2010/04/20/merging-our-silverlight-and-wpf-ui-controls.aspx

How do I give professional look and feel to my .NET windows application?

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.

Categories

Resources