I'm currently learning WPF. I really am enjoying it so far. I love how easy it is to make great looking apps, and would like to create an app that has a custom window border. I would like for it to look something like this:
I know I could just easily change the Window type to not have a boarder and go from there, but that seems to much like WinForms. Wouldn't it be better to just create a class that derived from Window and styled it? If so how can I do this? Thanks!
Here's a great article on customizing Window "chrome" with WPF:
Custom Window Chrome in WPF
It is accompanied by a Code Gallery project from which you can download the code:
WPF Chrome
To show non-standard borders you have to set AllowsTransparency=True and no Border from the window. Whether you want to do this in the class is up to you. You basically have to realize WPF is really just a DirectX application hosted in a standard window. So you if you want non-standard Windows behavior, you have to drop the standard window border and start re-wiring it based on the standard window events you want to handle. Dragging, minimize/maximize/restore, Title bar.
Really, it shouldn't take you more than 30 minutes to an hour to come up with something close to what you want, and you could certainly put your custom window in a base class for re-use on down the road.
I have a feeling, for most cases, this is going to be the better and quicker option than trying override default Windows drawing.
There is a product called "Blendables" which contains a ChromelessWindow control in their "Essentials Mix" bundle which makes this very easy to do. I've never actually used it myself, I just know it exists and thought it might be of use. At bare minimum it shows that you can do what you ask about creating reusable, templatable chrome.
Related
Ok, I'll try to explain what I want to accomplish:
I'm quite new to WPF and XAML and I would like to create some domestic use applications with custom reusable UI. To be clear, I would like that every Window uses the same "Appearence" (specially the non-client area) without customizing every single one of them.
I've done some researches (obviously) and I found something that resembles perfectly what I'm trying to do: MahApps.Metro Template.
But I don't want to use some third party code because I like to have control all over my application and I want to customize what I want by myself. So I'd like to know what is the correct (and the best, maybe) way to do so. I've read plenty of posts about Window customizing but I didn't find anything that explained how to do that in that way.
I hope to have well-explained myself and I thank you all in advance for the help!
If you want to make custom UI in XAML you should learn to use Expression Blend. Here is a resource you can try -
Inspirational Textbox Styles (Source code available)
There are several videos available on youtube on Expression Blend for making custom UI in XAML. You can try that.
For a while now I have attempted to get into UI design with WPF. My main goal is to create a good-looking application in a borderless window, like for example:
I made this example using the MetroUI framework. While this framework does the trick on borderless window functionality, it also does way too much for my tastes, custom controls, skins, animations, etc. I just want a borderless window and decide everything else myself.
I've searched stackoverflow a lot, and tried a fair amount of frameworks, but nothing seems to suit my needs.
Basically, I would like to have a borderless window with FULL windows functionality (drag to sides to pin, only show shadow if operating system settings has it on, etc etc).
Putting WindowStyle to None but keeping AllowsTransparency at False in order to preserve the original window chrome makes most if not all of the functionality I am seeking for work. However, the obvious problem here is: the window chrome is still there.
This looks like this:
To finally ask my question:
Can we keep all the current functionality that this window chrome provides, but somehow make it invisible (yet keep the dropshadow it provides) ? I can live without the dropshadow but it would be a nice bonus.
Or to ask a more broad question: is there any framework / pre-made project, that simply ONLY handles making a borderless window work properly and no other additional controls, skinning, ... ?
The more time I put into this the more it seems making borderless windows with WPF is simply incredibly clunky and I am getting rather unmotivated on my entire project because of this.
Thank you
See my answer on the following thread, it pretty much sums up all the window issues at once. Hope it helps!
WPF Borderless Window issues: Aero Snap & Maximizing
I am interested in implementing Custom Chrome into one of my C# Applications. As i kept searching the internet for libraries that already took care of the main code, i found this: http://wpfwindow.codeplex.com/ . However, this is from 2009 and we are now in year 2014. I am also using Visual Studio 2013 Express for Windows Desktop.
I wanted to know if this resource is outdated, or can it still be implemented today? I am trying to achieve an effect like this:
but, i would like the windows close, minimize, etc. buttons as well as the titlebar in place. Is there any way i can achieve this effect without having to completely rewrite the form?
Something like below, but with custom colors for the header, and the form buttons. I would also like to have the option to remove certain buttons (and keep only the close button)
I also noticed this "Warning" for the essential window: Complete customization of WPF window can be done only when AllowsTransparency is set to "True", which causes that the window is software rendered which might be not as fast GPU rendering. This also made me skeptical on if i should use it or not.
Recap
1) I wanted to know if this resource is outdated, or can it still be implemented today?
2) Is there any way i can achieve this effect without having to completely rewrite the form?
3) Would customizing the entire form make the rendering slower?
I have an idea for a personal project. And I know one way of accomplishing it in Windows Forms (which I no longer wish to use). Basically I could (in WinForms) just draw everything onto the screen (Form) and then when I need to switch views/states of the application, just redraw the new stuff in the old stuff's place.
But how can we have different states in WPF? Is there a "right" or "proper" way of doing this? Is something like this covered somewhere in the docs?
I'd like to do my own searching, but I have no idea what exactly to look for, and current attempts at finding the right information, so far have yielded no helpful (or even relevant) results.
Any help at all will be greatly appreciated. I am new to WPF, but have been making a lot of progress this past week!
Thank you!
P.S.:
I just thouhght of something. If the solution was to draw what is needed for one screen, and when it is time to display the next screen, just dispose of/hide everything and create/display the new stuff, then how would we get around this? Because we can't/shouldn't change XAML markup at runtime, can/should we? :/
Not sure how you drawn your views/states in WinForms (direct painting on a Graphics object?).
The closest to what you're describing is the VisualStateManager. You can use it to statically define several visual states inside a single XAML and transit between them (using a smooth animation if you want).
If what you've done was show different Forms with Show/ShowDialog(), then the equivalent would be to use different Windows and Show/Hide them.
If you just cleared/added Controls to your form, then you can do just the same in WPF. Most Controls in WPF have a Content or Children property instead of Control.Controls in Forms.
I don't know if I understand what you really want. But here are my thoughts:
You can use several Windows and Show/Hide them accordingly
You can use the Frame/Page functionality in WP (MSDN)
if you really need to you could load your XAML and remove the topmost content in your Window and replace it with the loaded content
You could use the VisualStateGroup functionality to change the appearance of your current window
I think you will be happy with the second solution
How would you get a button to look and perform similar to that of the buttons in the volume mixer on Win7?
What I mean is that in the volume mixer there are icons that doesn't look like buttons until you hover them, they also haven't got the standard blueish color when hovered.
So far I haven't found a way to do this directly in visual studio.
I'm guessing that creating a custom user control is the only way to go, but I've had no luck so far, I would appreciate some examples.
In addition, there are also combo boxes in the volume mixer I would like to duplicate. They're hidden except for the text and arrow until they're hovered.
Is there a way to accomplish this?
(Here an image that might help explain what I mean:
http://i53.tinypic.com/2ij409u.png)
For windows application, (and also how they did win7), they used the technology called WPF. I am not specifically answering how you can do this, because in WPF, this is the fundamental that defining skin (via markup called XAML) without touching the implementation code. If you are serious in learning how to do that, I suggest you look for tutorials or good book about WPF.
Here's one of the markup looks like for a button. To modify the button's look, what you need is to define it's XAML, and you don't have to inherit it in the code. The example looks scary long, but Visual Studio could help you.
You could use a third party control library, for example Krypton Toolkit, its free!
There is quite a terrific solution for this button quest. You can paste pictureBoxes on form and handle MouseUp, MouseLeft and MouseDown events. When each of them fires, you need to set specific image (one of tree, in fact) - normal picture, picture of "highlighted" icon and picture of pressed icon. But that's really a hard and useless work, so better don't.
If you need several of such "buttons" in a panel, I remember, I once managed to get the same behaviour by using toolStrip with buttons.