I have seen packages like MahApps (http://mahapps.com/MahApps.Metro/) which will allow WPF programs to have the look and feel of Metro.
I've also seen some pretty good looking Silverlight programs created with that Metro theme in mind. For example, when you click a button a panel will slide/transition out over the time span of about a quarter of a second (I don't mean just a simple fade in, I mean the panel physically moving across the screen until it is at full size). My understanding is that this is achieved with storyboards.
My question is whether it is possible in a WPF application to do these sort of transition / visual effects? Or is it something that is strictly in the realm of Silverlight?
Thanks
There is nothing to prevent you from doing these transitions in WPF.
Related
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.
I read that WPF uses DirectX under the hood to perform its rendering, that it doesn't rely on the dinosaurian libraries that WinForms uses to render controls.
So I made my Presentation layer with WPF and it looks the way it should under Win8.
Then I deployed the project to Windows Server 2003... to find out that my nice little custom message box looks awfully WinForms-like and somewhat clunky; the button controls are VERY similar to the WinForms ones, the expander control is no longer shown as a circled ^ arrow and looks like it was drawn in 1998 (picture the ^ arrow on an ugly square flat button that pops up when your mouse hovers over it).
From the Pro WPF in C# 2010 Bible:
Part of the promise of WPF is that you don't need to worry about the details and idiosyncrasies of specific hardware. WPF is intelligent enough to use hardware optimizations where possible, but it has a software fallback for everything. So if you run a WPF application on a computer with a legacy video card, the interface will still appear the way you designed it.
So, is this a lie? To me it is, because it doesn't appear the way I designed it.
If not, then why/how doesn't the thing render identically regardless of the machine that's running it? Is the software fallback somehow designed to mimick Win32/GDI rendering? Is there a way to get my little custom message box to look identical on Win8 and WinServer2K3?
That has NOTHING to do with DirectX / Rendering / video card / any of that.
and EVERYTHING to do with WPF taking the DEFAULT appearance of ALL UI Elements from the Windows Theme.
If you don't want this behavior, you'll have to provide Styles and Templates for ALL UI element types, or otherwise find a way to include PresentationFramework.Aero.dll in your application and use that as the default theme library.
Take a look at this answer
i am learning WPF. i saw a very beautiful application called Blu Twitter client developed with WPF. their UI is really glossy.
can anyone give me some tips that how could i create this type of glossy UI with WPF. what i need to do.......need concept.
thanks
Get Expression Blend (it's free if you are student), it is fairly easy to create some fancy UIs with it - it has really nice graphical designer.
Here is tutorial, which explains how to make such glossy control: http://blogs.msdn.com/b/mgrayson/archive/2007/02/16/creating-a-glass-button-the-complete-tutorial.aspx . This covers basics of how to compose the graphics from gradients and similar graphical primitives and how to make it react on mouse actions.
But be warned: it takes some graphical talent to actually create original graphics! The design above is clearly a work of graphical artist, even though I don't like it - I hate the preudo-3D effect on the navigation buttons, window state controls and message boxes. And similar window transparency tends to be counter-productive.
EDIT:
Note that Expression Blend is since the 2012 release part of the Visual Studio.
Or in addition to mzabsky's suggestion, if you want a more programming approach, the key here is to restyle some of the existing WPF controls. The UI in your picture is not too complex, a main list, a toolbar perhaps at the bottom, a decorator in the upper left corner, some grid/panel layout, nothing unusual, but they are heavily re-styled. Other than that, a couple well-chosen colors with transparency (maybe some color animations for hovering too).
As a starting point, you should get yourself familiar with control restyling in WPF.
I am currently using Telerik's carousel control, but it is lacking many features and is buggy. Is there a good control out there that looks the the coverflow control in itunes?
WPF Cover Flow Tutorial
Source Code: Part 7, Download
Author's rebuttal to claim of memory leak (it doesn't): Part 8
In Action: Videos
Contains a detailed walkthrough for building a coverflow control, including features such as reflection. I compiled and tried it out and pointed it to a directory containing hundreds of smallish images (you'll need to edit TestWindow.xaml.cs to point to a directory containing jpg's) and I was impressed with the performance and smoothness of the animation.
I noticed that using very large images degrades the performance though, so I'd recommend using images that are just the size needed for display. For example, when pointed to my desktop background images directory, there was nearly a one-second delay after pressing the arrow key and the item going through the transition (although the animation itself was still fluid, it took a moment to begin).
This is the best one that I found, for what I was looking for - namely, non-commercial, reflections, and smooth animation. I did look at the other ones currently mentioned in the other answers though, here are some comments on them (in no particular order):
FluidKit's ElementFlow
Open source, I used the latest source code, but did not try out any patches
Animation was smooth
Transition didn't feel very refined, the pictures clip each other in an odd way
Didn't seem geared for showing a handful of element's on the screen at once, it tries to show everything, and from some of the discussion comments, apparently isn't virtualized
After adding some images to the demo through the provided button, a large portion of them couldn't seem to get selected
Doesn't have reflections
Mindscape CoverFlow
Commercial
Animation was smooth
Doesn't "popup" selected item, feels very 2D
Has reflections
DevExpress Carousel
Commercial
No online demo and I didn't try to obtain the trial, looks polished though
Telerik Carousel
Commercial
Animation was smooth
The transition wasn't as pleasing to me, the new picture passed through the old one
Doesn't have reflections
Xceed Cardflow 3D
Commercial (professional edition only)
Animation was smooth, if you went quickly it would show blank cards speeding by and then fade in the actual data on the cards when you slowed down
Supports flipping the selected item, like in iTunes
Has reflections
ElementFlow control is inside the codeplex project called FluidKit - can be downloaded from here
For more details about the control - ElementFlow control at Pavan's blog
Mindscape now provide a commercial WPF Coverflow control as part of their WPF Elements control pack that might be useful also.
http://www.telerik.com/products/wpf/carousel.aspx
http://www.devexpress.com/Products/NET/Controls/WPF/Carousel/dependency_properties.xml
Both of these are FAR more versatile than your average cover flow clone (though they can easily just do that too if you want). I'd recommend Telerik well above DevExpress as WPF is still a relatively immature technology and DevExpress are very poor at keeping up with the tech game (they only JUST released a VS2010-supporting version of their DXperience suite despite promising it "just around the corner" since the start of January, while Telerik, ComponentOne etc all keep up with current tech. Not good enough for enterprise).
I have a NavigationWindow which hosts a series of Pages. For design reasons the Pages are fixed at 780x580 but the NavigationWindow can be set to maximize, leaving a lot of black background around my Pages.
I would like to show a fairly simple, unobtrusive animation (just some labels of various opacity/size streaming from side to side) continuously running behind all the Pages... the logical place would be the NavigationWindow so that there would be no interruption when the user navigates from page to page.
Neither Blend not Visual Studio give me access to controls when I have the NavigationPage in the designer, so my guess is that I cannot do it that way.
Anyone have a suggestion on how to do this, or a workaround that nets me the same result?
I was poking around at this alittle last night, I'll let you know if I come up with anything. Have you looked at the MSDN NavigationWindow ControlTemplate Example