Which layout to use for desining UI in wpf components? - wpf

I'am learning wpf. As a part of learning I'm converting a winforms application into a wpf application using mvvm.
In winforms I just dragged and droped. After that I aligned based on my requirement.
But in WPF when i drag and drop a default grid is wrapping the components and I'm facing great difficulty in aligning the components.
On learning the tutorials on wpf https://www.tutorialspoint.com/wpf/wpf_layouts.htm
I tried to work with but I don't know which is suitable for my UI.
I want to create UI in wpf as below winform
I have used grid and stackpanel but I have issue with alignment. In grid I have issue with adding new elements in the existing row. In stackpanel I face issue with spacing between the components and aligning the compnent.
Can anyone help me on which panel to use for the above kind of UI.

In general you don't use editors for WPF, you edit the layout XAML by hand and use the visualizer as a guide to show whether or not you've done it right. The Visual Studio editor does let you do things like basic layout, but as soon as you start using ControlTemplates/DataTemplates/Behaviours etc you'll quickly find that it's useless (and believe me, that moment will come much sooner than you think). If you really want to use a graphical editor then Microsoft Blend is your best bet, but even that is generally designed for non-programmers. In fact, in the 10+ years I've been a professional WPF contractor I've yet to encounter a single company that actually uses Blend...or indeed any other GUI-driven XAML editor...for their product development.

Related

Need guidance on whether to use Telerik WPF controls or Caliburn Micro or both

Not sure if this an appropriate forum for this, but I need some guidance from those who are further down the road than I am with WPF.
I've used Telerik Winform controls for a years and have mixed feelings about them. They look good, but they are deeply nested, have a steep learning curve, and sometimes don't perform the best. For example, just working with a RadWindow in the WPF designer, it's slow compared with native wpf controls.
I like Caliburn.Micro MVVM framework and MahApps metro styles, but to keep the same look and feel for a ribbon bar I'd need to use another third party tool (like Fluent) or just use the Microsoft Ribbon View control and figure out how to use templates and styles myself (or find an existing metro template for it).
I tried to combine Telerik and Caliburn but had trouble getting them to work. There is a Caliburn Telerik library but its based on Caliburn Micro 1.5.2 and I'm trying to use Caliburn.Micro 2.0.2. Problem is I always get an aero-looking full window title bar and frame wrapped around the Telerik styled window.
I just don't know enough about conventions and such to make it all work together. And frankly, not sure it's worth the trouble. I'm looking for a more streamlined approach that lessens my dependence on pricy and heavy third party controls.
So, I'm looking for guidance on whether I should use straight Telerik, straight caliburn or go through the work of trying to get them to work together.
What I would prefer is to use Caliburn as the mvvm framework with a layer of styling, like what MahhAps provides. And for those controls that aren't styled, like the Ribbon Bar, to either use Microsoft's ribbon bar and find templates and styles that would work or maybe a 3rd party control like Fluent. But would I be getting in over my head in trying to learn templates and styles?
Sorry for the ramble, but I'm frustrated and need some help in working through this. Thanks.
I found a great resource that maybe others new to WPF and struggling with similar questions would benefit from: MarkPad, a Code52 project on CodePlex.
It's written in WPF using Caliburn Micro MVVM framework (although it's version 1.5.2 rather than the current 2.0) and MahApps metro styles with some "roll your own" windows. It's a great looking app with the kind of simple menuing system I was looking for AND an MDI implementation. It's also a good example on how to organize a somewhat complex WPF application, something I was also unsure about.
It answers the question: Do I need to use Telerik? The answer is a definite NO. It's a great learning tool for me and maybe will be useful to others.

Difference in display of WPF and Windows Forms applications

Actually, I have started learning WPF. I have few months of experience in developing Windows Forms applications. Though, I am getting the meaning of a WPF application, but still I am not able to differentiate the difference between two, on the basis of their output.
With reference to this Link: Device Independent Pixel (DPI), I have learnt that whenever the operating system render a WPF application it manages its size itself according to its resolution.
So to check this difference, I created two demo applications in both frameworks and changed the resolutions as well.. but I didn't find any satisfactory difference. Which could explain it is a WPF application and this one is a Windows Forms application.
It does not create any scroll bar on maximizing and doesn't make the button big or small on changing the resolution.
I have read somewhere that Visual Studio 2010 has been rewritten in WPF. But in my experimentation I saw that, (on changing the resolution of desktop) it makes text and graphics unreadable/blurry. On re-sizing its window, everything was getting hidden except the menu-bar. And the menu-bar content was shifting its positioning, e.g. far right one menu items were shifting down. Why?
Kindly make me correct & explain a little more bit (this display issue) too.
To answer this question properly I should write a whole chapter, but I keep it short:
There are three major differences between a WPF application and a Windows Forms application: Layout, Render, Presentation
Layout:
WPF layout system provides a greater flexibility in arranging the elements on the fly. It is based on the Element Bounding Box (as opposed to precise pixels in WinForms) and Measure and Arrange mechanics (as opposed to UpdateLayout in WinForms) that automatically and dynamically finds the place for each element without any need for a manual update.
Basically, all elements bounding box are measured first and then are arranged using multiple methods such as Measure, MeasureCore, ArrangeCore, MeasureOverride, etc.
Unlike WinForms, where you have a pixel-perfect size for everything, in WPF you have much more options and complexity such as Width, ActualWidth and DesiredSize (and even Transforms as LayoutTransform) for the same element.
This is why
As you type in a WPF TextBox, its width might increase and push other elements away or even push some elements into a new row (like the menu bar you've observed)
As the size of a control changes, it affects the available space for other elements. So their size and location might change accordingly.
When the window is being re-sized or resolution is changed, it immediately updates the layout and changes the size of elements in order to fill or fit the space. Here you'll find out more about Layouts.
using Margin alone (without using layout capabilities) to arrange elements is not the best idea in WPF. As it's the WinForms mindset which isn't much helpful while developing WPF.
Render:
WPF uses double data type for Layout (as opposed to pixel-perfect WinForms) and therefore you might see the edges blurry sometimes, but it can be avoided with SnapToDevicePixels=true.
WPF is much more efficient in utilizing the GPU to render a GUI. Try a grid of 30x30 TextBoxes in a Windows Forms application and a WPF application. No matter how messy you write the WPF, it never blinks and it still runs much faster than Windows Forms. Even adding a handful of animations, visual effects and styles on them does not hurt your performance like in Windows Forms.
Remark: To avoid a speed decrease and blinking in a Windows Forms application, you should set DoubleBuffer of the form to "true".
You can use any Transform as RenderTransform to easily implement smooth zoom/rotate, or develop custom GPU-based shader effects, and much more in WPF. (I think everyone agrees that doing such things in WinForms is feasible but real pain and you most likely will give up and move to GDI+ or DX if not out of frustration then because of the bad performance.)
And the last and the most important:
Focus on presentation:
When develping WPF Applications you have to stop thinking in Windows Forms: No more UI events, accessing controls by their names and writing logic in code-behind and start to think in WPF: Binding, Commands, Resources, Styles, Templates, Converters, DependencyProperties and their callbacks.
The real power of WPF lies in separation of 'View' and 'Logic', Which can be achieved using the MVVM pattern.
It makes the most visually-complicated problems quite simple and easy to develop and easy to write Unit Tests for.
Once you got the hang of it, you will realize there's no limit in how you can present the data or show off an awesome GUI looks.
If you've planned to switch to WPF, you've made the right decision. Always stick to MVVM and AVOID CODE-BEHIND AT ALL COSTS! (i.e. unless you are doing a pure UI operation: do not write code in .xaml.cs files, do not access x:Name in cs files and avoid UI events.)
Windows Forms (WinForms) and Windows Presentation Foundation (WPF) are two different ways of building the user interface for your application. Windows Forms is the older technology and its controls are found in the System.Windows.Forms namespace. WPF is a newer technology and its controls are found in the System.Windows.Controls namespace.
WPF
Pros:
Powerful styling and skinning structure
Easy to create your own look and feel
Does support Windows Forms
The future technology for developing Windows Vista applications
The ability to reuse existing code
Highly advanced data binding possible
Cons:
Declarative vs. procedural code
Requires .NET Framework 3.0
Compared to Windows Forms, still in development phase
Requires Dx9 compatible video card for advanced graphics
Windows Forms
Pros:
Extensive documentation to be found on the Internet
Plenty of examples
Does support WPF
Cons:
How long will this be supported? (I've read somewhere that Microsoft is just developing WPF now, only maintenance for Windows Forms).
Design your own look and feel in an application is a lot of work.

Custom Wpf ListBox Control

I'm new to wpf and have just been given a project to create a set of custom controls which will be used to make a previous windows forms application more manageable and current. However I cannot seem to find much info with regards to customising the built in Listbox, this would involve preferably replacing the scroll bar and the +/- buttons with custom images etc..
Just wondered if anyone knows how to get at these ?
Thanks in advance.
Check here for the default control template of the listbox.You can customize the scrollviewer there to do what you are looking for.Check the below article to get started
Using Templates to Customize WPF Controls
Learn about WPF styling and templating. Other than that, the question is too generic for SO. Read the article (and perhaps google some more articles on the topic), try to style the listbox and come back with specific issues. WPF is not easy to get into, but it is definitely worth the time.

Winforms widget to display a grid of constantly updated numbers?

I'd like to create a Winform app (Mono support would be a huge plus) to display a grid of rapidly updating numbers, while not running into redraw problems while scrolling.
From searching around I've found:
Telerik GridView
which seems to be exactly what I want. Is the Telerik path the way to go? Or is the capability available within the standard .NET tool set? If so, which widgets should I be looking at to implement such an application?
Thanks in advance for your help!
All the Grid components from vendors are going to have performance issues if you change the attached values very very quickly. So if you need high performance you really need to create your own. If you are concerned only about flicker and the update does not need to be amazing quick then you will be fine with Telerik or indeed any other vendors Grid component.
You could consider implementing Virtual Mode on the Telerik RadGridView to overcome any performance issues you might encounter.
The demo application included with the controls contains an example of a rapidly updating grid. Although its just a small demo, if you resize the window to be smaller the scrollbar will appear and you can scroll without any redraw issues. You can access the demo under GridView -> Performance -> High Refresh.
Unfortunately, the Telerik WinForms controls aren't compatible with mono.

wpf vs winforms by means of customizeable UI

Which technology (WPF or Winforms) should be used if UI supposed to be highly customizable like controls layout/design could be change by user and such sort of UI customization.
Kindly mention best practices along to achieve that...
I just recently developed a designer in both WinForms (company req) and WPF (to see how much better it was). WPF has a definate edge, especially when it comes to nicer looking controls and control transparency.
This was my first actual WPF project, other than just messing around, so I was learning as I went. I found this series on creating a diagram designer very helpful. I didn't really do the same things that this article talks about, but more of a hybrid between that and my WinForms app.
I have to admit that the UI functionality was up and running much faster in the WPF version than with the WinForms version.
WPF I have found the easiest to create controls on a fly. Because I can just attach them as child controls to the parent, and the Grids, Dock Panels, just make life easier.
I found WinForms to be clunky to always work with. However I come from a Web background and Xaml makes sense to me.
WPF controls are design and lookless. That means you have a default view of them, but everything detail of a WPF control can be overridden. It's almost akin to using CSS. In the WPF world, you do not create custom controls like you do in WinForms. The main thing in WPF world is "styling" controls and defining a style for them. It just happens that the style also controls the layout and the form of the controls.
WPF is FAR superior for designing and style of UI. Check out these two top WPF companies and tell me if this stuff is easy to do in WinForms:
Cynergy Systems: http://www.cynergysystems.com/
Thirteen23: http://www.thirteen23.com/

Resources